JQuery is fast gaining popularity on the Internet and some big-name companies have started implementing it on their websites as it is easy to use and offers a vast variety of effects for the users. As the title suggests, today we’ll be building a simple sidebar which will consist of the JQuery dropdown effect for the sub-links of a category (in this case sub-category) or a page (and here sub-page). So let’s go!
PREPARING THE HTML MARKUP
<html> <head> <title>Adding JQuery dropdown effect to the sidebar sublibnks | TutorialsWalk | PHP Tutorial</title> </head> <body> <div id="sidebar"> <div class="inside"> <ul id="navigation"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li class="topnav"><a href="#">Sub-Links</a> <ul> <li class="subnav"><a href="#">Sub-Link 1</a></li> <li class="subnav"><a href="#">Sub-Link 2</a></li> <li class="subnav"><a href="#">Sub-Link 3</a></li> <li class="subnav"><a href="#">Sub-Link 4</a></li> </ul> </li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </div> </div> </body> </html>
You might have noticed that I have added classes to the list {<li>} tags, which are topnav & subnav. We’ll be producing and controlling the dropdown effects through these classes as we’ll use them in our JQuery code. Alternatively you can use the id tag too!
ADDING JQUERY FOR DROPDOWNS
To the Head of your HTML markup add the following code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("li.subnav").hide();
$("li.topnav").hover(
function()
{
$("li.subnav").slideDown();
},
function()
{
$("li.subnav").slideUp();
});
});
</script>
To use JQuery we’ll need to import JQuery’s library of all functions to the head for that we’ll be using the one hosted on Google’s API CDN. After that we are hiding all the li.subnav‘s (List tag with the subnav class) and then if the mouse pointer hovers over li.topnav (List tag with the topnav class) all subnav‘s will slide down and if the mouse pointer is removed then they’ll automatically slide up.
That’s it! If you have any questions or suggestions then feel free to leave a comment below 
Posted in 
Don’t use this, if possible! We’ve implemented it into 4 websites, but it does the same: if you wave your mouse over it, it will open & closse as many times as you have moved your mouse over it. For the developer, its OK, because we know how we can expect the website to operate, but visitors had complaints: it’s not comfortable, and hard to “catch”. We’ve used is for single dropdown, too (in the header), that fails as well. I’m currently looking for a similar solution, possibly using jQuery.
It really seems like I didn’t speak English, so it’s “cloSe” and “we’ve used iT”
appointment making…
[...]Add JQuery Dropdown effects to Sidebar “sub-links” | TutorialsWalk[...]…
Oregon Coast TravelOregon Coast Camping, Oregon Coast Travel, Oregon Coast RestaurantsOregon Coast Restaurants…
[...]Add JQuery Dropdown effects to Sidebar “sub-links” | TutorialsWalk[...]…
Very nice tutorial~ Thx very much!
[...] TW TutorialsWalks – Add JQuery Dropdown effects to Sidebar “sub-links” MoreDiggEmailPrintShare on TumblrLike this:LikeBe the first to like this post. This entry was [...]