Add Jquery .Slide Toggle() Effect On Mouse Hover

Jquery is a new kind of javascript library. Huge number of bloggers and designers have became the fan of Jquery today due to its amazing features and reliability of use. Lot of amazing image sliders, effects, smooth scrolling effects have been developed on blogosphere with the help of Jquery and every innovation of Jquery scripts are eye catching. As i am much craze about design works, I personally feel like we would have lost lot of amazing web developments if Jquery was not introduced. The only drawback of Jquery language is its still not supported by browsers like IE. Lot n lot of innovations have taken place on blogosphere with the help of Jquery language and i am not gonna give much brief introduction about Jquery language as it goes on and on without end :) Lets Move with the purpose of this post.

Jquery toggle effect is the latest and most inspired one among the innovations of Jquery language and today i am going to give a smart tutorial on how to use Jquery .slide toggle effect with mouse click event and you can get to know it by viewing the DEMO given below.

DEMO

Jquery Toggle Effect on Mouse Click event

Let me start the tutorial by adding this toggle effect to one of the vertical menu bar which i have created myself just to make this post more understandable to my blogging friends like you. This vertical menu bar is very simple to understand.

The CSS part of my custom menu bar flows like below

#navbar{
width:250px;
background:#000000;
margin:20;
padding:0px;
text-align:center;
border:2px solid #f9f9f9;
}
#navbar ul{
margin:0;
padding:0;
list-style:none;
}
#navbar ul li{
position:relative;
padding:5px;
margin:5px;
}
#navbar ul li a{
font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;
text-decoration:none;
font-weight:normal;
color:#ffffff;
display:block;
border:2px solid #fff;
padding:5px;
}
#navbar ul li a:hover{
font-weight:bold;
}
#navbar ul ul{
position:relative;
display:none;
}
#navbar ul ul li a{
background:#fff;
color:#000;
padding:5px;
margin:5px;
border:0;
}
#navbar ul li: ul{
width:100%;
position:relative;
display:block;
top:0;
}

The HTML part flows as below

<div id="navbar">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a>
<ul>
<li><a href="#">Link 2a</a></li>
<li><a href="#">Link 2b</a></li>
</ul>
</li>
<li><a href="#">Link3</a>
<ul>
<li><a href="#">Link 3a</a></li>
<li><a href="#">Link 3b</a></li>
</ul>
</li>
<li><a href="#">Final Link</a></li>
</ul>
</div>

This toggle effect uses jquery library 1.7.1 and the code for it is given below
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

After studying various scripts on Stackoverflow and after a long trials, I have created a Jquery script that fetches the ul elements of the menu bar automatically and applies the toggle effect to those elements. This toggle effect shows the elements on mouse click and hides the elements on mouse click. The thing to be noted in the version 1 of this series is that all the opened tabs of this menu stays active independently as you can observe in the demo given. The version 2 of this series will be on toggle effect which shows only one tab of a menu at a time closing the other opened tabs automatically.

Automatic Mode::

The Jquery script for fetching the ul elements of the above explained custom menu automatically is given below

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><script type='text/javascript'>
$(function() {
$("#navbar li").click(function() {
$(this).find("ul").slideToggle("slow");
});
});
</script>

Here just mentioning the li div class(here navbar li is the div class li element of the above given menu bar) of the menu bar in this script does the job easily.

Note::

Make sure you remove the hover code of the sub/child elements in your CSS Code.

Ex:

#navbar ul li:hover ul{
width:100%;
position:relative;
display:block;
top:0;
}

changes to

#navbar ul li: ul{
width:100%;
position:relative;
display:block;
top:0;
}

That's It Pals. .Hope this helped you a lot. I would post about the manual mode too through which you could apply this effect to only one or your desired parent elements over more number of parent elements included in the menu bar. Kindly let me know if you wish to learn the manual mode and i would be pleased to help you. This post may feel quite difficult for newbies to understand but let me know your queries in the comment section below and i would be pleased to help you. Peace and blessings pals. . :)

Blogger Hacker