Open Source Resources for Web Application Developers

Shopify - Online Store Builder
Follow Us on Social Sites
Subscribe RSS Subscribe Newsletter Like us on Facebook Follow us on Twitter Follow us on Google+
  • Home
  • News
  • Plugins
  • Design
  • Others
  • Books
  • About
05 Nov

How to Create Mega Drop Down Menus with jQuery

  • License Free, Menu
  • Leave a Comment

Do you remeber we have published a post of Accessible Very Tall Menus with jQuery and CSS? Some people found it not a good way to present information, because we cannot see everything on the menu in one go.

Now SohTanaka has come up with another solution – Mega Drop Down Menus. According to usability expert Jakob Nielson, mega drop down menus tested to be more efficient for large scale websites.

mega-dropdown-menu

Requirements: jQuery Framework
Demo: http://www.sohtanaka.com/web-design/examples/mega-dropdowns/
License: License Free

Share
Tweet
Sponsors
subscribe to our newsletter - weekly free resouces for web developers
follow us on social sites - rss, facebook, google+, Twitter
Subscribe RSS Like us on Facebook Follow us on Twitter Follow us on Google+
Related Resources
Greyscale Hover Effect with CSS & jQuery

Greyscale Hover Effect with CSS & jQuery

Automatic Image Rotator with CSS and jQuery

Automatic Image Rotator with CSS and jQuery

Sexy Page Peel Effect Tutorial & jQuery Plugin

Sexy Page Peel Effect Tutorial & jQuery Plugin

How to Create Facebook Style Footer Admin Panel

How to Create Facebook Style Footer Admin Panel

Autoresizing Smart Columns with jQuery

Autoresizing Smart Columns with jQuery

How to Create an Image Rotator with jQuery and CSS

How to Create an Image Rotator with jQuery and CSS

Comments
  • http://dewan159.co.cc ahmed zain

    Thanks a lot .. it’s been about 5 days seeking one like that …. thanks

  • http://www.studioweber.ro Alex Flueras

    Thanks so much! I was looking for weeks for such a menu. I only found examples, but the actual tutorial.

  • Doelomite

    Looks slick, but doesn’t seem to behave as expected when viewed from the iPhone’s version of the Safari browser which seems to be an increasingly significant consideration.

  • http://fedmich.com/life fedmich

    it looks beautiful, and glad its made with jquery.

    thanks for posting

  • http://www.kaplang.com Michelle

    thanks for this :) I can use this in one of my current projects instead of the normal drop down menu, this is totally cool and looks great.

  • http://www.nethzah.com/ Peter

    Great Mega Drop-Down Menu. Thanks

    Does this support jQuery UI?

  • http://www.buymagazinesonline.co.uk Mag

    Thanks for this – just what I was after. Now to give it a go….

  • niko

    Hi,
    Have been reading so many posts about jquery menus and IE problems that i’m totally lost … Does anyone have a solution/idea for those kind of jquery mega dropdown menus working with IE6 ? I neeed 3 levels sub-menus with images .. Sorry for my english (i’m french), but hope i’m anderstandable so far ..

  • http://www.comparesubscriptions.co.uk/ Subs

    Best tutorial on the net! have been searching ages, hey niko I think you will have difficulty with this in ie6, I feel your pain! ie6 is such a thorn on the side for designers, this is such a lovely menu if you straight copy it, and even better when you make it fit your site. Thanks for posting it Ray.

  • http://www.victheme.com VicTheme

    nice stuff:)
    Thanks for sharing, I’ve also just created mega menu using drupal module, can be view here http://www.victheme.com/demo_product/16
    Any review or comments are welcome.

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact

Sponsors
Advertise Here
Search
By Keywords
30 Days / All Time
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • Professional Business Cards Made By Designers
  • Best Free Chrome Extensions for Web Developers
  • All of the Best Free WordPress Themes You Need
  • How to Create a Web App Admin User Interface
  • Nice List of Open Source Fish Eye Menu
  • Best Web Admin Templates
  • 25 Useful Blogs for Web Design & Development
  • Simple Javascript Progress Bar with CSS
  • 10 Useful & Quality Design Resources
  • Free Web Application Icons
  • How to Create High-Performance Code
  • Easy to Use, Drag & Drop Bootstrap Interface Builder
  • The Most Well-Made, Free & Open Source Fonts
  • Tiny Responsive jQuery Slider without Fancy Effects
  • How to Create Realtime Multi-player Games in HTML5
  • Create an Amazon-like Navigation Menu with jQuery
  • A True Responsive jQuery Lightbox Plugin for Free
  • How to Make FullScreen Page Transitions with CSS
  • How to Use Web Workers for Image Manipulation
  • Pretty Neat jQuery Mobile Theme Based on Flat UI
Sponsors
Plugins
  • Advertisement15
  • Calendar47
  • Capture19
  • Charts55
  • Chat22
  • Demo Tour16
  • Gallery121
  • Maps30
  • Menu86
  • Polls9
  • Popup49
  • Tooltips42
  • Upload33
  • Video18
Desgin
  • Brushes11
  • Buttons25
  • Color Schemes24
  • Fonts47
  • Forms112
  • Icons108
  • Patterns24
  • PS Tutorials15
  • Stock Photos21
  • Tables25
Others
  • Announcement103
  • Best Collections6
  • Code54
  • eCommerce24
  • Framework214
  • Hosting13
  • Information238
  • Inspiration32
  • Legal Documents10
  • Reviews8
  • Security13
  • Social28
  • Sound16
  • Stats39
  • Tools293
  • Webmail14
Licesnes
  • BSD License67
  • CC License122
  • GPL License224
  • LGPL License40
  • License Free738
  • MIT License408
Sponsors
Advertise Here
Partners
NetDNA