A Different Top Navigation
When designing a new site, web designers usually face the age-old question: vertical or horizontal navigation? There are pros and cons to both solutions. One example being horizontal navigation limits the number of links you can have due to a limited page width. This is usually solved by including a drop down system. However, if you are attempting to make your particular site stand out, you might consider thinking outside the "norm".
In this tutorial, we will be doing precisely that. We will use jQuery to create a different multi-layered horizontal navigation system that is still intuitive enough for anyone to use for the first time.
To Learn:
At the end of this tutorial, we want to learn the following:
- How to create cross-browser rounded pure CSS corners
- Use jQuery to animate a top slider
- Use jQuery to control the appearance of children unordered lists when the parent list item is hovered over.
- Use jQuery to create a dynamic close capability
Objective:
At the end of this tutorial, we want to create a horizontal navigation system that does not use the typical drop down system.
Desired Effect
Normal State – Click to View Full Size
Expanded State – Click to View Full Size
Functionality
Let’s start by mapping out what we need to do in order to fufill out objective:
Expansion
- Wait for the user to hover over one of the main links
- Show the close X
- Make sure no main links have the active class (the class that will make their background match the sub link’s background)
- Add the active class to the main link that is hovered over
- Animate the height of the top bar to 40px
- Make sure no sub links are showing by hiding all sub links
- Show the sub-links of the main link that is being hovered over
Contraction
- Wait for the close X to be clicked
- Hide all sub links
- Remove the active class from all main links
- Animate the height of the sub link bar back to 10px
- Hide the close X
The HTML
There are already many great tutorials on this site for learning the basics of HTML & CSS, so for this tutorial I will assume you already know the basics. I’ll skip going into detail for this part:
For the actual page content, we will just use an image of the content to bypass the loss of quality that goes along with web text. This makes the HTML pretty simple:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A Different Top Nav</title>
</head>
<body>
<div id="sub-link-bar"> </div>
<!-- End sub-link-bar -->
<div id="wrap">
<div id="main-handle">
<div class="roundfg">
<ul id="main-nav">
<li><a class="main-link" href="http://net.tutsplus.com/">Home</a>
<ul class="sub-links">
<li><a class="main-link" href="http://net.tutsplus.com/">Home</a></li>
</ul>
</li>
<li><a class="main-link" href="http://net.tutsplus.com/category/tutorials/">Tutorials</a>
<ul class="sub-links">
<li><a href="http://net.tutsplus.com/category/tutorials/design-tutorials/" title="View all posts filed under Design">Design</a> </li>
<li><a href="http://net.tutsplus.com/category/tutorials/html-css-techniques/" title="View all posts filed under HTML & CSS">HTML & CSS</a> </li>
<li><a href="http://net.tutsplus.com/category/tutorials/other/" title="View all posts filed under Other">Other</a> </li>
<li><a href="http://net.tutsplus.com/category/tutorials/php/" title="View all posts filed under PHP">PHP</a> </li>
<li><a href="http://net.tutsplus.com/category/tutorials/ruby/" title="View all posts filed under Ruby">Ruby</a> </li>
<li><a href="http://net.tutsplus.com/category/tutorials/site-builds/" title="View all posts filed under Site Builds">Site Builds</a> </li>
<li><a href="http://net.tutsplus.com/category/tutorials/tools-and-tips/" title="View all posts filed under Tools & Tips">Tools & Tips</a> </li>
<li class="cat-item cat-item-35"><a href="http://net.tutsplus.com/category/tutorials/wordpress/" title="View all posts filed under WordPress">WordPress</a> </li>
</ul>
</li>
<li><a class="main-link" href="http://net.tutsplus.com/category/articles/">Articles</a>
<ul class="sub-links">
<li ><a href="http://net.tutsplus.com/category/articles/general/" title="View all posts filed under General">General</a> </li>
<li><a href="http://net.tutsplus.com/category/articles/interviews/" title="View all posts filed under Interviews">Interviews</a> </li>
<li><a href="http://net.tutsplus.com/category/articles/news/" title="View all posts filed under News">News</a> </li>
<li><a href="http://net.tutsplus.com/category/articles/web-roundups/" title="View all posts filed under Web Roundups">Web Roundups</a> </li>
</ul>
</li>
<li><a class="main-link" href="http://net.tutsplus.com/category/freebies/">Freebies</a>
<ul class="sub-links">
<li><a href="http://net.tutsplus.com/category/freebies/books/" title="View all posts filed under Books">Books</a> </li>
<li><a href="http://net.tutsplus.com/category/freebies/icons-freebies/" title="View all posts filed under Icons">Icons</a> </li>
<li><a href="http://net.tutsplus.com/category/freebies/lightboxes/" title="View all posts filed under Lightboxes">Lightboxes</a> </li>
<li><a href="http://net.tutsplus.com/category/freebies/others/" title="View all posts filed under Others">Others</a> </li>
<li><a href="http://net.tutsplus.com/category/freebies/plugins/" title="View all posts filed under Plugins">Plugins</a> </li>
<li><a href="http://net.tutsplus.com/category/freebies/themes/" title="View all posts filed under Themes">Themes</a> </li>
<li><a href="http://net.tutsplus.com/category/freebies/tooltips/" title="View all posts filed under Tooltips">Tooltips</a> </li>
</ul>
</li>
<li><a class="main-link" href="http://net.tutsplus.com/category/videos/">Videos</a>
<ul class="sub-links">
<li><a href="http://net.tutsplus.com/category/videos/screencasts/" title="Screencasts">Screencasts</a> </li>
</ul>
</li>
<li><a class="main-link" href="http://net.tutsplus.com/about">About</a>
<ul class="sub-links">
<li><a href="http://net.tutsplus.com/about/" title="About">About</a></li>
<li><a href="http://tutsplus.com/join/" title="Join Plus">Join Plus</a></li>
<li><a href="http://net.tutsplus.com/about/rss-feeds/" title="RSS Feeds">RSS Feeds</a></li>
<li><a href="http://net.tutsplus.com/about/submissions/" title="Submit a Freebie">Submit a Freebie</a></li>
<li><a href="http://net.tutsplus.com/about/terms/" title="Terms">Terms</a></li>
<li><a href="http://net.tutsplus.com/about/write-a-tutorial/" title="Write a Tutorial">Write a Tutorial</a></li>
</ul>
</li>
<li><a class="close" title="Click to Collapse" href="#">X</a></li>
</ul>
</div>
<!-- End roundfg -->
<b class="round"> <b class="round5"></b> <b class="round4"></b> <b class="round3"></b> <b class="round2"><b></b></b> <b class="round1"><b></b></b></b> </div>
<!-- End main-handle-->
</div>
<!-- End wrap -->
</body>
</html>
The CSS
The CSS is pretty simple too. Since this tutorial does not focus on HTML or CSS, if you have a specific question about it, you can drop me a line in the comments below.
html, body {
background: #2d2620;
text-align: center;
margin: 0px;
height: 100%;
width: 100%;
}
#wrap {
margin-left: auto;
margin-right: auto;
width: 900px;
position: relative;
background: url(body.png) center no-repeat;
min-height: 600px;
}
#body-image {
margin-top: 60px;
}
#main-nav {
margin: 0px 0px 0px 2px;
text-align: left;
min-height: 25px;
padding-top: 10px;
padding-left: 0px;
}
#main-handle {
width: 605px;
float: right;
margin-top: -1px;
}
#main-nav li {
display: inline;
list-style: none;
}
#main-nav li a {
margin-right: 5px;
font-size: 15px;
text-decoration: none;
color: #f2f2f2;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-weight: bold;
padding: 10px;
outline: 0;
position: relative;
top: -2px;
}
#main-nav li a:hover, #main-nav li a.active {
background: #514539;
}
#sub-link-bar {
background: #514539;
min-height: 10px;
border-bottom: #645546 1px solid;
}
.sub-links {
display: none;
position: absolute;
width: 100%;
top: -30px;
text-align: left;
left: 0px;
}
#main-nav li .sub-links li a:hover{
background: #2d2620;
}
#main-nav li a.close{
display: none;
position: absolute;
}
#main-nav li a.close:hover{
background: #900;
}
Rounded Corners
For this example, we’d also like to make the bottom corners rounded. There are many different solutions to this dilema, including using images, javascript, CSS or ususally a combination of the aforementioned. For this example, I’d like to achieve the corners using only CSS. Although CSS3 offers us an easy solution, it is still not cross browser compatible. So for this example, we are going to use an online service called Spiffy Corners. Spiffy Corners generates all the code for us. It’s pretty cool. We input the radius of the corners, the desired class name, and the background, and foreground color-it does the rest.
Here’s the code it spitted out for us:
<style type="text/css">
.round{display:block}
.round *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#645546}
.round1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #443a30;
border-right:1px solid #443a30;
background:#56493c}
.round2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #322a23;
border-right:1px solid #322a23;
background:#594c3e}
.round3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #594c3e;
border-right:1px solid #594c3e;}
.round4{
border-left:1px solid #443a30;
border-right:1px solid #443a30}
.round5{
border-left:1px solid #56493c;
border-right:1px solid #56493c}
.roundfg{
background:#645546}
</style>
Get the Code: HTML
<div>
<b class="round">
<b class="round1"><b></b></b>
<b class="round2"><b></b></b>
<b class="round3"></b>
<b class="round4"></b>
<b class="round5"></b></b>
<div class="roundfg">
<!-- content goes here -->
</div>
<b class="round">
<b class="round5"></b>
<b class="round4"></b>
<b class="round3"></b>
<b class="round2"><b></b></b>
<b class="round1"><b></b></b></b>
</div>
Script Time
Let’s Go Over the Functionality Again:
-
Expansion
- Wait for the user to hover over one of the main links
- Show the close X
- Make sure no main links have the active class (the class that will make their background match the sub link’s background)
- Add the active class to the main link that is hovered over
- Animate the height of the top bar to 40px
- Make sure no sub links are showing by hiding all sub links
- Show the sub-links of the main link that is being hovered over
Contraction
- Wait for the close X to be clicked
- Hide all sub links
- Remove the active class from all main links
- Animate the height of the sub link bar back to 10px
- Hide the close X
How We Are Going to Accomplish These Things
Add the Listener:
We put the handle on hover listener inside the on DOM reading function:
$(document).ready(function(){
$("#main-nav li a.main-link").hover(function(){
});
});
Show the Close X
To show the X, we will use the fadeIn() function:
$("#main-nav li a.close").fadeIn();
Make sure no main links have the active class
To do this, we will remove the .active class from all main links
$("#main-nav li a.main-link").removeClass("active");
Add the active class to the element being hovered on
By using the “this” selector we can select the current element we are talking about. Since we are inside a hovering listener, it will add the class to the specific element that is being hovered on.
$(this).addClass("active");
Animate the height of the top bar to 40px
We will use the animate() function for this.
$("#sub-link-bar").animate({
height: "40px"
});
Make sure no sub-links are showing
To do this, we will use the same technique we used to remove the active class from all elements. Only this time, we will hide all sub-link lists.
$(".sub-links").hide();
Show the correct set of sub-links
To do this, we will select the sibling element of the hovered element and show the sibling list.
$(this).siblings(".sub-links").fadeIn();
Contraction
Now let’s add the ability to close the bar again. For this example, I’ve decided to include an X that will collapse the bar. For your example however, you could choose any method you think is the most intuitive and functional.
Wait for the X to be clicked
To do this, we will set an event listener that waits for the X to be clicked and then does something.
$("#main-nav li a.close").click(function(){
});
Remove the active class from all main links
The first thing we want to do after the X is clicked is remove the active class from any main link, because when the menu is collapsing, nothing should be selected.
$("#main-nav li a.main-link").removeClass("active");
Hide all sub-links
Now that the bar is about to collapse, we need to hide all of the sub-links.
$(".sub-links").fadeOut();;
Animate the Top bar back to 10px
Now we need to minimize the bar back to 10px
$("#sub-link-bar").animate({ height: "10px" });
Hide the X again
Now that the panel is collapsed, the user should not see an option to close the bar anymore. So we need to hide it again.
$("#main-nav li a.close").fadeOut();
The Whole Script
Now that we’ve gone over the script in detail, let’s take a look at the whole thing:
$(document).ready(function(){
$("#main-nav li a.main-link").hover(function(){
$("#main-nav li a.close").fadeIn();
$("#main-nav li a.main-link").removeClass("active");
$(this).addClass("active");
$("#sub-link-bar").animate({
height: "40px"
});
$(".sub-links").hide();
$(this).siblings(".sub-links").fadeIn();
});
$("#main-nav li a.close").click(function(){
$("#main-nav li a.main-link").removeClass("active");
$(".sub-links").fadeOut();
$("#sub-link-bar").animate({
height: "10px"
});
$("#main-nav li a.close").fadeOut();
});
});
We’re Done
Congratulations! You have created a horizontal navigation system that will stand out on your site as different! I hope you have enjoyed the tutorial and found it useful in learning more about how to use jQuery for practical applications. If you have any questions or comments be sure to leave them in the comments below! I’d love to hear from you!
- Follow us on Twitter, or subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Connor Zwick
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Eh, Thanks!
Woop first post
Nice…
(2nd lol)
awesome!!!
thanks
Uh, its kind of cool but it goes against a few fundamentals.
That navigation makes you think, and if it makes you think, its not good.
Agreed. I also don’t like how (and this isn’t a problem with only this menu) you can’t always move the mouse from one main link directly to the subnav link you want to click. Forcing a user to maneuver their mouse in any other way than as the crow flies is a definite no no for usability.
Good tut for learning though.
Agreed (again). I found it gimmicky and somewhat annoying. Plus it doesn’t degrade gracefully.
Nice menu.
But I would add a delay, to the submenu. If you hover over Home to select the category Home, it disappears before you can select it.
I really like that effect!
I’m really starting to love this site. :-)
i like the idea and might consider using it in some future projects. My 2 cents would be to adjust the positioning of the sub-links to be as close as possible to the parent links. So if you hovered over “Home” since there is only one slide-down link, why not have that single link as close as possible to the “Home” link? I find it difficult to move the mouse cursor along the x-axis within the limited height sub-menu.
great idea.
why using X to leave the menu and not have a hover out effect on which the menu disappears automatically. would be more userfriendly
Nicely done tutorial, very clear and useful for someone just learning jQuery such as myself. As an aside, I would though, have liked to have seen some mention of how this degrades. As it stands, the secondary navigation is unavailable to those without javascript enabled.
Thanks
It looks cool, a different way to navigate, I will just add an automatic hide feature to the nav bar.
the hide feature is bad
Very Nice Effect!
Hey there Connor – I feel bad making a criticism with what’s a well-written tutorial and all, but…
I feel the initial ‘everything on the page shifts down when you hover over the menu’ effect is rather irritating and needless.
That might just be me though ;)
Nice Effect .. i suggest to add u mouse out event too .. so it disappears when u mouse out.
anyways , good . i will use this effect in my next project.
Thats cool, this navigation is something completely different than what you would expect.
Very nice. Plus I had never heard of spiffycorners.com so thanks for that resource.
all i can say is awesome~~!!!
The movement (slide down, fade in) feels very soothing and natural, even if there are some major usability hurdles. With a little more thought you might be able to fine-tune this to get around even those.
hover to open but click to close goes against what most people expect and could be frustrating if you hover right after a click. Probably a delayed hover/leave effect is all you need.
Freebies and Tutorials felt the most natural as hovering over them when the menu was collapsed moved your mouse over one of the new sub-menu links. Most of the others required the user to move their mouse a fair amount before discovering that the sub-menu was clickable, and in the case of Home there was no indicator that the Home sub-menu wasn’t actually a link.
The fact that the sub-menu appears above while people read top to bottom requires some additional visual strengthening than the shared background color. Not really sure what you could do here as the top-to-bottom hierarchy is pretty embedded in all of us.
Aside from all of those things, you’ve still created a very visually appealing solution and a well-written tutorial. Nice job!
Thanks for the tut and for the spiffycorners resource! I like how you approached the horizontal layout… it’s tough to do at times.
there are easier ways to get cross browser rounded corners.
I like to use css3 for most browsers. a combo of -moz-border-radius and -webkit-border-radius. and then i add in the DD_roundies js to handle ie. http://www.dillerdesign.com/experiment/DD_roundies/ it allows me to keep my markup cleaner.
I agree Furley,
I like clean markup , I also add border-radius as this will be the css3 code
Yep, the Spiffy corners code is ridiculously bloated, and unsemantic, to say the least.
Nice effect…!!
Cool, very unique effect. I might try to integrate it with one of my sites :)
Thanks man!
twitter.com/sonergonul
friendfeed.com/sonergonul
Meh… not very user friendly imo. It’s counter intuitive for child categories to appear above their parent. Also, it’s a paint to have to click a button to make the child categories go away.
I fully agree!
Nice thinking out of the box, and cool effects, but this just isn’t a realistic navigation for a site you want people to frequent.
Agreed!
great tutorial, but i dont know where it would fit in. i really like the effect though.
I like that, it’s a different way to do the same old thing. Seem a little buggy, but I really like the overall concept. Thanks for putting it together
Thank you for sharing this technique. I’m sure that most of us will find this tutorial useful and adapt it to our needs.
Cheers!
Interesting approach to navigation. Might have to consider animate() when you hover on the main links to avoid having the sub-links overlap each other instead of fadeIn/Out(). It happens when you hover 2 main-links back and forth many times without stopping.
Very good tutorial!
Nice concept and I appreciate the “thinking outside of the box” approach, but I don’t think this works.
It’s too clunky and has a weird user experience.
Can someone please do a tutorial on Templating systems, and how tpls work etc. please.
Hmm… I not really sure whether I like the effect or not, but anyway, well-written tutorial!
definitely one to get the brain working. Hopefully it fires some creative nerves for me today. Thanks for the resources from article and through comments you received.
Nice and insightful tutorial!
Good job!
Nice write up and a cool idea.
Just one thing:
It’s impossible to access the content with JavaScript disabled and CSS enabled. The display: none in .sub-links also prevents screenreaders from seeing (uh.. saying?) the sub-links.
Maybe repeat the menus between noscript tags? Move the CSS responsible for hiding the links to the jQuery script?
The demo doesn’t work for me… :( Firefox 3.5.1
I can’t see the sublinks when I hover over a link in the nav.
me too! doesn’t work…
Same here (Firefox 3.5.1)
Hasn’t something like this already been done a million times, just with the sub links at the bottom?
Awesome tutorials….
Thnx dude… for sharing
Suggestion.. Add a tweeetmeme or tweetthis button at the end of post…
really nice training for learn more about css and specially latest top menu techniques. thanks
Hi, very nice but in explorer is bad
Lovely stuff….
Vertical or horizontal navigation is a dilemma I have daily. Web designers have far too many options. But thats a really nice solution, cheers. Rounded corners too? You are spoiling us!
Nice!
I would add an automatic feature for hiding the top navigation with a 5 sec. delay.
Kind regards
Rata
I agree with a few of the comments on here. While its a nice idea, the way it moves everything down the page and the fact that the sub category is above the parent category does not work for me. Users should be able to navigate through the pages with little thought, maybe thats the problem with thinking outside the box..if you want high usability you usually have to stick with the norm because people are used to that.
Just my thoughts!
I agree with Rata: the slider should hide automatically after a predefine time.
Without this the navigation “feels” odd and nearly intrusive.
And while Stephen makes a good point, the nature of the content revealed could address this issue. We could imagine that instead of a set of multiple values, the sub-menu could present some explanatory/descriptive text and 1 or 2 buttons calling for an action (forms, advanced search, login, etc)
Nice, easy to follow tutorial. Gives you a little more jQuery knowledge too :)
Submenu just has to be under, not above. This is fundamental thing.
Using tables was a fundamental thing as was only having manual transmissions. It’s up to webdesigners/coders to push the boundaries. Users will eventually let us know when something is desired even if it initially goes against fundamental principles.
Do you think this menu has usabillity? :)
I quite like it. I think as a sub-navigation this could work well as it’s probably just that little too un-friendly for the not to Internet savy users.
None the less, it’s a well presented tutorial and I think with a bit of work put in from the reader you could gain a lot, besides we shouldn’t be handed things on a plate right?
P.S Your blog Cyberantix is very nice.
I like whats going on here scriptwise, and its a good tutorial.
But I must agree that this breaks UI, and not in the good way like iPhone did. I deal with this issue all the time, everyone wants something new, something different than the normal way of organizing content. Always seem to end up falling back to drop down menus and Tabs though because they make sense to users the most.
Great Tut :) Gonna read it step by step once I’be got my Jquery skills boosted up a bit.
Hi everyone!
I’m glad to see the debate about breaking design standards! I wrote more about the subject at my blog. Be sure to check it out, and let me know what you think!
Thanks,
Connor
I loved it and I love Ajax! But somethings must be changed.
First of all, I’d change the menu order. Submenus must be under the main menu, and not above. Even with the Ajax transition effect showing where it’ll appear, the user can get confused.
Second, I’d take out the close button. Using rollout effect instead of a button to close the submenu gonna be more practical. I have to admit I didn’t read the entire article, but a rollout effect would be better.
I know the title suggests a different top navigation and it’s great, but we have to think about the accessibility.
But it’s a great useful menu. Thanks for share it with us!
I know this is a bit nitpicky but this tutorial does not use any AJAX. There is a huge difference between AJAX and using a javascript framework like jQuery to achieve fading effects. I think it’s important to understand and make this differentiation.