Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Simple jQuery Collapsing Menu Question

    using this...

    Code:
    /* 
       Simple JQuery Collapsing menu.
       HTML structure to use:
    
       <ul id="menu">
         <li><a href="#">Sub menu heading</a>
         <ul>
           <li><a href="http://site.com/">Link</a></li>
           <li><a href="http://site.com/">Link</a></li>
           <li><a href="http://site.com/">Link</a></li>
           ...
           ...
         </ul>
         <li><a href="#">Sub menu heading</a>
         <ul>
           <li><a href="http://site.com/">Link</a></li>
           <li><a href="http://site.com/">Link</a></li>
           <li><a href="http://site.com/">Link</a></li>
           ...
           ...
         </ul>
         ...
         ...
       </ul>
    
    Copyright 2007 by Marco van Hylckama Vlieg
    
    web: http://www.i-marco.nl/weblog/
    email: marco@i-marco.nl
    
    Free for non-commercial use
    */
    
    function initMenu() {
      $('#menu ul').hide();
      $('#rsch #menu #rsch-nav ul').show();
      $('#stat #menu #stat-nav ul').show();
      $('#menu li a.drop').click(
        function() {
            $(this).next().slideToggle('normal');
            $(this).toggleClass('drop-down');
            return false;
          }
        );
      }
    $(document).ready(function() {initMenu();});
    i added these two lines

    Code:
    $('#rsch #menu #rsch-nav ul').show();
      $('#stat #menu #stat-nav ul').show();
    to keep the menus on specific pages dropped down...

    it works, but the class doesn't stay toggled if i'm going to a sub page on those specific pages... any idea how i can keep the class toggled if those specific nav items are left dropped down?

  • #2
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts
    i posted a link to make it A LOT clearer to you what the problem is. click on a sub link and then take note of the menu arrows.

    http://dynodealz.com/testdrop/

  • #3
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts
    any ideas?

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    In your second level page, the icon is not correct because it's only set by the click event. On your page you are calling:

    Code:
    $('#rsch #menu #rsch-nav ul').show();
    which just shows the menu and doesn't affect the icon whatsoever.

    You might try replacing the code with:

    Code:
    $('#rsch #menu #rsch-nav a.drop').click();
    to simulate the click. Haven't tested this.

    An alternate option would be do the display of the extended menu on the new page via css rather than javascript.

    EDIT: Tested it now. Just need to switch the order round so the click event's set up first:

    Code:
            function initMenu() {
              $('#menu ul').hide();
              $('#menu li a.drop').click(
                function() {
                    $(this).next().slideToggle('normal');
                    $(this).toggleClass('drop-down');
                    return false;
                  }
                );
              $('#rsch #menu #rsch-nav a.drop').click();
              $('#stat #menu #stat-nav ul').show();
    
              }
    EDIT AGAIN:

    More flexible code would be to read the id on the body element and then just show the drop down for a matching li element:

    Code:
    function initMenu() {
              $('#menu ul').hide();
              $('#menu li a.drop').click(
                function() {
                    $(this).next().slideToggle('normal');
                    $(this).toggleClass('drop-down');
                    return false;
                  }
                );
    		   var page = $('body').attr('id') + "-nav";
    		  $('#'+page+' a.drop').click();
    
              }
    Then you don't have to add a load of statements for each sub page. I'd still do it with css instead though.
    Last edited by SB65; 10-27-2010 at 07:41 PM.

  • Users who have thanked SB65 for this post:

    wyclef (10-27-2010)

  • #5
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts
    nice! yea I think I'll stick with the CSS method...

    so this is what I'm using now...

    Code:
    function initMenu() {
      $('#menu ul').hide();
      $('#menu li a.drop').click(
        function() {
            $(this).next().slideToggle('normal');
            $(this).toggleClass('drop-down');
            return false;
          }
        );
        $('#rsch #menu #rsch-nav a.drop').click();
        $('#rsch #menu #rsch-nav ul').show();
        $('#stat #menu #stat-nav a.drop').click();
        $('#stat #menu #stat-nav ul').show();
      }
    $(document).ready(function() {initMenu();});
    Do you think there is a way on the sub pages to have it so the menu is already dropped down so you don't have to see the menu animate dropping down every sub page link? The only thing I can think of for that would be to have a separate animation for the subpages that doesnt animate and just drops it down??

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Right. I got it into my head you wanted the animation.

    Code:
    function initMenu() {
      $('#menu ul').hide();
      $('#menu li a.drop').click(
        function() {
            $(this).next().slideToggle('normal');
            $(this).toggleClass('drop-down');
            return false;
          }
        );
       $('#rsch #menu #rsch-nav ul').show().siblings('a').toggleClass('drop-down');
       $('#stat #menu #stat-nav ul').show().siblings('a').toggleClass('drop-down');
      };
    
    $(document).ready(function() {initMenu();});

  • #7
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts
    that works great. more compact than what I had. how do people normally deal with the page reload flash or delay before the jquery takes effect again? is there a way to expedite that?

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Well, like I said, I'd do it with css. Then it'll be there when the page loads.

    However, if you re-order the jQuery it's better than now :

    Code:
            function initMenu() {
              $('#menu ul').hide();
              $('#rsch #menu #rsch-nav ul').show().siblings('a').toggleClass('drop-down');
              $('#menu li a.drop').click(
                function() {
                    $(this).next().slideToggle('normal');
                    $(this).toggleClass('drop-down');
                    return false;
                  }
                );
    
    
              }
            $(document).ready(function() {initMenu();});
    Last edited by SB65; 10-28-2010 at 07:18 PM.


  •  

    Posting Permissions

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