We have a basic navigation menu that we want to make dynamic by using jQuery. The markup is as follows:
<ul id="navigation"> <li class="more"><a href="#">About</a> <ul> <li><a href="#">About me</a></li> <li><a href="#">Resumé</a></li> <li><a href="#">Portfolio</a></li> </ul> </li> <li><a href="#">Home</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Contact</a></li> </ul>
The first item, as you can see, contains a submenu. The relevant CSS styles are the following:
/* @group Page elements */
body {
margin: 0;
padding: 0;
background: #fff;
color: #333;
font: 62.5% Arial, sans-serif;
}
#site {
width: 100%;
font-size: 1.4em;
}
#navigation {
height: 7em;
overflow: hidden;
margin: 0;
padding: 0 0.5em;
background: #338 url(img/top_nav_bg.jpg) repeat-x 0 0;
list-style: none;
}
#navigation li {
float: left;
height: 100%;
margin-right: 0.5em;
}
#navigation li a {
float: left;
display: block;
padding: 0 1em;
height: 100%;
line-height: 7;
color: #fff;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
}
#navigation li a:hover {
background: transparent url(img/top_nav_ov.jpg) no-repeat 0 0;
}
#content {
width: 90%;
margin: 0 auto;
padding: 1em 0;
}
#content h2 {
margin-top: 0;
font: normal 1.6em Georgia, serif;
color: #900;
}
/* @end */
/* @group JQuery styles */
span.plus, span.minus {
padding-left: 4px;
}
li.more ul {
margin: 0;
padding: 0;
height: 100%;
list-style: none;
float: left;
}
li.more ul li {
height: 100%;
display: block;
margin-right: 0.4em;
float: left;
}
#navigation li.more ul li a {
display: block;
float: left;
height: 100%;
background: transparent;
line-height: 7;
padding: 0 1em;
color: #fff;
text-transform: none;
}
#navigation li.more ul li a:hover {
text-decoration: underline;
}
Two groups of styles: the former for page elements and the latter for our submenu. Now let's add jQuery.
$(document).ready(function() {
$('<span class="plus"></span>').html('+').appendTo('li.more > a:first-child');
$('<span class="minus"></span>').html('-').appendTo('li.more > a:first-child').hide();
$('li.more ul').hide();
$('li.more > a:first-child > span.plus').click(function () {
var parent = $(this).parent().parent();
parent.find('ul').show();
$(this).hide();
$(this).next().show();
});
$('li.more > a:first-child > span.minus').click(function () {
var parent = $(this).parent().parent();
parent.find('ul').hide();
$(this).hide();
parent.find('span.plus').show();
});
});
First, we add a plus and a minus sign to our active menu item and we hide one of them according to the current state of the submenu (either visible or not). Then when an user clicks on the plus sign, we show the submenu and we change the plus sign into a minus sign (and vice-versa). You can see the final result here.