jQuery Forum

That worked like a treat. Thanks for that JΛ̊KE.

If I might just tag on another question here relating the beginning of the same piece of code, the menu is a CSS menu with ID 'nav' and it would expand to the relavent level as you hover your mouse over it using :hover psuedo element of CSS. The problem was that after clicking on a link, it wasn't folding up afterwards and would remain right their unless you moved your mouse of it. If the content took a while to load, one might think that the click had not occurred.

I've overcome this, by adding the slideUp and show() JQuery methods to the beginning of the code which you supplied, but is this the right way to do this? It does work by the way, but I want to learn to do it right!

1. $(function() {
2.       $('#nav li a').click(function(e) {
3.             // Fold up the menu
4.             $('#nav ul li').stop().slideUp(300)
5.             $('#nav ul li').show();
6.             // Figure out which method to use, this one or the original?
7.             ...
   

The great thing with the above is that it gave me the opportunity to animate it, which looks great by the way. I've just got to figure out how I'm going to animate the unfolding now too!

Thanks again. Just need to know if my fold up method is ok?


Peter
Linux Admin

Willing to help maintain Linux servers remotely for a tiny consideration into my Paypal account :-)

I just revised the code I posted regarding the retracting of the menus to put the show() in a callback.

Is this better please (and is it a logical solution)?

1. $(function() {
       $('#nav li a').click(function(e) {
           // Fold up the menu
           $('#nav ul li').stop().slideUp(300, function() {
               $('#nav ul li').show()
               })
          
           // Figure out which method to use, this one or the original?
   

Thanks again.


Peter
Linux Admin

Willing to help maintain Linux servers remotely for a tiny consideration into my Paypal account :-)

The way to do a slide up/down menu, is:

Thanks Jake,

Actually, the code above is only concerning folding up the menu after the click (without it, unless you move the mouse the menu just stays there, even though the content loads behind it).

The reason for the show() is because without that, when you next hover (or even click) on a top level menu item, it does not expand downwards (or any direction!). If I add the show(), you can detect that it's there when the menu slidesUp. I guess it's making the making the menu items visible if they were extended, but since they're not extended, you can't see them even I used show(). I think it's a hack and probably there is a better way to do that!

I'm trying to create a separate function to trigger on hover, to be responsible for slideDown() and slideUp() of the menus as the mouse moves on and off them. There's a couple of ways I can think of to tackle this. Neither of them are yet working. I've included them below.

Method 1

1. $(document).ready(function() {
       $('#nav ul li').bind('mouseover', function (e) {
           e.preventDefault();
               $(this).slideDown(1000);
           })
           return false;
       })
   

Method 2

1. $(document).ready(function() {
       $('#nav ul li').hover(function(e) {
           e.preventDefault();
           $(this).stop().slideDown(1000);
           });
       return false;
   });
   

Neither of them seem to do anything. I'm concentrating first on the slideDown(). I just figured it would be easier to know if I had a result if the slideUp wasn't trying to counteract it. I'm planning to add that after I've got a slideDown functioning.

Thanks again Jake.


Peter
A Linux Admin

Willing to help maintain Linux servers remotely for a tiny consideration into my Paypal account :-)

I’m not sure what your HTML looks like. Is this it?

Wow! Thanks Jake.. I'm enjoying working that script.

I've adjusted it to fill in the blanks and make it a closer match to what I have. Please forgive the excessive CSS, although it does help to show how the existing menu displays. The code below, is now responding identically to when I put the JQuery in the main page.

Here's the updated code:

1. <!DOCTYPE html>
   <html>
   <head>
       <meta charset="UTF-8" />
       <meta http-equiv="X-UA-Compatible" content="IE=9;FF=3;chrome=1;OtherUA=4" />
       <meta name="viewport" content="width=device-width, user-scalable=no" />
       <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
       <script type="text/javascript">
           $(function() {
               $('#nav li ul').hide()
               $('#nav>li').hover(function(){
                   $(this).children('ul').stop().slideToggle(500)
               })
           });
       </script>
       <style type="text/css">
       /* BEGIN STYLES FOR CSS MENU SYSTEM */
   #nav { /* causes the menu to retain position during scrolling */
       position: fixed;
       top: 42px;
       left: 0;
       right: 0;
       font-size:12px;
   }
   
   /* Menu bar blue background gradient (bar only)*/
   #nav {
       float: left;
       list-style: none;
       margin: 0 0 1px 0;
       width: 100%;
       line-height: 1em;
       font-weight: normal;
       padding-left: 10px;
       padding-top: 0;
       text-align: left;
       cursor: pointer;
       z-index: 2;
       background: #142E51;
       background: linear-gradient(bottom, #142E51 50%, #16608A 75%);
       background: -o-linear-gradient(bottom, #142E51 50%, #16608A 75%);
       background: -moz-linear-gradient(bottom, #142E51 50%, #16608A 75%);
       background: -webkit-linear-gradient(bottom, #142E51 50%, #16608A 75%);
       background: -ms-linear-gradient(bottom, #142E51 50%, #16608A 75%);
       background: -webkit-gradient(linear,left bottom,left top,color-stop(0.5, #142E51),color-stop(0.75, #16608A));
       border-right:1px #154f73 solid;
      
   }
   
   #nav ul {
       border-bottom-left-radius:10px;
       -moz-bottom-left-radius:10px;
       -webkit-bottom-left-radius:10px;
       border-bottom-right-radius:10px;
       -moz-bottom-right-radius:10px;
       -webkit-bottom-right-radius:10px;
   }
   
   #nav,#nav ul:last-child {
       border-top-right-radius:10px;
       -moz-top-right-radius:10px;
       -webkit-top-right-radius:10px;   
   }
   
   #nav a {
       font-size:14px;
       font-weight:normal;
       display: block;
       width: 110px;
       /* horizontal spacing of top items IE6 only */
       color: #FFF;
       /* color of text in menu items */
       text-decoration: none;
       /* vertical space above items Effects IE and Firefox */
       padding-top: 3px;
       /* right hand margin of menu */
       padding-right: 5px;
       /* vertical space below items Effects IE and Firefox */
       padding-bottom: 4px;
       /* left hand margin of menu */
       padding-left:10px;
       z-index: 3;
   }
   
   #nav li .daddy {
       background: url("../images/rightarrow2.gif") no-repeat right;
   }
   
   #nav li {
       float: left;
       padding: 2px;
       /* sets amount of blank space above and below menu items */
       width: 110px; /* horizontal spacing of top items FF IE7 only */
   }
   
   #nav li ul {
       position: fixed;
       left: -999em;
       height: auto;
       width: 185px;
       /* changes the width of the box that the menu items are in but only seems to effect firefox */
       font-weight: normal;
       margin-top: 2px;
       /* sets the vertical alignment of the first box both browsers */
       margin-left: -5px;
   }
   
   #nav li li {
       padding: 0 15px 0 0;
       /* adjust horizontal distance beyond the arrow, that you can move the mouse before the child box disappears (we don't want it to disappear as we want the mouse to be able to continue to the box! Effects IE only*/
       width: 170px; /* adjust width of area available for span */
       margin: 3px auto;
   }
   
   #nav li ul a {
       width: 165px; /* adjust horizontal arrow position */
       color:#4e4e4e !important;
   }
   
   #nav li ul a:hover {
       color: #fff !important;
   }
   
   #nav li ul ul {
       margin: -20px 185px;
       /* 1st figure adjusts the verticle position of the child box. The 2nd adjusts the space between child and parent boxes.*/
   }
   
   #nav li:hover ul ul,#nav li:hover ul ul ul {
       left: -999em;
   }
   
   /* appearance of main dropdown menu when extended */
   #nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul {
       left: auto;
       background:linear-gradient(bottom, #c9ee98 20%, #99d74e 85%);
       background:-o-linear-gradient(bottom, #c9ee98 20%, #99d74e 85%);
       background:-moz-linear-gradient(bottom, #c9ee98 20%, #99d74e 85%);
       background:-webkit-linear-gradient(bottom, #c9ee98 20%, #99d74e 85%);
       background:-ms-linear-gradient(bottom, #c9ee98 20%, #99d74e 85%);
       background:-webkit-gradient(linear,left bottom,left top,color-stop(0.2, #c9ee98),color-stop(0.85, #99d74e));
   }
   
   /* appearance of the hovered over item in the dropd down menu */
   #nav li:hover {
       background:linear-gradient(bottom, #0A6D10 50%, #139932 75%);
       background:-o-linear-gradient(bottom, #0A6D10 50%, #139932 75%);
       background:-moz-linear-gradient(bottom, #0A6D10 50%, #139932 75%);
       background:-webkit-linear-gradient(bottom, #0A6D10 50%, #139932 75%);
       background:-ms-linear-gradient(bottom, #0A6D10 50%, #139932 75%);
       background:-webkit-gradient(linear,left bottom,left top,color-stop(0.5, #0A6D10),color-stop(0.75, #139932));
   }
   /* END STYLES FOR CSS MENU SYSTEM */
      
       </style>
       <title>fadeout-old-fadein-new-ajax-content</title>
   </head>
   <body>
       <ul id="nav">
           <li>
               <a href="1.html">1</a>
               <ul>
                   <li><a href="1.1.html">1.1</a></li>
                   <li>
                       <a href="1.2.html" class="daddy">1.2</a>
                       <ul>
                           <li><a href="1.2.1.html">1.2.1</a></li>
                       </ul>
                   </li>
               </ul>
           </li>
           <li>
               <a href="2.html">2</a>
               <ul>
                   <li>
                       <a href="2.1.html" class="daddy">2.1</a>
                       <ul>
                           <li><a href="2.1.1.html">2.1.1</a></li>
                       </ul>
                   </li>
                   <li><a href="2.2.html" class="daddy">2.2</a>
                       <ul>
                           <li><a href="2.2.1">2.2.1</a></li>
                       </ul>
                   </li>
               </ul>
           </li>
           <li>
               <a href="3.html">3</a>
               <ul>
                   <li>
                       <a href="3.1.html" class="daddy">3.1</a>
                       <ul>
                           <li><a href="3.1.1.html">3.1.1</a></li>
                       </ul>
                   </li>
                   <li><a href="3.2.html" class="daddy">3.2</a>
                       <ul>
                           <li><a href="3.2.1.html">3.2.1</a></li>
                       </ul>
                   </li>
               </ul>
           </li>
       </ul>
   </body>
   </html>
   

If you try the code, you'll see that menu level x.x.x is not displaying at all and also, when you mouseout, the menu disappears in an uncontrolled fashion.

I think though, that this is a great stride in the right direction and I truly appreciate your input.



Peter
A Linux Admin

Willing to help maintain Linux servers remotely for a tiny consideration into my Paypal account :-)

JΛ̊KE

That certainly seems to go the distance with the levels Jake. Thanks for that.

I've been playing with hide(), show() and slides for the last half hour or so, trying to get it to slideUp under control. I'm still no closer with that though. I'm wondering whether a default behaviour is causing it or the toggle is not firing on mouseout?

Not sure if I'm on the right track or not though yet!



Peter
A Linux Admin

Willing to help maintain Linux servers remotely for a tiny consideration into my Paypal account :-)

I think it may have something to do with the :hover in CSS battling the .hover in jQuery.

Well done, you're right about that. Actually, if I just remove the following:

1. #nav li:hover ul ul,#nav li:hover ul ul ul {
       left: -999em;
   }

and

1. #nav li ul {
       left: -999em;
2. }
   

then the party begins.

The only issue now is that when collapsing, the background color,, border of the menu, rounded corners, etc., disappear instantly, while the text slides up gracefully. Would the solution be to inject those :hover styles, using .css() rather than via the stylesheet?

Thanks for your patience Jake


Peter
A Linux Admin

Willing to help maintain Linux servers remotely for a tiny consideration into my Paypal account :-)

I've got it!!!

I also changed the following line in the css from:

1. /* appearance of main dropdown menu when extended */
   #nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul {

to

1. /* appearance of main dropdown menu when extended */
   #nav li ul,#nav li li ul,#nav li li li ul {

Now it's working absolutely perfectly! Looks so smooth and professional

I really, really appreciate your help and persistence with me Jake. I've learnt a lot too.


For anyone who wants to check the full and final code which is working, here it is:

1. <!DOCTYPE html>
   <html>
   <head>
       <meta charset="UTF-8" />
       <meta http-equiv="X-UA-Compatible" content="IE=9;FF=3;chrome=1;OtherUA=4" />
       <meta name="viewport" content="width=device-width, user-scalable=no" />
       <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
      
       <script type="text/javascript">
           $(function() {
               $('#nav li ul').hide()
               $('#nav li').hover(function(){
                   $(this).children('ul').stop().slideToggle(400)
               })
           });
       </script>
      
       <style type="text/css">
       /* BEGIN STYLES FOR CSS MENU SYSTEM */
   #nav { /* causes the menu to retain position during scrolling */
       position: fixed;
       top: 42px;
       left: 0;
       right: 0;
       font-size:12px;
   }
   
   /* Menu bar blue background gradient (bar only)*/
   #nav {
       float: left;
       list-style: none;
       margin: 0 0 1px 0;
       width: 100%;
       line-height: 1em;
       font-weight: normal;
       padding-left: 10px;
       padding-top: 0;
       text-align: left;
       cursor: pointer;
       z-index: 2;
       background: #142E51;
       background: linear-gradient(bottom, #142E51 50%, #16608A 75%);
       background: -o-linear-gradient(bottom, #142E51 50%, #16608A 75%);
       background: -moz-linear-gradient(bottom, #142E51 50%, #16608A 75%);
       background: -webkit-linear-gradient(bottom, #142E51 50%, #16608A 75%);
       background: -ms-linear-gradient(bottom, #142E51 50%, #16608A 75%);
       background: -webkit-gradient(linear,left bottom,left top,color-stop(0.5, #142E51),color-stop(0.75, #16608A));
       border-right:1px #154f73 solid;
      
   }
   
   #nav ul {
       border-bottom-left-radius:10px;
       -moz-bottom-left-radius:10px;
       -webkit-bottom-left-radius:10px;
       border-bottom-right-radius:10px;
       -moz-bottom-right-radius:10px;
       -webkit-bottom-right-radius:10px;
   }
   
   #nav,#nav ul:last-child {
       border-top-right-radius:10px;
       -moz-top-right-radius:10px;
       -webkit-top-right-radius:10px;   
   }
   
   #nav a {
       font-size:14px;
       font-weight:normal;
       display: block;
       width: 110px;
       /* horizontal spacing of top items IE6 only */
       color: #FFF;
       /* color of text in menu items */
       text-decoration: none;
       /* vertical space above items Effects IE and Firefox */
       padding-top: 3px;
       /* right hand margin of menu */
       padding-right: 5px;
       /* vertical space below items Effects IE and Firefox */
       padding-bottom: 4px;
       /* left hand margin of menu */
       padding-left:10px;
       z-index: 3;
   }
   
   #nav li .daddy {
       background: url("../images/rightarrow2.gif") no-repeat right;
   }
   
   #nav li {
       float: left;
       padding: 2px;
       /* sets amount of blank space above and below menu items */
       width: 110px; /* horizontal spacing of top items FF IE7 only */
   }
   
   #nav li ul {
       position: fixed;
       height: auto;
       width: 185px;
       /* changes the width of the box that the menu items are in but only seems to effect firefox */
       font-weight: normal;
       margin-top: 2px;
       /* sets the vertical alignment of the first box both browsers */
       margin-left: -5px;
   }
   
   #nav li li {
       padding: 0 15px 0 0;
       /* adjust horizontal distance beyond the arrow, that you can move the mouse before the child box disappears (we don't want it to disappear as we want the mouse to be able to continue to the box! Effects IE only*/
       width: 170px; /* adjust width of area available for span */
       margin: 3px auto;
   }
   
   #nav li ul a {
       width: 165px; /* adjust horizontal arrow position */
       color:#4e4e4e !important;
   }
   
   #nav li ul a:hover {
       color: #fff !important;
   }
   
   #nav li ul ul {
       margin: -20px 185px;
       /* 1st figure adjusts the verticle position of the child box. The 2nd adjusts the space between child and parent boxes.*/
   }
   
   
   /* appearance of main dropdown menu when extended */
   #nav li ul,#nav li li ul,#nav li li li ul {
       left: auto;
       background:linear-gradient(bottom, #c9ee98 20%, #99d74e 85%);
       background:-o-linear-gradient(bottom, #c9ee98 20%, #99d74e 85%);
       background:-moz-linear-gradient(bottom, #c9ee98 20%, #99d74e 85%);
       background:-webkit-linear-gradient(bottom, #c9ee98 20%, #99d74e 85%);
       background:-ms-linear-gradient(bottom, #c9ee98 20%, #99d74e 85%);
       background:-webkit-gradient(linear,left bottom,left top,color-stop(0.2, #c9ee98),color-stop(0.85, #99d74e));
   }
   
   /* appearance of the hovered over item in the dropd down menu */
   #nav li:hover {
       background:linear-gradient(bottom, #0A6D10 50%, #139932 75%);
       background:-o-linear-gradient(bottom, #0A6D10 50%, #139932 75%);
       background:-moz-linear-gradient(bottom, #0A6D10 50%, #139932 75%);
       background:-webkit-linear-gradient(bottom, #0A6D10 50%, #139932 75%);
       background:-ms-linear-gradient(bottom, #0A6D10 50%, #139932 75%);
       background:-webkit-gradient(linear,left bottom,left top,color-stop(0.5, #0A6D10),color-stop(0.75, #139932));
   }
   /* END STYLES FOR CSS MENU SYSTEM */
      
       </style>
       <title>fadeout-old-fadein-new-ajax-content</title>
   </head>
   <body>
       <ul id="nav">
           <li>
               <a href="1.html">1</a>
               <ul>
                   <li><a href="1.1.html">1.1</a></li>
                   <li>
                       <a href="1.2.html" class="daddy">1.2</a>
                       <ul>
                           <li><a href="1.2.1.html">1.2.1</a></li>
                       </ul>
                   </li>
               </ul>
           </li>
           <li>
               <a href="2.html">2</a>
               <ul>
                   <li>
                       <a href="2.1.html" class="daddy">2.1</a>
                       <ul>
                           <li><a href="2.1.1.html">2.1.1</a></li>
                       </ul>
                   </li>
                   <li><a href="2.2.html" class="daddy">2.2</a>
                       <ul>
                           <li><a href="2.2.1">2.2.1</a></li>
                       </ul>
                   </li>
               </ul>
           </li>
           <li>
               <a href="3.html">3</a>
               <ul>
                   <li>
                       <a href="3.1.html" class="daddy">3.1</a>
                       <ul>
                           <li><a href="3.1.1.html">3.1.1</a></li>
                       </ul>
                   </li>
                   <li><a href="3.2.html" class="daddy">3.2</a>
                       <ul>
                           <li><a href="3.2.1.html">3.2.1</a></li>
                       </ul>
                   </li>
               </ul>
           </li>
       </ul>
   </body>
   </html>
   

Peter
A Linux Admin

Willing to help maintain Linux servers remotely for a tiny consideration into my Paypal account :-)