Add Jquery .Slide Toggle() Effect On Mouse Hover

By Ayman H Tuesday, June 5, 2012
Those were the most awaited and inspired tutorials for bloggers to taste the power of toggle effects. In this tutorial i am going to give the tutorial on how to add Jquery toggle effect on mouse hover effect and this completes the Jquery toggle effect series. In the version 1 of toggle effect on mouse click event series, i had used automatic mode of child tags fetching. In this i will give you the tutorial on the automatic mode only, but few changes can be noticed here. While giving the tutorial on these series, i always aimed at simplicity for making peoples to understand. To make this mouse hover event tutorial simpler i will use div tags to make it easily understandable. So let us move on with the tutorial now.

http://1.bp.blogspot.com/-1sP4cjZvJYU/TfIp2585mHI/AAAAAAAAHD8/NuCN-EZoIPU/s400/jQuery%2BSlidy.jpg

You can see the final demo of this effect by following the link of below button:

DEMO

Let The Html Snippet Of Div Elements Be Like This::

<div id=mhovermenu>
<ul id=menu class=menu>
<li><a href=# id=title class=menu_title>Link List1</a>
<ul class=menu_body>
<li><a href=#>Link1</a></li>
<li><a href=#>Link2</a></li>
</ul>
</li>
<li><a href=# id=title class=menu_title>Link List2</a>
<ul class=menu_body>
<li><a href=#>Link3</a></li>
<li><a href=#>Link4</a></li>
</ul>
</li>
<li><a href=# id=title class=menu_title>Link List3</a>
<ul class=menu_body>
<li><a href=#>Link5</a></li>
<li><a href=#>Link6</a></li>
</ul>
</li>
</ul>
</div>

Let the Css Style For This Div Elements be Like This::

.menu{
    width:300px;
    background:#000;
    margin:10px;
    padding:0;
    border:1px solid #000;
    cursor:pointer;
}
.menu_title{
    color:#fff;
    padding:5px;
    font-size:25px;
    text-decoration:none;
    margin:5px;
    }
.menu_body{
    display:none;
}
.menu_body a{
    padding:5px;
    color:#166217;
    display:block;
    position:relative;
    background:#fff;
    font-weight:bold;
    text-decoration:none;
}

In the version 2 of mouse click event we noticed that classes are used to define various elements of an Html snippet but in this series we are using the Id of the Html elements to define it in Jquery.
There was lot of conflicts for this toggle effect to work. I finally made it more simpler for bloggers and the simpler Jquery code for automatic mode of child tags fetching is as shown below
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js type=text/javascript/>
<script type=text/javascript>
$(function() {
       $(#menu li).hover(function() {
          $(this).find(ul).slideToggle(fast);
       });
});
</script>

source: stackoverflow
As we can notice the menu li tag in the above Jquery code, it consider the li elements of ul element with id menu as the parent element and the child ul tags under it are considered as child elements and these elements acquires the toggle effect.
You can adjust the toggle speed to Slow or Fast. This completes the post on Jquery Toggle Effect() series.

Thank you for taking your valuable time to read this Pals. .

Post Tags:

Blogger Tricks

Basic / Advanced tutorials on WordPress, Google Blogger, SEO, Earning online income, Website development tips, tricks, etc.

No Comment to " Add Jquery .Slide Toggle() Effect On Mouse Hover "