ayozone
Ayoli’s blogging zone : linux, ubuntu, music, cooking, misc….
  • Home
  • Gallery
    • butterflies
    • Larzac
    • screenshots april 2008
    • screenshots august 2008
    • screenshots december 2008
    • screenshots february 2009
    • screenshots january 2009
    • screenshots june 2008
    • screenshots june 2009
    • screenshots march 2008
    • screenshots march 2009
    • screenshots may 2008
    • screenshots may 2009
    • screenshots november 2008
    • screenshots october 2008
    • screenshots september 2008
    • screenshots-december-2007
    • screenshots-february-2008
    • screenshots-january-2007
    • screenshots-november-2007
    • screenshots-october-2007
    • trees
  • Donwloads
    • mac menu debs
    • Themes Gtk, Emerald,…
    • music
  • Guestbook
  • About

Drop down menu with jquery

computing Add comments

Here’s a drop down animated menu example made with jquery.js 1.2.2


Roll over this text to show the menu





  • entry one

  • entry two


  • entry three


  • entry four

  • entry five


  • entry six




Related links:

  • jquery

  • the delay effect trick


Here’s the source code :


$(function() {
$(“a#menu-call”).mouseover( function() { $(“ul#menu”).animate({height:”show”,opacity:”show”},”slow”); return false; });
$(“ul#menu”).hover( function() {}, function() { $(“ul#menu”).animate({opacity:1.0},1125).slideUp(375); return false; });
$(“a.mlnk”).hover( function() { $(this).css({ backgroundColor:”#ececec”, border:”1px solid #1042de” }) }, function() { $(this).css({ border:”none”,backgroundColor:”#ffffff” }) } );
})

menu





  • entry one

  • entry two


  • entry three


Tags: code snippets, jquery, js, menu, script


6 February 2008 |

Tags: code snippets, jquery, js, menu, script


27 Responses to “Drop down menu with jquery”

  1. Kenny
    13 June 2009 at 10:16 PM

    Exactly what I’m looking for…too bad it’s full of bugs.


  2. Webagentur
    6 June 2009 at 1:09 PM

    Thank you … that has me very helped.


  3. smithson
    1 June 2009 at 2:57 AM

    how about developing something that works?


  4. Acronyms
    13 May 2009 at 2:54 AM

    Man…


  5. giochi gratis
    11 May 2009 at 11:22 AM

    IE 8 don’t work


  6. Riad Marrakech
    7 May 2009 at 12:54 PM

    IE 6 bug :s


  7. 678
    21 April 2009 at 5:07 AM

    678


  8. ARTI
    17 April 2009 at 4:31 PM

    It works fine on my version of Firefox 1.5.0.1 Perhaps you don’t have the latest version. I run an image gallery myself, but I don’t think type of layout would art? work very well for me as I have descriptions for my images and some of the images are quite large. I don’t know, it might be worth experimenting with.


  9. alex
    3 April 2009 at 11:39 AM

    Fantastic thank you. Find the files you are looking for at http://all-shares.com the most comprehensive source for free-to-try files downloads on the Web


  10. kunal
    20 March 2009 at 11:33 AM

    Its not working fine on IE 6


  11. Jquvavy
    18 February 2009 at 8:48 AM

    chani bahala….


  12. Leo Lima
    4 February 2009 at 3:54 PM

    great…i’m gonna using on my sites

    congratulations


  13. Simon
    2 February 2009 at 10:23 AM

    Anything happening with this menu? Would be nice to see it working in FF3!


  14. thinkadrian
    14 November 2008 at 5:18 PM

    Falls apart in Safari 3 and Firefox 3


  15. 110+ javascript / Ajax bookmarks for web developers
    29 October 2008 at 9:41 PM

    [...] Sliding Bar Menu – Mootools jQuery Fastfind Menu Apple Dock Image Menu amongst others – as seen on Microsoft Tree menu Context Menu LavaLamp for jQuery Slashdot menu Mootools Menu copy Css Dock Menu Nice Horizontal menu Accessible Expanding Menu MultiLevel Menu – jQuery jQuery HoverAccordion Apple Hover Menu sim Simple Javascript Accordian StickMan Labs Accordian MooTools clone Nyko Glitter Tabs Horizontal Accordion Colour Transition Dropdown Menu with jQuery [...]


  16. 110+ javascript / Ajax bookmarks for web developers
    29 October 2008 at 9:41 PM

    [...] Sliding Bar Menu – Mootools jQuery Fastfind Menu Apple Dock Image Menu amongst others – as seen on Microsoft Tree menu Context Menu LavaLamp for jQuery Slashdot menu Mootools Menu copy Css Dock Menu Nice Horizontal menu Accessible Expanding Menu MultiLevel Menu – jQuery jQuery HoverAccordion Apple Hover Menu sim Simple Javascript Accordian StickMan Labs Accordian MooTools clone Nyko Glitter Tabs Horizontal Accordion Colour Transition Dropdown Menu with jQuery [...]


  17. CSS Dropdown Menus Sample and Tutorials - Hidden Pixels
    13 September 2008 at 9:35 AM

    [...] Create a multilevel Dropdown menu with CSS and improve it via jQuery [...]


  18. cardura
    9 September 2008 at 10:01 PM

    cardura…

    arimidex side effects. arimidex. impact trial of arimidex. side effects of arimidex. treat hot flushes caused by arimidex. arimidex. impact trial of arimidex. antidote for antabuse. antabuse. antabuse no prescription. antabuse drug. what is antabuse. e…


  19. 30??CSS?JS?????? | ??????
    8 September 2008 at 6:17 PM

    [...] 19) Drop down menu with jquery- ????????, ?? [...]


  20. tramadol
    6 August 2008 at 4:24 AM

    cash on delivery tramadol…

    tramadol…


  21. Multilevel Drop Down Navigation Menus: Examples and Tutorials - my post it
    1 July 2008 at 3:41 PM

    [...] Drop down menu with jquery- A drop down animated menu example made with [...]


  22. Pushing the boundaries of web design. The ultimate user interface.
    11 June 2008 at 10:12 PM

    [...] http://ayozone.org/2008/02/06/drop-down-menu-with-jquery/ [...]


  23. yczodpfv
    20 May 2008 at 7:05 AM

    yczodpfv…

    yczodpfv…


  24. pciilemq
    20 May 2008 at 6:20 AM

    pciilemq…

    pciilemq…


  25. Multilevel Drop Down Navigation Menus: Examples and Tutorials | SEO & Web Design
    6 May 2008 at 10:06 AM

    [...] Drop downbound schedule with jquery- A modify downbound enlivened schedule warning prefabricated with [...]


  26. 30??CSS?JS?????? | ????
    20 April 2008 at 9:27 AM

    [...] 19) Drop down menu with jquery- ????????, ?? [...]


  27. Multilevel Drop Down Navigation Menus: Examples and Tutorials
    17 April 2008 at 6:28 PM

    [...] Drop down menu with jquery- A drop down animated menu example made with [...]


Leave a Reply

*
To prove that you're not a bot, enter this code
Anti-Spam Image

  • Tags

    global menu firefox terminal screen script tips menu themes shell metacity prompt php wordpress gutsy code snippets bugs plugin install config gnome emerald screensaver guestbook IE gtk brightness guide searchplugin Intrepid xorg wifi bash js weird applications elegant tabs hardy ubuntu ftp linux xul jquery blog macmenu
  • Le Net en France : black-out

    HADOPI - Le Net en France : black-out
  • Google it

    •  » Add Ayozone search to your browser !
  • Ads

  • Language

    • english english
    • français français
  • Blogroll

  • Other blog and sites

    • » YAB
    • » b-initials
    • » binema.com
    • » Eleonore G. portfolio
    • » FabLer Art
    • » tig12 (fr)
    • » urukrama’s blog
  • Meta

    • Log in
    • Entries RSS
    • Comments RSS
    • WordPress.org
Copyright © 2009 ayozone All Rights Reserved
RSS XHTML CSS Log in
Wp Theme by n Graphic Design
Powered by Wordpress Monitoring internetVista® - Monitoring de sites web