javascript - Jquery dropdown menu -


I'm having problems creating dropdown menus using jquery and css. I here is my html < Pre> & lt; Nav class = "topNav" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "# menu" class = "menu-toggle" & gt; & Lt; Img src = "img / main.png" / & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# Social" class = "menu-toggle" & gt; & Lt; Img src = "img / social.png" / & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Neo & gt; & Lt; Div class = 'cssmenu' id = "menu" & gt; & Lt; Ul & gt; & Lt; Li class = 'active' & gt; & Lt; A href = 'index.html' & gt; & Lt; Span & gt; Home & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = 'is-sub' & gt; & Lt; A href = '#' & gt; & Lt; Span & gt; Product & lt; / Span & gt; & Lt; / A & gt; & Lt; Ul & gt; & Lt; Li class = 'is-sub' & gt; & Lt; A href = '#' & gt; & Lt; Span & gt; Product 1 & lt; / Span & gt; & Lt; / A & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = '#' & gt; & Lt; Span & gt; Sub item & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = 'last' & gt; & Lt; A href = '#' & gt; & Lt; Span & gt; Sub item & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li class = 'is-sub' & gt; & Lt; A href = '#' & gt; & Lt; Span & gt; Product 2 & lt; / Span & gt; & Lt; / A & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = '#' & gt; & Lt; Span & gt; Sub item & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = 'last' & gt; & Lt; A href = '#' & gt; & Lt; Span & gt; Sub item & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = '#' & gt; & Lt; Span & gt; About & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = 'last' & gt; & Lt; A href = '#' & gt; & Lt; Span & gt; Contact & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Div class = 'cssmenu' id = "social" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = 'http: //www.facebook.com'> & Lt; Img src = "img / facebook.png" /> & Lt; / A & gt; & Lt; A href = '#' & gt; & Lt; Img src = "img / linked.png" /> & Lt; / A & gt; & Lt; A href = '#' & gt; & Lt; Img src = "img / twitter.png" / & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt;

And this is my jquery

  $ (document) .ready (function () {$ ("cssmenu ul"). Hide (); Var Id; $ ("a.menu-toggle"). Mouseenter (function () {id = $ (this) .attr ("href"); list = $ ($ (this) .attr ("href")). (Child) (). (First), list .stop (true, false). Slidedown ("sharp");} $ ("ammu-toggle"). Mouseleave (function () {list = $ (Id). Child (). First (); list.stop (true, false) .SlideUp ("fast");});});   

This is a video from my navbar

  https://drive.google.com/file/d/0B0sCu8aj8zu2SnBuSl9BRmQ1SEE/edit?usp=sharing < / Code>  

This moment I try to slide it down in the drop down. If I remove the mousevel event for the anchor tag then I can go to the drop down menu, but they start stacking.

Try

  $ (Document) .ready (function () {$ ('cssmenu ul'). Hide (); $ ('a.menu- toggle'). Hover (function () {var $ target = $ ($ (this). Attr ('href'). Children ('ul'); console.log ($ target.get)) clearTimeout ($ target.data ('hoverTimer')); $ target stop (true, true). Slidedown ( 500);}, function () {var $ target = $ ($ (this) .attr ('href').) Children ('ul'); var timer = setTimeout (function () $ $ Target.stop (True , True) .slideUp ();}, 200); $ target.data ('hoverTimer', timer);}); $ ('cssmenu & gt; ul'). Hover (function () {explicit timeout ($ (this ) .data ('hover timer'));}, function () {$ (This). Stop (true, true) .slideUp ();});});   

Demo:

Comments

Popular posts from this blog

c - Mpirun hangs when mpi send and recieve is put in a loop -

python - Apply coupon to a customer's subscription based on non-stripe related actions on the site -

java - Unable to get JDBC connection in Spring application to MySQL -