Creating Stylish Sliding Menu With JQuery

Today, we are going to create a very stylish sliding menu as shown in the picture on the left with the help of JQuery. Before we move on, please have a look at the demo of this menu.

In order to create this menu what is usually known as accordion, we will be adding HTML of course, CSS to style the menu and finally JQuery to create the kind of effect this menu has. Of course, once you create this menu, you can style it anyway you want; for example you can create background, active or hover images which can make this menu even more attractive or simply use colors instead. Ok, so let’s move on to creating this menu.

.

HTML

We will be using unordered lists for our menu. Here is how it looks like:

   <ul class="parent">
    	<li>
            <a href="#" class="slide">Title One</a>

            <ul class="child">
            	<li><a href="#">Link One</a></li>
                <li><a href="#">Link Two</a></li>
                <li><a href="#">Link Three</a></li>
                <li><a href="#">Link Four</a></li>
                <li><a href="#">Link Five</a></li>
            <!--<span class="hiddenSpellError" pre=""-->ul>

         </li>
    <!--<span class="hiddenSpellError" pre=""-->ul>
<!-- and more -->

As can be seen, there are two lists, the one with the class parent and other with that of child. The first list item of the parent list contains a link which is actually a heading that when clicked will show sub-links which are there in the child list. So the same markup structure goes for the rest of the headings and links.

The CSS

Here is the CSS for the menu:

a
{
	outline:none;
}

ul
{
	list-style:none;
}

ul.parent
{
	margin:0px;
}

ul.parent a
{
	display:block;
	width:200px;
	border-bottom:1px solid #336699;
	background:#3399FF;
	color:#FFFFFF;
	font-weight:bold;
	text-decoration:none;
	padding:7px;
}

ul.parent a:hover
{
	color:#000000;
	background:#66CC66
}

ul.child a
{
	background:#333333;
	color:#FFFFFF;
	border-bottom:1px solid #f6f6f6;
	font-weight:normal;
	margin-left:-40px;
	padding:7px;
	width:200px;
	display:block;
	line-height:10px;
}

ul.child a:hover
{
	color:#3333333;
	background:#CCCCCC
}

In some browsers, when you click on a link, an outline (sort of dotted border) is created around it, so we disable that behavior by setting:

a
{
	outline:none;
}

Then we remove the list style so that there are no bullets for ul lists and also remove any margins around it by setting value to 0:

ul
{
	list-style:none;
}

ul.parent
{
	margin:0px;
}

After that we set links’ display style to block so that we could apply a width to them and also set some other styles such as background:

ul.parent a
{
	display:block;
	width:200px;
	border-bottom:1px solid #336699;
	background:#3399FF;
	color:#FFFFFF;
	font-weight:bold;
	text-decoration:none;
	padding:7px;
}

Finally we set styles when mouse is over the links using :hover pseudo selector:

ul.parent a:hover
{
	color:#000000;
	background:#66CC66
}

JQuery

We use JQuery’s ready event which fires when DOM (document object model) becomes ready, the short version of this event is:

	$(function(){
	// code here
	});

When the page has loaded, we want to make sure that only the first heading and links are shown which can be done as follows:

	// hide all links except for the first
	$('ul.child:not(:first)').hide();

For each selected heading we set its color to #FF9900, so we want to change the color of the first heading so as to make it feel like selected by default when the page has loaded:

	$("a.slide:first").css("background-color","#FF9900");

Then we write the code for each heading’s click event:

	$('ul.parent a.slide').click(function(){
	});

What it means is that a link with class slide which is inside ul with class parent gets clicked, run the code specified. First, we set background color and mouse over and mouse out color for the current clicked heading and other headings:

	$('ul.parent a.slide').css("background-color","#3399FF");

	$('ul.parent a.slide').mouseout(function(){
		$(this).css("background-color","#3399FF");
	});

	$('ul.parent a.slide').mouseover(function(){
		$(this).css("background-color","#66CC66");
	});

	$(this).mouseout(function(){
		$(this).css("background-color","#FF9900");
	});

We now slide up all child elements:

	// slide all up
	$('ul.child').slideUp('slow');

Then we show the links of the current clicked heading:

	// show the links of current heading
	$(this).next().find('a').show();

