/    Sign up×
Community /Pin to ProfileBookmark

DropDown multilevel menu with hover

Copy linkTweet thisAlerts:
Dec 11.2012

The following is basic working DropDown menu, child’s appear on hover parent text.

[code=html]<script type=”text/javascript”>
$(document).ready(function () {
$(‘#nav ul’).hide();

$(‘#nav li > a’).hover(
function () {$(‘ul’, this.parentNode).stop().slideDown(100);}
);

$(‘#nav li’).hover(null,
function (e) {$(‘ul’, this.parentNode).stop().slideUp(100);}
);

}
);
</script>

<ul id=”nav”>
<li><a href=”#”>Parent A</a>
<ul>
<li><a href=”#”>Sub a1</a>
<ul>
<li><a href=”#”>Item a1.1</a></li>
<li><a href=”#”>Item a1.2</a></li>
<li><a href=”#”>Item a1.3</a></li>
</ul>
</li>
<li><a href=”#”>Sub a2</a></li>
<li><a href=”#”>Sub a3</a></li>
</ul>
</li>
<li><a href=”#”>Parent B</a>
<ul>
<li><a href=”#”>Sub b1</a></li>
<li><a href=”#”>Sub b2</a></li>
<li><a href=”#”>Sub b3</a></li>
</ul>
</li>
</ul>[/code]

I’ve added above a third level under submenu, but it’s not opening and closing this level.

I’m not sure in this case if I need to change the html code or is it only the JavaScript that needs to be changed so that the script will work properly also with the added 3rd level.

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@ReFreezedDec 11.2012 — I changed some things to get your menu working:

  • * Limit the jQuery selection with :eq(0) when animating a menu. This was probably the main problem - all submenus were opening when hovering over a parent.


  • * Remove the CSS height property after animation. The parent menus won't expand properly when opening submenus if this is skipped.


  • * Changed hover with mouseenter and mouseleave. (Hover might work but this looks a bit clearer.)


    • &lt;script type="text/javascript"&gt;

    $(document).ready(function(){

    <i> </i>function resetHeight(){ $(this).height(''); }

    <i> </i>$('#nav ul').hide();

    <i> </i>$('#nav li &gt; a').mouseenter(function(){
    <i> </i> $('ul:eq(0)', this.parentNode).stop().slideDown(100, resetHeight);
    <i> </i>});

    <i> </i>$('#nav li').mouseleave(function(){
    <i> </i> $('ul:eq(0)', this).stop().slideUp(100, resetHeight);
    <i> </i>});

    });

    &lt;/script&gt;

    &lt;ul id="nav"&gt;
    &lt;li&gt;&lt;a href="#"&gt;Parent A&lt;/a&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;Sub a1&lt;/a&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item a1.1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item a1.2 with Sub&lt;/a&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;Sub item a1.2.1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Sub item a1.2.2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Sub item a1.2.3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item a1.3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Sub a2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Sub a3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Parent B&lt;/a&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;Sub b1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Sub b2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Sub b3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/li&gt;
    &lt;/ul&gt;
    Copy linkTweet thisAlerts:
    @blsnauthorDec 11.2012 — Thank you for your response.

    I changed your script to slowing up and down the display of the menu&#8217;s (from 100 to 700, see the code below), but I get a blinking effect on the sliding up items when collapsing is done.

    <script type="text/javascript">

    $(document).ready(function(){

    function resetHeight(){ $(this).height(''); }

    $('#nav ul').hide();

    $('#nav li > a').mouseenter(function(){
    $('ul:eq(0)', this.parentNode).stop().slideDown(700, resetHeight);
    });

    $('#nav li').mouseleave(function(){
    $('ul:eq(0)', this).stop().slideUp(700, resetHeight);
    });

    });

    </script>

    <ul id="nav">

    <li><a href="#">Parent A</a>

    <ul>

    <li><a href="#">Sub a1</a>

    <ul>

    <li><a href="#">Item a1.1</a></li>

    <li><a href="#">Item a1.2 with Sub</a>

    <ul>

    <li><a href="#">Sub item a1.2.1</a></li>

    <li><a href="#">Sub item a1.2.2</a></li>

    <li><a href="#">Sub item a1.2.3</a></li>

    </ul>

    </li>

    <li><a href="#">Item a1.3</a></li>

    </ul>

    </li>

    <li><a href="#">Sub a2</a>

    <ul>

    <li><a href="#">Item a2.1</a></li>

    <li><a href="#">Item a2.2 with Sub</a>

    <ul>

    <li><a href="#">Sub item a2.2.1</a></li>

    <li><a href="#">Sub item a2.2.2</a></li>

    <li><a href="#">Sub item a2.2.3</a></li>

    </ul>

    </li>

    <li><a href="#">Item a1.3</a></li>

    </ul>

    </li>

    <li><a href="#">Sub a3</a></li>

    </ul>

    </li>

    <li><a href="#">Parent B</a>

    <ul>

    <li><a href="#">Sub b1</a></li>

    <li><a href="#">Sub b2</a></li>

    <li><a href="#">Sub b3</a></li>

    </ul>

    </li>

    </ul>[/QUOTE]

    Could you please help on this matter,
    Copy linkTweet thisAlerts:
    @blsnauthorDec 11.2012 — resend...

    &lt;script type="text/javascript"&gt;

    $(document).ready(function(){

    <i> </i>function resetHeight(){ $(this).height(''); }

    <i> </i>$('#nav ul').hide();

    <i> </i>$('#nav li &gt; a').mouseenter(function(){
    <i> </i> $('ul:eq(0)', this.parentNode).stop().slideDown(100, resetHeight);
    <i> </i>});

    <i> </i>$('#nav li').mouseleave(function(){
    <i> </i> $('ul:eq(0)', this).stop().slideUp(100, resetHeight);
    <i> </i>});

    });

    &lt;/script&gt;

    &lt;ul id="nav"&gt;
    &lt;li&gt;&lt;a href="#"&gt;Parent A&lt;/a&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;Sub a1&lt;/a&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item a1.1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item a1.2 with Sub&lt;/a&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;Sub item a1.2.1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Sub item a1.2.2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Sub item a1.2.3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item a1.3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Sub a2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Sub a3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Parent B&lt;/a&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;Sub b1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Sub b2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Sub b3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/li&gt;
    &lt;/ul&gt;
    Copy linkTweet thisAlerts:
    @DevJonesApr 25.2014 — I have something similar to the above code but I need to change the top parent to a onclick event. Is there a way to do this without re-writing the whole code?




    $("#links li").mouseenter( ->

    $("ul:eq(0)", this).slideDown 300

    )

    $("#links li").mouseleave( ->

    $("ul", this).slideUp 300

    )
    ×

    Success!

    Help @blsn spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...