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; }
greetings timotheus
Comments
Post a Comment