$(this) refers to current clicked heading, that is $(‘ul.parent a.slide’, the next() method finds the next element in the hierarchy with respect to clicked element which is ul with class child, we find links inside that using find() method and finally show them. Finally, we slide down the ul with class child and prevent the default action of clicked link or heading.

Finally, we slide down the current heading:

  // slide down current heading
  $(this).next().slideDown('fast');

And we prevent default action of clicked heading which is actually
a link using:

// prevent default action
return false;

Here is the entire JQuery code:

	$(function(){
		// hide all links except for the first
		$('ul.child:not(:first)').hide();
		$("a.slide:first").css("background-color","#FF9900");

		$('ul.parent a.slide').click(function(){
			$('ul.parent a.slide').css("background-color","#3399FF");

			$('ul.parent a.slide').mouseout(function(){
				$(this).css("background-color","#3399FF");
			});

			$('ul.parent a.slide').mouseover(function(){
				$(this).css("background-color","#66CC66");
			});

			$(this).mouseout(function(){
				$(this).css("background-color","#FF9900");
			});

			// slide all up
			$('ul.child').slideUp('slow');

			// show the links of current heading
			$(this).next().find('a').show();

			// slide down current heading
			$(this).next().slideDown('fast');

			// prevent default action
			return false;
		});
	});

Download Code.

Creating CodeIgniter-Like User Guide Panel With JQuery

In this particular tutorial, I will show how to create CodeIgniter-Like User Guide Panel with the help of JQuery.  This panel is readily available on each user guide page of CodeIgniter which makes it very useful because you are able to browse through different topics which are always available and just a click away. Here are some of the most obvious benefits or uses of this panel:

  • Contains a host of links or content
  • Always available on the top
  • Can be used for any content or even a form

The HTML Markup

First of all, we create a panel container div with id panel and then put all content inside it. We will use this id in CSS as well as JQuery to style and manipulate the panel respectively. The html markup for the panel looks like this:

	<div id="panel"></pre>
<div style="padding: <span class=;">10px;"></div>
<pre>
			<div class="left">
				<div class="doc_heading">Basic Information</div>
				<ul>
<ul>
	<li><a href="#">&rarr; Server Requirements</a></li>
</ul>
<ul>
	<li><a href="#">&rarr; License Agreement</a></li>
</ul>
<ul>
	<li><a href="#">&rarr; Credits</a></li>
</ul>
				</ul>
			</div>
		</div>
	</div>

The div with class left is where each distinct section goes and then each section is followed by another div with id divider which is basically a vertical line separating each section.

The CSS
This is the CSS for the panel:

	.left
	{
	 	float:left;
	}
	.right
	{
	 	float:right;
	}
	.clear
	{
	 	clear:both;
	}
	.doc_heading
	{
		font-weight:bold;
		margin:10px 0px 5px 0px;
		font-size:12px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
	}
	body
	{
		margin: 0px auto;
		padding:0px;
	}
	div#panel
	{
		width:100%;
		height:400px;
		color:#FFFFFF;
		background:#666666;
		display:none;
		padding:0px;
	}
	div#btn
	{
		cursor:pointer;
		cursor:hand;
	}
	div#divider
	{
		background:url(images/dot.gif) repeat-y;
		height:350px;
		float:left;
		width:20px;
		margin-left:20px;
	}
	div#panel ul
	{
		list-style:none;
		margin:0px;
		padding:0px;
	}

	div#panel ul li a
	{
		color:#ffffff;
		font-weight:normal;
		text-decoration:none;
		font-size:11px;
		font-family:'verdana';
	}

	div#panel ul li a:hover
	{
		color:#cccccc;
	}

The JQuery
In the JQuery’s ready event which fires as soon as DOM becomes ready, we set the width of the panel so that it adjusts according to size of the browser window and also give appropriate width to the panel images based on the browser window size:

	$(function(){
		// set appropriate width of the slide panel
		setWidth();
	});

Here is the setWidth function:

	function setWidth()
	{
		// get main document width
		var dimension = getPageDimensions();
		var doc_width = dimension[0];
		var slide_button_width = 143;

		// let's find out how much width should be given to each
		// of the left and right bar (slide_panel_01.gif) of the slide panel.
		var diff = doc_width - slide_button_width;
		// now divide diff with 2 to get width for each bar
		var bar_width = diff / 2;

		// now apply width to each bar
		$("div#left_bar, div#right_bar").css("width", bar_width);
	}

Now comes the magic. The JQuery has amazing function by the name of slideToggle which can be used to toggle content with sliding animation style. This function automatically takes care of current state of the sliding element. We put this function in ready even too:

	$(function(){
		// set appropriate width of the slide panel
		setWidth();

		// slide the panel when slide panel button is clicked !
		$("div#btn").click(function(){
			$("div#panel").slideToggle("fast");
		});

	});

Now what it basically means is that when a div with id btn (which is actually slide panel handle at the bottom of the panel) is clicked, slide toggle the div with id panel which is our panel.

See Demo.

Download Code.