www.webdeveloper.com
Results 1 to 5 of 5

Thread: DropDown multilevel menu with hover

  1. #1
    Join Date
    Dec 2012
    Posts
    5

    DropDown multilevel menu with hover

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

    HTML Code:
    <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>
    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.

  2. #2
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    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.)

    Code:
    <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(100, resetHeight);
        });
    
        $('#nav li').mouseleave(function(){
          $('ul:eq(0)', this).stop().slideUp(100, 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></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>

  3. #3
    Join Date
    Dec 2012
    Posts
    5
    Thank you for your response.

    I changed your script to slowing up and down the display of the menu’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>
    Could you please help on this matter,

  4. #4
    Join Date
    Dec 2012
    Posts
    5
    resend...

    Code:
    <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(100, resetHeight);
        });
    
        $('#nav li').mouseleave(function(){
          $('ul:eq(0)', this).stop().slideUp(100, 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></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>

  5. #5
    Join Date
    Apr 2014
    Posts
    1
    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
    )

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles