• Home
  • About
  • Contact
  • Advertise

Devlounge

Design, Develop, and Grow

  • Home
  • Code
  • Design
  • Design Focus
  • Interviews
  • Publishing
  • Strategy
  • Webapps
  • Extras

12 Old and New CSS Menu Techniques

October 21, 2010 By Hyde

A navigation menu, something unmissable in all websites, one of the most important factor besides content. You can have a simple navigation or a very intricate one, design and code wise. Once I learned some key navigation techniques I went on to learn how to work around WordPress generated navigation to still be able to use dropdown menus without extra plug-ins. In most cases I rather hardcode the navigation, especially if they require more specific HTML code.

Now that CSS has become mainstream a lot of tutorial focus more on advanced techniques assuming you already know the basics. Same thing goes for books, I’m a book person and I have some of the latest CSS books and more and more writers start their introduction saying that they assume you have basic and working knowledge about CSS.

Not everyone can learn and understand coding right away, myself I am good at CSS and XHTML but with PHP it took some long hours and it still does. My skills becomes rusty very fast if I don’t code regularly. This is where old tutorials come in handy, they might date back a few years but for getting back to basics or if you just started out they are the best tutorials. Most of them have a lot of user comments full of tips, adjustments and bug fixes, so plenty of resources.

I selected 12 navigation techniques from very intricate to simple ones, old and new ones. They are build with CSS, CSS3, jQuery, Javascript and in some cases graphics. Dig in and find out what you have forgotten or what you didn’t know before and freshen up your navigation coding skills!

Create an apple style menu and improve it via jQuery

CSS Menu

A flyout menu with breadcrumb trail

CSS Menu

Advanced CSS Menu

CSS Menu

Javascritpt Dock Fisheye Menu

CSS Menu

Sweet AJAX Tabs With jQuery 1.4 & CSS3

CSS Menu

Create a Slick Tabbed Content Area using CSS & jQuery

CSS Menu

CSS Overlapping Tabs Menu

CSS Menu

CSS Sprite Navigation Tutorial

CSS Menu


Awesome Cufonized Fly-out Menu with jQuery and CSS3

CSS Menu

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu

CSS Menu

RocketBar – A jQuery And CSS3 Persistent Navigation Menu

CSS Menu

CSS3 Minimalistic Navigation Menu

CSS Menu

Filed Under: Code, Design Tagged With: css, css3, jquery, Menus, navigation

Code & Tutorials

Which Front-End Development Languages Will Grow in 2017?

Your Guide to Leveraging APIs as a Developer

Bitcoin Processing Website Integration For Web Developers

Website Security For 2016 That All Developers Need To Know

5 Reasons You Need to Be Using jQuery

About Devlounge

Want to read more about Devlounge, or maybe you want to contact us, or even advertise? Oh, and don't forget to subscribe to updates!

The Best of Devlounge

Top 6 Online Resources for Designers and Creative Freelancers

Search