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.

168 Responses to “jQuery Pop-up Menu Tutorial”

  1. bqayruiq said this on January 13th, 2007 at 11:37 pm

    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 January 31st, 2007 at 12:48 am

    [...] 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 February 1st, 2007 at 1:04 am

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

  4. Not telling said this on February 28th, 2007 at 1:02 pm

    Thank you.

  5. Anand said this on April 7th, 2007 at 4:48 pm

    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 April 10th, 2007 at 11:41 am

    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 June 22nd, 2007 at 1:45 pm

    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 July 3rd, 2007 at 12:33 pm

    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 July 9th, 2007 at 8:42 pm

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

  10. Josh said this on July 9th, 2007 at 11:00 pm

    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 October 9th, 2007 at 4:21 am

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

  12. ysbreker said this on October 15th, 2007 at 9:16 am

    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 October 24th, 2007 at 6:16 pm

    maybe it’s possible to see a sample page?

  14. Menu Horizontal Déroulant | jQuery | Astuces de Webmaster said this on November 10th, 2007 at 11:55 am

    [...] 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 November 21st, 2007 at 5:11 pm

    [...] 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 December 5th, 2007 at 2:41 pm

    [...] 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 December 6th, 2007 at 3:22 am

    [...] 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 December 17th, 2007 at 4:50 am

    [...] 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 January 1st, 2008 at 1:44 pm

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

  20. Jqueryçš„N个插件 » NeiLyi.cn [尼尔.易] - PHP,Jquery,代码,点滴 said this on January 2nd, 2008 at 11:04 am

    [...] 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 January 10th, 2008 at 12:16 pm

    [...] Pop up menu - http://webexpose.org/2006/12/28/jquery-pop-up-menu-tutorial [...]

  22. Все о jquery на одной странице :: TermiT's Blog said this on February 1st, 2008 at 10:59 pm

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

  23. LongWay's Blog » Blog Archive 精彩的jQuery插件 said this on February 13th, 2008 at 7:46 am

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

  24. 百变贝贝 » 上百个让你事半功倍的jquery插件 said this on March 20th, 2008 at 3:27 am

    [...] 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 April 2nd, 2008 at 2:05 pm

    [...] 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 April 3rd, 2008 at 6:40 am

    [...] 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 April 9th, 2008 at 12:04 pm

    [...] 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 April 24th, 2008 at 5:08 pm

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

  29. 51+最佳jQuery教程和示例 | 帕兰映像 said this on April 25th, 2008 at 7:12 am

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

  30. jQuery插件集合.(240) | Sapling soliloquize said this on April 28th, 2008 at 6:06 pm

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

  31. 强烈推荐：240多个jQuery插件 - 胡言乱语 said this on May 3rd, 2008 at 6:43 am

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

  32. ToBeeDo said this on May 3rd, 2008 at 12:00 pm

    Would be very nice if you will create demo page…

  33. Serhat Yolaçan » Örnek Jquery uygulamaları. said this on May 5th, 2008 at 12:29 pm

    [...] 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 May 6th, 2008 at 10:17 am

    [...] 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 May 16th, 2008 at 1:35 pm

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

  36. 240 plugins jquery | Computer and Technoloy News said this on May 17th, 2008 at 8:24 am

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

  37. 翟鹏的博客 » 240个JQuery插件 said this on May 28th, 2008 at 10:58 am

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

  38. 键盘人生 - 强烈推荐：240多个jQuery插件 said this on June 14th, 2008 at 4:03 pm

    [...] 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 June 28th, 2008 at 5:24 am

    [...] 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 June 30th, 2008 at 11:47 am

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

  41. jQueryTips » รวมฮิต jQuery Plugins มากกว่า 200 รายการ said this on July 1st, 2008 at 7:08 pm

    [...] 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 July 19th, 2008 at 6:41 am

    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 July 21st, 2008 at 11:16 am

    [...] 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 August 14th, 2008 at 9:34 am

    [...] 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 August 27th, 2008 at 12:58 am

    Güzel bir çal??ma.

  46. Nova’s Blog » Blog Archiv » JQuery Tutorials für Einsteiger said this on August 30th, 2008 at 7:00 pm

    [...] http://nettuts.com/javascript-ajax/s…-using-jquery/ http://webexpose.org/2006/12/28/jque…menu-tutorial/ http://www.gronkyco.com/blog-posts/x…-using-jquery/ [...]

  47. webgunlukleri.com » Blog Archive » Örnek Jquery uygulamalar?. said this on August 31st, 2008 at 12:51 am

    [...] 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 September 1st, 2008 at 8:19 pm

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

  49. 200+ jQuery?? | ???? said this on September 23rd, 2008 at 5:15 am

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

  50. ??jquery???????? - ????|????? said this on September 29th, 2008 at 8:31 pm

    [...] 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 September 30th, 2008 at 4:31 am

    [...] 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 October 7th, 2008 at 6:04 pm

    [...] 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 October 12th, 2008 at 11:19 am

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

  54. ??…..?????? -_-|| » 240??jQuery?? said this on October 14th, 2008 at 11:11 am

    [...] 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 October 15th, 2008 at 8:33 am

    [...] 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 October 29th, 2008 at 10:22 am

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

  57. 200+ jQuery?? | ???? said this on October 31st, 2008 at 7:41 am

    [...] 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 October 31st, 2008 at 3:43 pm

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

  59. Trader.uz said this on November 6th, 2008 at 8:26 am

    Trader.uz all about forex trading

  60. Jake Delacruz said this on November 13th, 2008 at 5:20 am

    jnyvsepeu5pjs9y2

  61. TECHONE BLOG-???????? » Blog Archive » ?????240??jQuery?? said this on November 16th, 2008 at 4:41 am

    [...] 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 November 16th, 2008 at 12:22 pm

    [...] 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 November 22nd, 2008 at 4:45 pm

    [...] 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 November 23rd, 2008 at 10:08 am

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

  65. ilaçlar said this on November 24th, 2008 at 9:41 am

    jVariations Control Panel

  66. görsel dersler said this on November 24th, 2008 at 9:41 am

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

  67. Görsel e?itim said this on November 24th, 2008 at 9:42 am

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

  68. Lazystudio Blog » Blog Archive » ?:240??jQuery?? said this on December 2nd, 2008 at 4:19 am

    [...] 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 December 2nd, 2008 at 5:14 am

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

  70. PHP - PeruCODE » 240 plugins para Jquery said this on December 7th, 2008 at 3:30 am

    [...] 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 December 7th, 2008 at 6:34 pm

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

  72. 240 plugin h?u ích c?a JQuery « Anhcaxomlieu’s Blog - Ph?m Ng?c Hùng BKA said this on December 18th, 2008 at 12:41 pm

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

  73. facingSun said this on December 25th, 2008 at 8:22 am

    Thanks so much for providing the tutorial.

  74. JM said this on December 27th, 2008 at 4:58 am

    I’d like to see a demo.

    Thanks.

  75. jQuery???240 plugin list | ??????? said this on January 5th, 2009 at 8:23 am

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

  76. 50+ jQuery Tutorials und mehr für Einsteiger und Fortgeschrittene said this on January 6th, 2009 at 9:28 am

    [...] Pop-Up Menu Ein Tutorial zur Erstellung von PopUp-Menüs. [...]

  77. Neil’s Blog » Blog Archive » The ultimate jQuery Plugin List said this on January 8th, 2009 at 2:30 am

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

  78. Top Jquery Plugins! | Nicholas Technology World said this on January 16th, 2009 at 9:52 pm

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

  79. 100 jQuery Tutorials and Examples | CSS Experiments said this on February 2nd, 2009 at 8:47 pm

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

  80. birkof’s blog » Blog Archive » Lista de plugin-uri jQuery said this on February 4th, 2009 at 11:13 am

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

  81. ???????? ?? » Blog Archive » 240??jQuery?? said this on February 4th, 2009 at 11:38 am

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

  82. 240+ plugins para jQuery | Lo Pongo Acá said this on February 6th, 2009 at 8:09 am

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

  83. 240 plugins para JQuery | Marcelo Vega said this on February 7th, 2009 at 5:17 pm

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

  84. Mais de 200 Plugins utilizando Jquery « Jorge Eduardo said this on February 12th, 2009 at 7:46 pm

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

  85. Soul » 240 ???????????? ???????? ??? jQuery said this on February 20th, 2009 at 8:13 am

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

  86. » 240 plugins JQuery Darío Ferrer said this on February 21st, 2009 at 4:41 am

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

  87. VietNam PHP Blog » Blog Archive » 240 plugin h?u ích c?a JQuery said this on February 25th, 2009 at 5:52 am

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

  88. jQuery???? « jQuery?? said this on February 27th, 2009 at 12:54 pm

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

  89. DOUAMI » Plugins pour jQuery said this on February 28th, 2009 at 2:40 am

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

  90. 30 excellentes ressources pour développer avec jQuery said this on March 3rd, 2009 at 9:32 am

    [...] un popup facile en jQuery [...]

  91. 100+ jquery????,???Web?????? - ??? said this on March 3rd, 2009 at 5:39 pm

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

  92. 100+ jquery????,???Web?????? | ??? said this on March 5th, 2009 at 3:33 am

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

  93. ???? said this on March 30th, 2009 at 8:55 pm

    ??? ?????????????
    ????? ??????????? ??????? ?????????? ?? ??? ????

  94. 200+ jQuery?? | forcto.com said this on March 31st, 2009 at 6:18 pm

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

  95. 51+??jQuery????? | forcto.com said this on March 31st, 2009 at 6:23 pm

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

  96. 51+ JQuery Tutorials and Examples at Expertz said this on April 4th, 2009 at 7:31 am

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

  97. List of categorised Jquery Plugins | Expertz said this on April 7th, 2009 at 9:54 pm

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

  98. ??? » Blog Archive » 240??jQuery?? said this on April 9th, 2009 at 4:39 am

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

  99. » 100 Popular jQuery Examples/Plugins said this on April 11th, 2009 at 6:23 am

    [...] Plugin Development Pattern; Developing a jQuery Plugin; and Building your First jQuery Plugin. 96. jQuery Pop-up Menu Tutorial – This is a tutorial material that focuses on pop-up link menu. 97. The jSkinny on jQuery – [...]

  100. JavaScript/CSS pop-up tabs - DesignersTalk said this on April 18th, 2009 at 1:36 am

    [...] like a z-index issue. This jquery tutorial seems like it addresses something similar: Web Expose ? Blog Archive ? jQuery Pop-up Menu Tutorial essentially, you mouse over a list item and it pops up another item. Either way, I’m sure there is [...]

  101. ithoughts.de said this on April 26th, 2009 at 8:05 pm

    Thanks for the example … I think you should test some anti-comment-spam plugin for this blog. Theres a lot of trackback-spam in here.

  102. Lista plugins jquery | Geekblog said this on May 1st, 2009 at 4:43 pm

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

  103. Riad Marrakech said this on May 24th, 2009 at 11:33 am

    Simple and light ! exelent tutorial thanks

  104. ?????240??jQuery?? « ??? said this on June 4th, 2009 at 9:19 am

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

  105. The Ultimate jQuery List of Guides, Resources, and Downloads | Graphic Design Pro said this on June 6th, 2009 at 2:39 am

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

  106. 240 plugin h?u ích c?a JQuery « Thông tin – Qu?ng cáo – Gi?i thi?u said this on June 10th, 2009 at 10:49 am

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

  107. Developing with Javascript « BigBadCollab Blog said this on June 16th, 2009 at 7:01 pm

    [...] Treeview treeView Basic FastFind Menu Sliding Menu Lava Lamp jQuery Menu clickMenu CSS Dock Menu jQuery Pop-up Menu Tutorial Sliding [...]

  108. JQuery: ???? ????? ???????? | peopleofdesign.net | ??????????? said this on June 22nd, 2009 at 2:43 pm

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

  109. 240 de pluginuri jquery | javascript&jquery said this on July 20th, 2009 at 12:18 pm

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

  110. The Ultimate jQuery List of Guides, Resources, and Downloads | Download E-Books Free Video Training Courses Softwares said this on July 29th, 2009 at 4:03 am

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

  111. 240+ awesome Plugins in the List « Er.Krushna Chandra Muni :: Website Design Orissa,Website Design Bhubaneswar,Indian Web Designer,Indian Freelancer,website design india said this on August 4th, 2009 at 2:28 am

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

  112. Mr. Nqdungx » Blog Archive » 240 jQuery plugins said this on August 5th, 2009 at 5:22 am

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

  113. 240 plugin h?u ích c?a JQuery « Nothing like Impossible – ?? M?nh Hùng said this on August 5th, 2009 at 5:53 pm

    [...] [...]

  114. 240 plugin h?u ích c?a JQuery said this on August 7th, 2009 at 11:05 am

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

  115. ?????240??jQuery?? - Hobo said this on August 12th, 2009 at 9:31 am

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

  116. 200 jQuery plugins | Sinoyan said this on August 13th, 2009 at 12:58 pm

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

  117. 240 plugins jquery - AdaptBlog said this on August 29th, 2009 at 5:29 am

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

  118. 20 jQuery Tutorials Collection | jQuery Wisdom said this on August 30th, 2009 at 7:25 am

    [...] 10. Basics Of jQuery 11. jQuery Pop Up Menu’s [...]

  119. jQuery Eklentileri 1 « Webmaster Destek Cms Seo Makaleleri said this on September 2nd, 2009 at 5:14 pm

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

  120. Free Style Live » Blog Archive » ?????240??jQuery?? said this on September 14th, 2009 at 4:01 am

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

  121. 240 plugins Jquery | flazann said this on September 29th, 2009 at 5:30 pm

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

  122. Morris Ruschel said this on October 9th, 2009 at 2:08 am

    Thank’s great tuto!!

  123. List of jQuery plugins » IMvsMI blog said this on October 9th, 2009 at 10:52 pm

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

  124. JQuery: ???? ????? ???????? ? ????? ??????? @ ???????? ???? said this on October 13th, 2009 at 10:32 am

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

  125. CS said this on October 14th, 2009 at 5:58 pm

    Is it possible to have a submenu on the submenu?
    Like this menu:
    nav
    nav
    nav - subnav
    nav
    nav - subnav - subsubnav
    nav - subnav
    nav - subnav - subsubnav
    nav
    nav

    Little bit strange example but you’ll get the point.

    Thanks in advance.

  126. CS said this on October 15th, 2009 at 3:41 pm

    Not possible?

  127. CS said this on October 15th, 2009 at 4:38 pm

    Hm.. Never mind, find something

  128. Des centaines de liens JQuery | Juste le zeste... said this on October 27th, 2009 at 4:54 pm

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

  129. links for 2009-11-09 | Pratyush Kotturu - KE5YQZ said this on November 9th, 2009 at 8:04 pm

    [...] NYTimes.com 4 hours ago7 Principles Of Clean And Optimized CSS Code - Smashing Magazine 21 hours agoWeb Expose » Blog Archive » jQuery Pop-up Menu Tutorial 23 hours agoGuide to National Webcams 24 hours agoDallas/Fort Worth Traffic Conditions 24 hours [...]

  130. 240??jQuery?????? said this on November 18th, 2009 at 5:02 pm

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

  131. radyo said this on December 15th, 2009 at 1:16 pm

    Thanks! Good pop menu ;)

  132. ???? ????? ???????? ? ????? ??????? said this on December 15th, 2009 at 9:10 pm

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

  133. En iyi 240 adet JQuery Uygulamas? « ABDULLAH TURHAN said this on December 24th, 2009 at 1:39 pm

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

  134. En iyi 240 adet JQuery Uygulamas? « ABDULLAH TURHAN said this on December 24th, 2009 at 1:39 pm

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

  135. En iyi 240 adet JQuery Uygulamas? « ABDULLAH TURHAN said this on December 25th, 2009 at 1:59 pm

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

  136. 240+ ???????? ? Jquery ot Jurgen Koller-? - ???? ??????? said this on January 3rd, 2010 at 12:54 am

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

  137. 17 ?????? ???????? jQuery ??? ???? ? ????????? « ???? ??????? – ???????? said this on January 8th, 2010 at 8:22 pm

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

  138. Çok ??inize Yarayacak 240 Adet Jquery Eklentisi | Beytullah GÜRPINAR said this on January 14th, 2010 at 3:28 pm

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

  139. jQuery?? | DesignStudio-50M?? said this on January 29th, 2010 at 5:28 am

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

  140. beezlesput said this on February 3rd, 2010 at 6:48 am

    Hi,
    dunno if this thread is live at all, but can anyone tell me how to stop this popup menu displaying by default when the page loads? i want the popup to appear only when the user hovers over the parent menu item
    thanks

  141. Macrostone Blog » Blog Archive » said this on February 18th, 2010 at 6:35 pm

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

  142. Jquery Kütüphanesi « Birebir Payla??m said this on February 18th, 2010 at 11:25 pm

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

  143. ????jQuery?? « ?? said this on February 20th, 2010 at 9:18 am

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

  144. 240 plugins jquery | AdaptBlog said this on February 27th, 2010 at 3:15 am

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

  145. Jquery plugin 240??? – FeeBoy|?? said this on March 1st, 2010 at 4:43 pm

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

  146. ????? 240 ???????? jQuery « XOCT.IN said this on March 4th, 2010 at 12:38 am

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

  147. 100 Popular jQuery Examples, Plugins and Tutorials said this on March 7th, 2010 at 1:36 am

    [...] Plugin Development Pattern; Developing a jQuery Plugin; and Building your First jQuery Plugin. 96. jQuery Pop-up Menu Tutorial – This is a tutorial material that focuses on pop-up link menu. 97. The jSkinny on jQuery – [...]

  148. oyun hileleri said this on March 14th, 2010 at 7:58 pm

    I agree with you, good luck.

  149. vacances maroc said this on March 18th, 2010 at 5:00 pm

    Pour celles et ceux qui adorent le maroc comme moi…

  150. ??? » Blog Archive » jQuery???? said this on March 20th, 2010 at 11:13 am

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

  151. carlos said this on March 31st, 2010 at 4:46 pm

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

  152. 240 plugin h?u ích c?a JQuery - Vivui.net said this on April 10th, 2010 at 2:30 am

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

  153. Jquery – Mega Lista de Plugins : : BL Ti said this on April 16th, 2010 at 5:55 pm

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

  154. Web Design said this on April 23rd, 2010 at 1:58 am

    awesome stuff
    thanks for the great info

  155. Dong Sauser said this on May 3rd, 2010 at 9:27 pm

    I have only recently began blogging here at WordPress and simply enjoy the experience.As of yet I haven’t gotten what I would reckon a good deal of views or comments so I’m not positive what this larger universe of blogging reckons of my work. It is with some pride that I say my blogging most assuredly reflects my ego and no matter of what the world thinks or does not think of my work I shall proceed to pour my heart and soul out over my transcendental keyboard onto the great white page.

  156. 35 Ultimate Useful jQuery Tutorials | WEBAXES.COM said this on May 4th, 2010 at 8:34 pm

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

  157. jQuery?????????? | LAMP???? said this on May 6th, 2010 at 7:07 am

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

  158. jQuery Plugins - Nagpur City said this on June 2nd, 2010 at 3:08 pm

    [...] Plugin Development Pattern; Developing a jQuery Plugin; and Building your First jQuery Plugin. 96. jQuery Pop-up Menu Tutorial – This is a tutorial material that focuses on pop-up link menu. 97. The jSkinny on jQuery – It [...]

  159. jQuery plugin ??? : : ?????-????Blog said this on June 14th, 2010 at 12:01 pm

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

  160. Ertan said this on June 15th, 2010 at 10:41 pm

    I agree with you, good luck.thanks

  161. kk said this on June 17th, 2010 at 5:35 am

    yyyyyyyyyyyyy

  162. Kampanya said this on June 23rd, 2010 at 2:07 am

    ? agree this post

  163. ??240??jQuery?? | ???? .NET,C#,??,???,????,??? said this on July 1st, 2010 at 2:56 am

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

  164. En iyi 240 adet JQuery Uygulamas? « ABDULLA TURHAN said this on July 4th, 2010 at 8:06 pm

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

  165. 240 plugin h?u ích c?a JQuery « "Ngoc Design .com "- Webdesign – Design Brochure – Design Logo – Thiet Ke Web, Thi?t K? Logo, Thi?t K? Brochure – SÁNG T?O LÀM NÊN THÀNH CÔNG said this on July 8th, 2010 at 5:55 pm

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

  166. jose mendoza said this on July 11th, 2010 at 12:33 am

    You would think the author would include a fricking demo on this page. There is nothing worse than a tutorial/piece of code without a demo. FFS

  167. friendship in your locality said this on July 21st, 2010 at 12:12 pm

    Wow! awesome tutorial its easier than java script its bit to understand

  168. Build local conversations said this on July 21st, 2010 at 12:16 pm

    Thanks for an article to post.

Leave a Reply