javascript - Jquery menu not hiding on mouse leave -
i have following menu (which icon needs display drop down menu. can menu show , hide toggle, when that, try move displayed links closes, if trigger on hover with add class, cant menu go away. have way smoothly show , hide menu on mouse on , click?
<div id="global_menu"> <span id="show_global_menu" class="icons_large">(</span> <ul id="dropdown" class="hidden"> <span class="arrow-u" style="margin-top:-8px;"></span> <li> @ajax.actionlink("icon legend", "font_legend", null, new ajaxoptions { updatetargetid = "placeholder_extra1", insertionmode = insertionmode.replace, httpmethod = "get" }, new { @class = "" })</li> <li><a href="../home/index" title="sign out">sign out</a></li> <li>support</li> </ul> </div> <script> $(document).ready(function () { if ($("ul#dropdown").hasclass("hidden")) { $("span#show_global_menu").hover(function () { $("ul#dropdown").slidedown("slow"); }); }; $("ul#dropdown").hover(function(){ $("ul#dropdown").mouseout(function () { $("ul#dropdown").addclass("hidden"); }); }); }); </script>
use it:
<script> $(document).ready(function () { if ($("ul#dropdown").hasclass("hidden")) { $("span#show_global_menu").hover(function () { $("ul#dropdown").slidedown("slow"); }); }; $("ul#dropdown").mouseleave(function () { $("ul#dropdown").slideup('slow'); }); }); </script>
Comments
Post a Comment