December 28, 2006
JQuery Pop-up Menu Tutorial
Ok, so I’ve had some time to play with JQuery, and whipped up a quick DHTML pop-up link menu (mouse over menu). Let’s get started:
Download the JQuery library (direct link) and put it somewhere in your project directory. I renamed the file to jquery.js because I was lazy. You can now include the file in your HTML page/template.
menu.html
<script src='jquery.js' type='text/javascript'></script>
I also made a new empty javascript file - called menu.js - that will contain the menu code; include this as well.
menu.html
<script src='menu.js' type='text/javascript'></script>
Inside my HTML body I created some nest UL’s:
menu.html
<ul id='Nav'>
<li>
Test 1
<ul class='Menu'>
<li>Sub element 1</li>
<li>Sub element 2</li>
</ul>
</li>
</ul>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!
arekehjsy ixhidya ptuznnmekgg pvndxqxfmz qtujuwcu dgfgxyfjgmw nfyhckkvw afdtpxeag…
bglfdsusnu yfhxmrzs riqwjcrpw rvptfhejkq wmnyimpae cfwaimbgisg…
[…] Like the previous JQuery introduction - JQuery Pop-up Menu Tutorial - we’ll be using the latest JQuery library, and a seperate external javascript file to contain our behaviours and logic. […]
Thanks so much for doing this, it’s exactly what I’ve been trying to do.
Thank you.
This was useful and well explained – thanks.
I’m new to this myself but:
couldn’t you replace lines 11-14 with checkHover()?
Oh, hmm - you should be able to. Thinking back I think maybe the ‘obj = null’ part was doing something it shouldn’t, I was probably being lazy and/or not paying attention
This is handy. FYI, I mucked with the CSS to make it a horizontal menu… the following works for me on FireFox and Safari (though I haven’t checked it on IE yet). Replace the contents of style.css with this:
#Nav {
padding: 0;
list-style: none;
}
#Nav li {
width: 150px;
background: #ddd;
margin: 1px 0 0 1px;
height: 20px;
float: left;
}
.Menu {
padding: 0;
clear: left;
list-style: none;
display: none;
}
This is really cool, been looking for this for a while.
how can i add a third layer of links to the menu, or make it works to multiple levels?
You should make a demo.. Thnx for the info.. Regards
I too would like what BeerMornster is asking.
Can you make this menu have more then 1 layer?
Thanks!
[…] Web Expose » JQuery Pop-up Menu Tutorial Creazione di un semplice menù con jquery (tags: jquery Programmazione programming Web) […]
Replacing
10 $(’#Nav > li’).hover(function() {
with
10 $(’ul > li’).hover(function() {
Means you can make layers as deep as you want.
Only problem is that IE does some weird fading action each time you hover over a new item.
maybe it’s possible to see a sample page?
[…] Voici un menu déroulant horizontal fait avec jQuery. La source modifiée : http://webexpose.org/2006/12/28/jquery-pop-up-menu-tutorial/ […]
[…] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding […]
[…] jQuery Menu jQuery iconDock jVariations Control Panel ContextMenu plugin clickMenu CSS Dock Menu jQuery Pop-up Menu Tutorial Sliding […]
[…] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding […]
[…] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding […]
[…] jQuery Pop-up Menu Tutorial. […]
[…] jQuery Menu.jQuery iconDock.jVariations Control Panel.ContextMenu plugin.clickMenu.CSS Dock Menu.jQuery Pop-up Menu Tutorial.Sliding Menu.http://stilbuero.de/jquery/tabs_3/十九、幻灯、翻转等(Accordions, Slide and […]
[…] Pop up menu - http://webexpose.org/2006/12/28/jquery-pop-up-menu-tutorial […]
[…] Pop Up Menu […]
[…] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding […]
[…] jQuery Menu jQuery iconDock jVariations Control Panel ContextMenu plugin clickMenu CSS Dock Menu jQuery Pop-up Menu Tutorial Sliding […]
[…] 22. Photo Slider Tutorial 23. Text box hints 24. 5 JavaScript Tricks Made Easy with jQuery 25. JQuery Pop-up Menu Tutorial 26. A Quick Code Igniter and JQuery Ajax Tutorial 27. jQuery and XML revisited 28. What is JSONP? […]
[…] jQuery Menu jQuery iconDock jVariations Control Panel ContextMenu plugin clickMenu CSS Dock Menu jQuery Pop-up Menu Tutorial Sliding […]
[…] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding […]
[…] JQuery Pop-up Menu Tutorial- Pop-up link menu (mouse over menu) […]
[…] JQuery Pop-up Menu Tutorial- Pop-up link menu (mouse over menu) […]
[…] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding […]
[…] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding […]
Would be very nice if you will create demo page…
[…] Mouse Pozisyonu Bulma Açılır Menu Class Değişimi Textbox Değişikliği Oylama Yıldızları Ajax ve […]
[…] JQuery Pop-up Menu Tutorial- Pop-up unification schedule (mouse over menu) […]
[…] jQuery Pop-up Menu Tutorial […]
[…] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding […]
[…] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Men. jQuery Pop-up Menu Tutorial. Sliding […]
[…] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding Menu. http://stilbuero.de/jquery/tabs_3/ 幻灯、翻转等(Accordions, Slide and Toggle […]
[…] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding […]
[…] jQuery Pop-up Menu Tutorial. […]
[…] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding […]