The Ins and Outs of Dynamic Navigation Menus

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.

The Ultimate Designer Toolkit: 2 Million+ Assets

Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.

Explore Digital Assets

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