javascript - How to show submenu bar on sidebar when mouse over? -


how show submenu bar on sidebar when mouse on , close when mouse leave? can me solve problem? newbie on using jquery.

js code not working

$(function(){     $('.nav').hover(function(){         $(this).animate({width:'200px'},500);     },function(){         $(this).animate({width:'35px'},500);     }).trigger('mouseleave'); }); 

html

<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation" style="border-radius: 2px 2px 2px 2px;">    <ul class="nav">      <li><a href="#" data-toggle="collapse" data-target="#sub1">setting <span class="caret"></span></a>         <ul class="nav collapse" id="sub1" style="font-weight:bold">           <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> add account</a></li>           <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> update user</a></li>         </ul      </li>       <li><a href="#" data-toggle="collapse" data-target="#sub2"><strong style="font-size:14px; color:#ffcc33;">documents in process</strong></a>         <ul class="nav collapse" id="sub2" style="font-weight:bold">            <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> incoming products</a></li>            <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> document validation</a></li>         </ul>      </li>    </ul> </div> 

css:

.nav{     width:35px;     -webkit-transition:width 500ms ease-out;     transition:width 500ms ease-out; } .nav:hover{     width:200px; } 

see css transitions

see css pseudoclass :hover

greetings timotheus


Comments

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -