jDiv: A jQuery navigation menu alternative

February 1, 2010 jQuery Tutorials

Late last year, I was working on the UI for a potential project and I needed a drop-down menu that displayed any content I needed, specifically a combination of images and lists. I didn't feel that only using a UL style was semantic enough or gave me the flexibility I needed. So, jDiv was born.

What's the point?

I needed a specific way to use a drop-down effect for a menu without being limited to only an unordered list and this seemed to fit the bill. I don't necessarily consider this the definitive method for achieving this effect but it got the job done.

The advantages

The challenges

Another example of jDiv in use

Peter Hinton has utilized this script with his own modifications which I recommend you check out!

jDiv - view the demo

The XHTML markup:

// Place in your HEAD tag:

<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" charset="utf-8" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="js/jdiv.js"></script>


// Place in your BODY tag:

<!-- BEGIN MAIN NAV MENU-->
<div id="menu">
<ul>
<li><a href="#" id="menu1">Rollover me!</a></li>
<li><a href="#">Link # 2</a><</li>
<li><a href="#">Link # 3</a></li>
</ul>
</div>
<!-- END MAIN NAV MENU-->

<!-- BEGIN HIDDEN DIV CONTENT -->
<!-- NOTE THAT YOU MAY WANT TO PLACE IT INSIDE THE UL ABOVE. I KEEP IT HERE FOR THE PURPOSES OF THIS DEMO. -->
<div id="hidden-div">

<div id="hidden-div-left">
<!-- NOTE THAT YOU WILL WANT TO USE A MORE SEMANTIC NAME FOR THESE DIVS. THIS IS FOR THE PURPOSE OF THE DEMO. -->
<h4>This is the hidden panel that can display any content you wish.<br/><br/>Perhaps you would like a description here and your section's links to the right.</h4>
</div>

<div id="hidden-div-right">
<!-- DITTO -->
<ul class="submenu">
<li><a href="#">» List item #1</a></li>
<li><a href="#">» List item #2</a></li>
<li><a href="#">» List item #3</a></li>
<li><a href="#">» List item #4</a></li>
<li><a href="#">» List item #5</a></li>
</ul>
</div>

</div>
<!-- END HIDDEN DIV CONTENT -->

The jQuery:

// DISPLAYS HIDDEN DIV ON HOVER

$(document).ready(function() {
        var hide = false;
        // Shows the DIV on hover with a fade in
		$("#menu1").hover(function(){          
		   if (hide) clearTimeout(hide);
            $("#hidden-div").fadeIn();   
            // The main nav menu item is assigned the 'active' CSS class
			$(this).addClass("active");
        }, function() {
            // Fades out the DIV and removes the 'active' class from the main nav menu item
			hide = setTimeout(function() {$("#hidden-div").fadeOut("fast");});
			$("#menu1").removeClass("active");
        });
		// Ensures the DIV displays when your mouse moves away from the main nav menu item
        $("#hidden-div").hover(function(){
            if (hide) clearTimeout(hide);
            $("#menu1").addClass("active");			
        }, function() {
            // If your mouse moves out of the displayed hidden DIV, the DIv fades out and removes the 'active' class
			hide = setTimeout(function() {$("#hidden-div").fadeOut("fast");});
			$("#hidden-div").stop().fadeIn();
			$("#menu1").removeClass("active");
        });
	});

Pretty it up with some CSS:

/* DIV MENU DEMO LIST STYLE */

#menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#menu ul li {
  display: inline;
}

#menu ul li a {
  float: left;
  display: block;
  font: bold 1.1em arial,verdana,tahoma,sans-serif;
  line-height: 50px;
  color: #888;
  text-decoration: none;
  margin: 0;
  padding: 0 30px;
}

#menu ul li a:hover, #menu ul li a.active  {
  color: #aaa;
  text-decoration: none;
  background: #333;
}

/* HIDDEN DIV PANEL STYLE */

#hidden-div {
  position: absolute;
  width: 900px;
  height: 240px;
  margin: -1px 0 0 0;
  padding: 30px;
  background: #333;
  display: none;
  z-index: 100;
}

/* HIDDEN DIV PANEL - CONTENT INSIDE */

#hidden-div-left {
  float: left;
  width: 450px;
  height: 300px;
}

#hidden-div-right {
  float: right;
  width: 450px;
  height: 300px;
}

#hidden-div-right ul {
  margin: 10px 0 0 0;
  padding: 20px;
  list-style: none;
  background: #191919;
  overflow: hidden;
}

#hidden-div-right ul li a {
  display: block;
  font-size: 1.0em;
  line-height: 1.0em;
  color: #fff;
  text-decoration: none;
  margin: 0;
  padding: 11px 0;
}

#hidden-div-right ul li a:hover {
  color: #aaa;
  text-decoration: none;
}

I haven't tried adding rich media to the DIV container and while I wouldn't necessarily do that, it should work fine. The real purpose for this was to render basic XHTML and images but if you come up with something cool or use it on your own site, let me know and I'll be glad to showcase it on my site.

Stay well.

You might also like:

Please complete all fields to submit your comment.
Thanks. Your comment will be posted shortly.




This is your Captain speaking

Hi, my name's Fred and I'm a web designer & developer from Ottawa, Ontario. I specialize in front-end development and the user experience but also enjoy server-side development, SEO, social media and supporting my peers in the community.

Follow me on Twitter
Call me on Skype

Recent additions to the Community