The Ins and Outs of Dynamic Navigation Menus

by on 25th October 2011 with 3 Comments

All web designers go through phases struggling with creative ideas. It’s a natural part of the creation cycle, but it can become frustrating as you’re stuck on a website project for more than a few days. There isn’t any one-size-fits-all solution. But we can take a moment to analyze the design process for better solutions.

The main goal of any website is to lead visitors through your pages. This is accomplished via a navigation of some type, most commonly links. You can build tab bars, banners, block elements, or even float a nav menu off to the side.

Follow us in the guide below as we look through common trends in web navigation menu design. Both designers and developers have come up with tricks for expediting the process of building websites. And we hope to do the same by offering some unique tips for UI navigation.

Plan a Webpage Outline

Before the design process begins, you should take a moment to consider the many styles of dynamic navigation available to you. You could have fly-out or dropdown sub-menus appear from a nav bar or fixed block, but alternatively you could have sub-links slide, fade in, or maybe you don’t even need sub-navigation. These are all important ideas to work through before you dive into Photoshop.

Fork CMS Top nav design

With the above example, Fork CMS is using a simple top-bar navigation which fits in very well. Nothing comes off as confusing or difficult to find and you have access to all of the important site information.

Your situation may greatly differ based on the number of important pages in your own website. This is why I suggest sketching out a diagram to build a more solid idea of how the navigation should work. This could take the form of a flowchart, where you draw in arrows to point towards the next page in a segment.

Attaching Sub-Menus

As an example, the popular design magazine Speckyboy features a sub-nav dropdown menu within each category. WordPress can set this up by default but you still need to utilize some form of jQuery. Meanwhile the niche gaming site Destiny Islands uses jQuery for a slide-down sub-menu for each game in the sidebar area.

Destiny Islands a Kingdom Hearts jQuery retreat

You may also notice the header navigation is coupled with replacement images on mouseover. This small effect is handy if your layout works well holding fixed-width link buttons. jQuery is an option but CSS3 transitions may feel like a better alternative. Both CSS3 and JavaScript boast flaky support in mobile OS’, But for older legacy browsers you’re likely to see more success using a jQuery-based method.

Smashing Magazine redesign homepage

And a sub-menu doesn’t have to stick within the standard formats, either. I think the newest Smashing Magazine re-design says it best with their small tag cloud. Hover over the icon next to their site logo and a menu of blog categories and tags appear. Keep these small yet refined ideas in mind for your own pop-out menus.

Ajax Tabs

To contain a large number of links in a smaller area, some content needs to be hidden by default. Hidden dropdown menus are one way, but a container with tabs is another option. And with Ajax you can asynchronously pull out data from your database or another webpage with each different tab on the div.

Webdesigner Depot home sidebar widget

WordPress blogs are notorious for these kinds of features. The above screenshot from Webdesigner Depot focuses on a sidebar widget to pull out the most popular and recent articles. If you feel this method will suit your layout, it is one way of containing links in a very reduced space.

If You Go Big, Go Fancy!

Those of you who frequent design galleries have most likely stumbled across Coda’s page before. They use both a tabbed content area for loading dynamic information and a heading area with 3 links: Download, Buy, and Help.

Code App for Mac OS X

This is just one perfect example of taking your web navigation to the next level. Big and bold lettering is often attention-grabbing if designed appropriately. And the hover effects added over each link area tack onto the magical feeling of the whole layout. This is all without mentioning the delicious pixel-crazed icons featured next to each large block.

This is a very flashy display of website effects and will not always be realistic within the scope of every project. But for low-numbered navigation links it’s almost better to jack up the size quite a bit. If you only have 3-4 pages these should be easily found and glossed over exquisitely. As for the icons, there are so many resources to check out it’s most likely you’ll run into something cool!

Ruling HTML5 Standards

The web has advanced a long way since 2001. In the past 10 years we have seen tremendous leaps of innovation between techies all around the world. And now HTML5 has swept the design world by storm offering a sound, stable declaration for even some convoluted page elements.

One such example is the <nav> tag which is slowly taking over the unordered list formats (or even coupling the two together). Here’s a great Stack Overflow question about semantic HTML and using the nav element properly. As quoted from the specs page “the nav element represents a section of a page that links to other pages or to parts within the page“.

street lights in Japan roller coaster theme park

A personal favorite article published earlier this year is titled How HTML5 Changes the Way We Think of Navigation and expresses a lot of strong benefits towards the switch in coding. The basic confusion stems from so many developers growing accustomed to XHTML and HTML 4.01 standards.

Conclusion

This guide has looked more into the semantics and markup of building a dynamic navigation menu. Between the new CSS3 animation effects and jQuery UI library there are tons of customizations you can build. Front-end web development has never been this much fun! And it’s easy to find great support communities for newbie developers just picking up the trade.

Have you built any dynamic menu systems on your own website? Or maybe you’ve run into a few really cool effects on other websites. Let us know your thoughts and ideas in the discussion area below.

Comments & Discussion

3 Comments

Comments & Discussion

3 Comments

  1. Shameer says:

    Nice article. Check some more navigation design options here in http://uicart.com/gallery/ui/navigation.htm

  2. Shameer says:

    Nice article. Check some more navigation designs options here in http://uicart.com/gallery/ui/navigation.htm

  3. Mike says:

    Great article, and I like the reference to the element as well. For my own site’s redesign and re-engineering this year (essentially a yearly event), I had fun with the menu. http://focus97.com/ Uses CSS3, HTML5 (the nav tag), jQuery, and some PHP. Also put some fun stuff in place for the page you’re on (if on About, it’ll let you know…)

    Who knows what it’ll look like next year, but for now it’s fun and staying.

Leave a Comment

Subscribe
Membership
About the Author