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!

Share this post
  • Digg
  • StumbleUpon
  • Reddit
  • del.icio.us
  • Facebook
  • muti
  • Mixx
  • Google
  • laaik.it

This entry was posted on Thursday, December 28th, 2006 at 11:03 pm and is filed under Javascript, jQuery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

71 Responses to “jQuery Pop-up Menu Tutorial”

  1. bqayruiq said this on

    arekehjsy ixhidya ptuznnmekgg pvndxqxfmz qtujuwcu dgfgxyfjgmw nfyhckkvw afdtpxeag…

    bglfdsusnu yfhxmrzs riqwjcrpw rvptfhejkq wmnyimpae cfwaimbgisg…

  2. Web Expose » B2B: Ajax in JQuery with special effects said this on

    [...] 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. [...]

  3. Name said this on

    Thanks so much for doing this, it’s exactly what I’ve been trying to do.

  4. Not telling said this on

    Thank you.

  5. Anand said this on

    This was useful and well explained – thanks.

    I’m new to this myself but:

    couldn’t you replace lines 11-14 with checkHover()?

  6. michael said this on

    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 :)

  7. Tor said this on

    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;
    }

  8. BeerMornster said this on

    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?

  9. rxbbx said this on

    You should make a demo.. Thnx for the info.. Regards

  10. Josh said this on

    I too would like what BeerMornster is asking.

    Can you make this menu have more then 1 layer?

    Thanks!

  11. links for 2007-10-09 « Flatlineato said this on

    [...] Web Expose » JQuery Pop-up Menu Tutorial Creazione di un semplice menù con jquery (tags: jquery Programmazione programming Web) [...]

  12. ysbreker said this on

    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.

  13. lbo said this on

    maybe it’s possible to see a sample page?

  14. Menu Horizontal Déroulant | jQuery | Astuces de Webmaster said this on

    [...] Voici un menu déroulant horizontal fait avec jQuery. La source modifiée : http://webexpose.org/2006/12/28/jquery-pop-up-menu-tutorial/ [...]

  15. 240 plugins jquery : sastgroup.com said this on

    [...] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding [...]

  16. Propiedad Privada » Blog Archive » 240 Plugins para jQuery said this on

    [...] jQuery Menu jQuery iconDock jVariations Control Panel ContextMenu plugin clickMenu CSS Dock Menu jQuery Pop-up Menu Tutorial Sliding [...]

  17. chinatian › jQuery插件超级多 said this on

    [...] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding [...]

  18. CodeRobots ’s Blog » Blog Archive » 240多个jQuery插件 said this on

    [...] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding [...]

  19. Diversos Links para desenvoledores de javascript | Blog do teo said this on

    [...] jQuery Pop-up Menu Tutorial. [...]

  20. Jqueryçš„N个插件 » NeiLyi.cn [尼尔.易] - PHP,Jquery,代码,点滴 said this on

    [...] 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 [...]

  21. jQuery menu plugins « webm said this on
  22. Все о jquery на одной странице :: TermiT's Blog said this on

    [...] Pop Up Menu [...]

  23. LongWay's Blog » Blog Archive 精彩的jQuery插件 said this on

    [...] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding [...]

  24. 百变贝贝 » 上百个让你事半功倍的jquery插件 said this on

    [...] jQuery Menu jQuery iconDock jVariations Control Panel ContextMenu plugin clickMenu CSS Dock Menu jQuery Pop-up Menu Tutorial Sliding [...]

  25. 65 Excellent jQuery Resources (tutorials,cheat sheets,ebooks,demos,plugins…) | Speckyboy - Wordpress and Design said this on

    [...] 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? [...]

  26. The ultimate jQuery Plugin List | Kollermedia.at said this on

    [...] jQuery Menu jQuery iconDock jVariations Control Panel ContextMenu plugin clickMenu CSS Dock Menu jQuery Pop-up Menu Tutorial Sliding [...]

  27. 240 adet jquery ekelntisi - Volkan Şentürk said this on

    [...] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding [...]

  28. 51+ Best of jQuery Tutorials and Examples said this on

    [...] JQuery Pop-up Menu Tutorial- Pop-up link menu (mouse over menu) [...]

  29. 51+最佳jQuery教程和示例 | 帕兰映像 said this on

    [...] JQuery Pop-up Menu Tutorial- Pop-up link menu (mouse over menu) [...]

  30. jQuery插件集合.(240) | Sapling soliloquize said this on

    [...] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding [...]

  31. 强烈推荐:240多个jQuery插件 - 胡言乱语 said this on

    [...] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding [...]

  32. ToBeeDo said this on

    Would be very nice if you will create demo page…

  33. Serhat Yolaçan » Örnek Jquery uygulamaları. said this on

    [...] Mouse Pozisyonu Bulma Açılır Menu Class Değişimi Textbox Değişikliği Oylama Yıldızları Ajax ve [...]

  34. 51+ Best of jQuery Tutorials and Examples | SEO & Web Design said this on

    [...] JQuery Pop-up Menu Tutorial- Pop-up unification schedule (mouse over menu) [...]

  35. » 1000 ressources pour le développement web et WordPress : la grosse grosse liste « css4design : des css pour votre design html said this on

    [...] jQuery Pop-up Menu Tutorial [...]

  36. 240 plugins jquery | Computer and Technoloy News said this on

    [...] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding [...]

  37. 翟鹏的博客 » 240个JQuery插件 said this on

    [...] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Men. jQuery Pop-up Menu Tutorial. Sliding [...]

  38. 键盘人生 - 强烈推荐:240多个jQuery插件 said this on

    [...] 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 [...]

  39. 经典240多个jQuery插件 | 喜羊羊与懒羊羊的窝 said this on

    [...] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding [...]

  40. Hidden Pixels - JQuery Examples said this on

    [...] jQuery Pop-up Menu Tutorial. [...]

  41. jQueryTips » รวมฮิต jQuery Plugins มากกว่า 200 รายการ said this on

    [...] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding [...]

  42. Free Article Directory said this on

    Thanks so much for providing the tutorial, it’s exactly what I’ve needed to complete my project.

  43. 20 Amazing jQuery Plugins and 65 Excellent jQuery Resources | Speckyboy - Wordpress and Design said this on

    [...] 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? [...]

  44. ???? » Blog Archive » 240??jQuery?? said this on

    [...] 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 [...]

  45. Artvin said this on

    Güzel bir çal??ma.

  46. Nova’s Blog » Blog Archiv » JQuery Tutorials für Einsteiger said this on
  47. webgunlukleri.com » Blog Archive » Örnek Jquery uygulamalar?. said this on

    [...] Mouse Pozisyonu Bulma Aç?l?r Menü Class De?i?imi Textbox De?i?ikli?i Oylama Y?ld?zlar? Ajax ve [...]

  48. 51+ JQuery Tutorials and Examples at expertzweb said this on

    [...] JQuery Pop-up Menu Tutorial- Pop-up link menu (mouse over menu) [...]

  49. 200+ jQuery?? | ???? said this on

    [...] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding [...]

  50. ??jquery???????? - ????|????? said this on

    [...] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding [...]

  51. Designing is not so easy, is it? « Sarah’s Weblog said this on

    [...] to create a popup submenu (ie, when you hover over a menu link, a submenu pops up). I found a tutorial on how to do this using [...]

  52. imagic’s blog » Blog Archive » JQUERY???? said this on

    [...] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding [...]

  53. jQuery Eklentileri | Bir Ö?renci Klasi?i said this on

    [...] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding [...]

  54. ??…..?????? -_-|| » 240??jQuery?? said this on

    [...] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding [...]

  55. srui’s blog » 240??jQuery?? said this on

    [...] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding Menu. [...]

  56. ?????240??jQuery?? | ???? said this on

    [...] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding [...]

  57. 200+ jQuery?? | ???? said this on

    [...] 1.3 jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding [...]

  58. 240 ???????????? ???????? ??? jQuery | Parinoff Life said this on

    [...] jQuery Pop-up Menu Tutorial [...]

  59. Trader.uz said this on

    Trader.uz all about forex trading

  60. Jake Delacruz said this on

    jnyvsepeu5pjs9y2

  61. TECHONE BLOG-???????? » Blog Archive » ?????240??jQuery?? said this on

    [...] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding [...]

  62. Jquery?N??? | php????|???|54chen.com said this on

    [...] 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 [...]

  63. 240??jQuery?? | Offar’s Blog said this on

    [...] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding [...]

  64. 240??jQuery???? - memory ’s blog said this on

    [...] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding [...]

  65. ilaçlar said this on

    jVariations Control Panel

  66. görsel dersler said this on

    CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding

  67. Görsel e?itim said this on

    CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding

  68. Lazystudio Blog » Blog Archive » ?:240??jQuery?? said this on

    [...] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding [...]

  69. I’m Chain » jquery » JQuery Plugin 2008 said this on

    [...] jQuery Pop-up Menu Tutorial. [...]

  70. PHP - PeruCODE » 240 plugins para Jquery said this on

    [...] jQuery Menu jQuery iconDock jVariations Control Panel ContextMenu plugin clickMenu CSS Dock Menu jQuery Pop-up Menu Tutorial Sliding [...]

  71. Excelente listado de 240 plugins para jquery | Adictos a la red said this on

    [...] Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding [...]

Leave a Reply