jquery cool sliding menu

first have a look over the cool styling menu which we are going to make from the jquery.

http://www.getintothis.com/pub/projects/rb_menu/

menu.html

I also made a new empty javascript file - called menu.js - that will contain the menu code; include this as well.

menu.html

Inside my HTML body I created some nest UL’s:

menu.html

   


  Test 1
  

     
Sub element 1
     
Sub element 2
  

I applied some CSS styling to the menu, but I won’t cover it here, since this is a JQuery tutorial - you can find the complete example with styling in the attached zip file.

Now that we have our HTML set up, we can open up menu.js and code the menu behaviours.

menu.js

 1  var obj = null;
2
3   function checkHover() {
4      if (obj) {
5         obj.find('ul').fadeOut('fast');
6      } //if
7   } //checkHover
8
9   $(document).ready(function() {
10      $('#Nav > li').hover(function() {
11         if (obj) {
12            obj.find('ul').fadeOut('fast');
13            obj = null;
14         } //if
15
16         $(this).find('ul').fadeIn('fast');
17      }, function() {
18         obj = $(this);
19         setTimeout(
20            "checkHover()",
21            400);
22      });
23   });

Starting at line 9: $(document).ready(function() { ... }); is similar to your basic window.onload method of attaching handlers, but is a bit more intelligent. This JQuery function checks the document and is run the moment the DOM is ready to be manipulated, this means you don’t have to wait for images to load like window.onload.

In super-summary, the ready function is where the magic starts, and is your entry point to JQuery code.

Line 10 is an example of JQuery’s element selectors. $('#Nav > li') looks for all LI elements that are children of the node with Nav ID. Read about selectors here.

Now that we’ve selected the elements we want, we specify that the hover event will have an anonymous function attached to it as specified. This means that whenever an LI with a parent of ID Nav is hovered over with the mouse, the specified function will execute. The hover event actually takes two parameters, both functions. The first is the method to run when the mouse enters the object, and the second is the method to run with the mouse leaves the object.

Line 11: check if obj exists (if it does, it means that an element is already visible, line 18), if it is set, find the child UL node (find operates in the scope of the object it’s called on, so if obj is an LI in a #Nav node, then find('ul') finds all UL’s inside that LI), and execute a fadeOut on it. fadeOut and fadeIn are built-in JQuery special effects, and take a speed parameter, ‘fast’, ‘normal’ or ’slow’. Once we’ve dealt with the previously shown object, we fadeIn the currently hovered element.

Line 17 shows the second parameter to the hover function - we set obj to the current element, and then use setTimeout to specify that the checkHover function must be executed in 400 milliseconds. The reason I’ve done it this way, is to prevent the menu from instantly disappearing when you mouse-off it - the user has 400 milliseconds before the fadeOut is called on the menu, which gives them time to correct their mouse positioning if they hover off the element for a moment.

Scarily enough, this is all the code needed to get a mostly-functioning pop-up menu! There’s a lot I don’t know about JQuery, so I might’ve messed something up, but at least it works. The example CSS styling only works in Firefox - IE has some issues with it, but since it’s just an example, I can’t be bothered to fix it. Hopefully that’s enough to get you started on with JQuery - unfortunately WordPress isn’t the best platform for code tutorials, and neither am I the best teacher!

my sample code: change the path of

<script src="http://code.jquery.com/jquery-latest.js"></script>

$(document).ready(function() {

//ready function acts as a body on load

$('#navi > li').hover(function(){

$(this).find('ul').fadeIn('fast');

},function(){

$(this).find('ul').fadeOut('fast');

}

)

});

</script>

<style>

#navi

{

cursor:pointer;

}</style>

<ul id="navi">

<li>my

<ul>

<li>a</li>

<li>b </li>

<li>c </li>

<li>d </li>

<li> e</li>

</ul>

</li>

<li>myenu

<ul>

<li> f</li>

<li>g </li>

<li> h</li>

<li> i</li>

<li> j</li>

</ul>

</li>

<li>struc

<ul>

<li> k</li>

<li> l</li>

<li> m</li>

<li> n</li>

<li> o</li>

</ul>

</li>

</ul>