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
10 Sep

Create a Simple Navigation with a Horizontal Subnav

  • License Free, Menu
  • Leave a Comment

Would you like to create a Simple Navigation with a Horizontal Subnav? It looks very similar to the Menu of Behance Network, which looks nice and professional.

We can achieve this effect purely with CSS, but since we have to attend to our red headed step child aka IE6, we will use a few lines of jQuery to cover all grounds. Nice and simple! I am sure this will come in handy in your future projects.

Horizontal Menu

Requirements: jQuery Framework
Demo: http://www.sohtanaka.com/web-design/examples/horizontal-subnav/
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
Automatic Image Rotator with CSS and jQuery

Automatic Image Rotator with CSS and jQuery

How to Create Mega Drop Down Menus with jQuery

How to Create Mega Drop Down Menus with jQuery

Greyscale Hover Effect with CSS & jQuery

Greyscale Hover Effect with CSS & jQuery

How to Create Facebook Style Footer Admin Panel

How to Create Facebook Style Footer Admin Panel

Allow Users to Switch Page Layouts with jQuery & CSS

Allow Users to Switch Page Layouts with jQuery & CSS

Sexy Page Peel Effect Tutorial & jQuery Plugin

Sexy Page Peel Effect Tutorial & jQuery Plugin

Comments
  • GC

    Nice work, looks very sharp. However, I notice in Safari that the sub-menu doesn’t always stay visible when dropping down from the main menu to the sub-menu; kind of frustrating on an otherwise great looking menu! Any ideas of how to fix this? Would it be related to the 1px border between the main and sub-menu?

  • ruluk7

    Looks nice but is technically not very clean because the subnavigation is not a list. Which makes the whole thing inaccessible…

  • http://www.thatwebguyblog.com ThatWebGuy

    I’ve never been a fan of this type of navigation. Testing with some elderly users and the had difficulty sticking to the very narrow amount of movement these types of menus allow. You have to be reasonably precise when moving the mouse pointer along the horizontal axis. Even I personally don’t find them very usable.

    A traditional sub-menu that simply lists all the items straight down is much more forgiving because they are typically wider and of course you’re only moving the mouse one direction – down. Not down and across. Seems counter productive to make navigation harder to use.

    Also, and this is just this particular implementation of this menu you have in the demo, it’s not exactly the most semantic thing I’ve seen. The sub-menu items should preferably be listed like the root items are (in an unordered list).

    It looks nice though.

  • http://www.toiraq.com omar

    thank you its very useful

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
  • How to Create Realtime Multi-player Games in HTML5
  • A True Responsive jQuery Lightbox Plugin for Free
  • Create an Amazon-like Navigation Menu with jQuery
  • Pretty Neat jQuery Mobile Theme Based on Flat UI
  • Super Smooth CSS Transitions for jQuery
  • How to Use Web Workers for Image Manipulation
  • Free Responsive HTML5 + CSS3 Site Templates
  • How to Make FullScreen Page Transitions with CSS
  • Ghost: A Revolutionary Open Source Blogging Platform
Sponsors
Plugins
  • Advertisement15
  • Calendar47
  • Capture19
  • Charts55
  • Chat22
  • Demo Tour16
  • Gallery121
  • Maps30
  • Menu87
  • Polls9
  • Popup49
  • Tooltips42
  • Upload33
  • Video18
Desgin
  • Brushes11
  • Buttons25
  • Color Schemes25
  • Fonts47
  • Forms112
  • Icons108
  • Patterns24
  • PS Tutorials15
  • Stock Photos21
  • Tables25
Others
  • Announcement103
  • Best Collections6
  • Code55
  • eCommerce24
  • Framework215
  • Hosting13
  • Information240
  • Inspiration32
  • Legal Documents10
  • Reviews8
  • Security13
  • Social28
  • Sound16
  • Stats39
  • Tools294
  • Webmail14
Licesnes
  • BSD License67
  • CC License123
  • GPL License224
  • LGPL License40
  • License Free740
  • MIT License411
Sponsors
Advertise Here
Partners
MaxCDN