• Beginner's Guide
  • Python is free and easy to learn after reading this tutorial.

Wednesday, 2 October 2013

How to Build Content Slide with jQuery Animation

Last updated on 07:14 - by Ramandeep Singh - Tags :

Creating your own content slide with jQuery animation is more challenging and fun as you have a better control on how you want your content to appear and to make your own impressive content creation that will amuse your viewers. It is an accomplishment that you are able to create your own jQuery content slider on your own. Besides, it is sometimes daunting to re-edit and change the jQuery codes for the content slide of others. For beginners, you need to learn the basic steps on how to create your own content slide with jQuery to start unleashing your own creativity. Here are the basic steps of animating the hide and slide of your jQuery content with basic coding guidelines provided by Jake Rocheleau using the jQuery UI easing effects.

Basic Start – Creating your document

The sliding codes will be separately kept on a JF file that will be named as nav-left.js. First off, you have to start with the left hand navigation of the menu. Included in the code below are the jQuery UI libraries from Google and that of jQuery itself together with Google’s web font class. This method will be best for a beginner to use as it will allow them to switch from one JavaScript file to different sliding effects anywhere on the page. However, you still need to apply some CSS property to make it work.

<doctype html>

<html lang="en-US">


 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

 <title>Vertical Page Navigation Demo</title>

 <meta name="author" content="Jake Rocheleau">

 <link rel="shortcut icon" href="http://www.hongkiat.com/blog/favicon.ico">

 <link rel="icon" href="http://www.hongkiat.com/blog/favicon.ico">

  css" media="all" href="global.css">

  css" media="all" href="http://fonts.googleapis.com/css?family=ABeeZee">



Then use the code below to continue. Note that the inner body shows the 2 divs to separate the contents of your jQuery slide. The hidden content will be found in the #about and you must label it appropriately for easy reference. The default content of this jQuery content will be about company information which you can easily edit and change to your own custom content. The #mainpage div will hold the rest of the elements that are visible on the slider in every page loads. The slider that you will create will actually include the floating navigation menu to go along with the div for your content. This will give you more room to change, edit and re-organize the placement of your content later.

<div id="about">

Lorem Ipsum Dolor





   <h1>Webpage Title</h1>

   <ul id="navigation">

    <li><a href="#">Home</a></li>

    <li><a href="#about">Click Me</a></li>



  <div id="content">

   <!-- place your main page content here -->




Creating your Web Page Layout

In your page layout keep in mind to always place the main content div above the hidden div. You should also be mindful about the content that you will add ensuring that they will fit within the window for viewing.

#about {

 display: block;

 width: 350px;

 padding: 8px 11px;

 padding-top: 35px;

 position: absolute;

 top: 0;

 left: 0;

 height: 100%;


#mainpage {

 width: 100%;

 height: auto;

 display: block;

 background: #473d47 url('http://media02.hongkiat.com/jquery-sliding-navigation/bg.png');

 min-height: 800px;

 overflow: hidden;

 position: relative;

 z-index: 2;

 color: #fff;



In this coding, the width is limited to 350 px which is the fixed width of pixels that the sliding menu will open to display the content. Use the overflow:hidden; to prevent excess content like box shadows on your jQuery slide and they may appear outside the boundaries where they should be displayed.

#mainpage nav {

 position: absolute;

 width: 180px;

 min-height: 100%;

 padding: 0px 8px;

 padding-top: 220px;

 background: #343638;


#mainpage nav h1 {

 font-family: 'ABeeZee', 'Trebuchet MS', Arial, sans-serif;

 font-size: 2.85em;

 line-height: 1.3em;

 font-weight: bold;

 text-transform: uppercase;

 margin-bottom: 11px;


#navigation { list-style: none; }

#navigation li { display: block; margin-bottom: 2px; font-size: 1.4em; font-weight: bold; }

#navigation li a { display: block; padding: 8px 6px; width: 100%; color: #d1e0f8; text-decoration: none; }

#navigation li a:hover, #navigation li a.open { color: #fff; background: #484e57; }


The navigation menu uses the root

Your step in jQuery Animation

This code below will provide some event handler to the navigation links. The internal function here refers to the clicks made by the user of the slider in order to stop the href value against loading. This will prompt it to check the link that has been clicked instead. If you see that the href points to the #about, it will indicate that the user clicked the link on the hidden page.

$("#navigation li a").on("click", function(e){


  var hrefval = $(this).attr("href");

  if(hrefval == "#about") {

   var distance = $('#mainpage').css('left');

   if(distance == "auto" || distance == "0px") {



   } else {




 }); // end click event handler


As you check the code above, you will find that the CSS on the left side of navigation menu is set to 0 px indicating that the nav is closed and that you want to have it opened. If it is open, you will that the px value is increased. Adding the code below will give you better space in case you want to write other methods later on. Use the jQuery UI in order to help you optimize the custom animations that you can use for your page.

Displaying the menu on hover view

There are two jQuery blocks that you can check when the user of your content slider hovers the mouse over the hover link and when he clicks on the close button. They have similar function although they may perform different tasks. To create a hover effect, use the following code:
$("#navigation li a").on("hover", function(){

  var classval = $(this).hasClass("hovertrigger");

  if(classval == true) {

   var distance = $('#mainpage').css('left');

   if(distance == "auto" || distance == "0px") {





 }); // end hover event handler

Here, check the anchor link in the navigation which is now tied over to the hover event. The hovered link must be using the .hovertrigger class. Then display the menu from this hover effect but do not close it using this code:
$("#closebtn").on("click", function(e){



 }); // end close button event handler

As you are done with the code for building a content slide with jQuery animation that allows the user to hide and slide the navigation menu, you will find the overall results as one shown on the image below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat volutpat nibh nec posuere. A die shopuf pogest concludi cum administrasset slushie intus calidum brioche.
Follow me @ramantoday
Subscribe to this Blog via Email :


Text Widget

Recent News

About Us

© 2014 DesignRapid. Designed by Ramandeep Singh
Powered by Blogger.
back to top