Website navigation menus and megamenus

Here we will show you how to create different types of navigation menus and megamenus for your website.

If you have a look at the demo in IE6, you might notice that the problematic SELECT box is behind the drop-down :). This was done by adding an <iframe> block behind the drop-down navigation.

Drop-down website navigation example

Click here to see a simple drop-down menu in action.

Drop-down navigation HTML code

<div id="nav-wrapper">
  <ul class="nav">
    <li id="nav-1" class="nav-item">
      <a class="nav-item-link" href="javascript:;">Main nav 1</a>
      <!--[if lte IE 6]><a class="nav-item-link nav-item-link-ie6" href="javascript:;">Main nav 1</a><![endif]-->
    </li>
    <li id="nav-2" class="nav-item">
      <a class="nav-item-link" href="javascript:;">Main nav 2</a>
      <!--[if lte IE 6]><a class="nav-item-link nav-item-link-ie6" href="javascript:;">Main nav 2<table><tr><td><iframe frameborder="0" border="0"></iframe><![endif]-->
      <div class="nav-submenu submenu-2">
        <ul class="nav-submenu-subnav">
          <li><a href="javascript:;">Link 1</a></li>
          <li><a href="javascript:;">Subnavigation item 2</a></li>
          <li><a href="javascript:;">Subnav item 3</a></li>
          <li><a href="javascript:;">Link 4</a></li>
          <li><a href="javascript:;">Subnavigation item 5</a></li>
          <li><a href="javascript:;">Subnav item 6</a></li>
        </ul>
      </div>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li id="nav-3" class="nav-item">
      <a class="nav-item-link" href="javascript:;">Main nav 3</a>
      <!--[if lte IE 6]><a class="nav-item-link nav-item-link-ie6" href="javascript:;">Main nav 3<table><tr><td><iframe frameborder="0" border="0"></iframe><![endif]-->
      <div class="nav-submenu submenu-3">
        <ul class="nav-submenu-subnav">
          <li><a href="javascript:;">Link 1</a></li>
          <li><a href="javascript:;">Subnavigation item 2</a></li>
          <li><a href="javascript:;">Subnav item 3</a></li>
        </ul>
      </div>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
  </ul>
</div>

Drop-down navigation CSS code

<style type="text/css">
/* Some basic styles */
body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0; padding: 0; }
h1 { font-size: 1.5em; margin: 0 0 16px; padding: 15px 0 5px; }
ul, li { margin: 0; }

/* Navigation */
.nav { height: 30px; list-style-type: none; padding: 0; }
.nav-item { background-image: none; display: block; float: left; margin: 0;
  padding-left: 0; position: relative; text-align: center; }
.nav-submenu { border: 1px solid #CCC; border-bottom: 0; display: none; left: 2px;
  position: absolute; text-align: left; top: 30px; }
.nav-item:hover .nav-submenu { display: block; }

a.nav-item-link { background-color: #CCCCCC; color: #663333; display: block;
  font-weight: bold; height: 22px; margin: 0 0 0 2px; padding: 8px 10px 0;
  text-decoration: none; }
a.nav-item-link:hover,
.nav-item:hover a.nav-item-link { background-color: #CCDDCC; color: #333366; }

ul.nav-submenu-subnav { padding: 0; width: 140px; }
ul.nav-submenu-subnav li { display: block; padding: 0; }
ul.nav-submenu-subnav li a { background-color: #DDDDDD; border-bottom: 1px solid #CCC;
  color: #663333; display: block; text-decoration: none; padding: 4px; }
ul.nav-submenu-subnav li a:hover { background-color: #EEEEEE; color: #443333; }
</style>

<!--[if lte IE 6]>
<style type="text/css">
/* IE-6 styles */
.nav a.nav-item-link { width: 60px; text-indent: -10000px; }
.nav a.nav-item-link-ie6 { position: absolute; display: block; overflow: hidden; top: 0;
  left: 0; text-indent: 0; }
.nav a.nav-item-link-ie6:hover { overflow:visible; }

.nav .nav-submenu { display:block; background-image: none; left: 0; }
.nav a.nav-item-link-ie6 span { display:none; }
.nav ul.nav-submenu-subnav li a { height: 16px; line-height: 16px; }

.nav a.nav-item-link-ie6 iframe { position: absolute; top: 30px; left: 0; width: 142px; }
.nav #nav-2 a.nav-item-link-ie6 iframe { height: 151px; }
.nav #nav-3 a.nav-item-link-ie6 iframe { height: 76px; }
</style>
<![endif]-->

Mega menus

Mega menus are drop-down menus with content beyond the traditional link list. They can include images, video, background images, multi-column layout and any other rich content you want to include or promote.

This tip shows how to create a cross-browser compatible mega menu navigation with only CSS and HTML.

Mega menu demo

Click here to see the mega menu in action.

Mega menu HTML and CSS code

Just do “View source” in IE or “This Frame >> View Frame Source” in Firefox in the demo window to get access to the HTML and CSS.

Dropdown menu with hoverIntent time delay

Do you want to add a small time delay to your navigation to avoid navigation drop-down on accidental hover? This tip shows how to create a basic cross-browser compatible drop-down navigation, with a time delay applied between mouse hover event and the drop-down action.

This example uses the hoverIntent jQuery plugin.

The purpose of having a time delay is so that navigation menus do not drop down when the visitor accidently swipes the mouse pointer over (and off) the navigation menu.

Drop-down navigation demo

Click here to see a drop-down menu with time delay in action.

Drop-down navigation HTML code

The HTML is exactly the same as in the basic drop-down navigation with HTML and CSS demo.

Drop-down navigation CSS code

The CSS is almost the same as in the basic Drop-down navigation with HTML and CSS demo. The only difference is that 2 lines of CSS need the removed:

.nav-item:hover .nav-submenu { display: block; }

…and (for IE6)…

.nav a.nav-item-link-ie6:hover { overflow: visible; }

Drop-down navigation jQuery code

You need to download the hoverIntent jQuery file from the hoverIntent jQuery plugin page. Then, in your webpage:

  • Load the jQuery code library
  • Load the hoverIntent JavaScript file
  • Write some simple jQuery code
  • Optionally, the plugin has excellent configuration options to suit your needs

<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jquery.hoverIntent.minified.js" type="text/javascript"></script>
<script type="text/javascript">
/* For IE6 */
function makeTallIe6() {
  $(this).css("overflow", "visible");
}
function makeShortIe6() {
  $(this).css("overflow", "hidden");
}
$(".nav a.nav-item-link-ie6").hoverIntent( makeTallIe6, makeShortIe6 );

/* For other browsers */
function makeTall() {
  $(this).children(".nav-submenu").show();
}
function makeShort() {
  $(this).children(".nav-submenu").hide();
}
$("li.nav-item").hoverIntent( makeTall, makeShort );
</script>

5 Comments on Website navigation menus and megamenus

  1. I’m amazed, I have to admit. Seldom do I encounter a blog that’s both educative and amusing, and let me
    tell you, you have hit the nail on the head. The problem is something
    which too few men and women are speaking intelligently about.
    I’m very happy I found this in my search for something concerning
    this.

Leave a Reply

Your email address will not be published.


*



*