If you like the Ultimate Tabbed Menu, want to use it or just want to mess around, feel free to download the package which contains the HTML, CSS, Javascript and PSD's for all the demos and more! The source and the included imagepacks are free to use but a link back would be appreciated!
If you liked the article, feel free to Digg it so that others can find it too.
A synergistic synthesis of modern web technology to attempt to create the Ultimate Tabbed Menus – for users of all skill levels.
The Ultimate Tabbed Menu aims to create a design and code foundation for those with web experience and is a plug and play resource for the average user. The Ultimate Tabbed Menu goes through the steps of making a tabbed menu, and provides a variety of styles and colors in the included download pack.
UTM has worked in all browsers that we have tested but if you find a glitch, please contact me.
Tabbed menus can be seen all over the internet. They’re great! They’re intuitive, good looking, show what section you’re currently in and are easy to understand.
The Ultimate Tabbed Menu features well styled tabs, with support for shadows, using a three piece assembly method – somewhat similar to the Sliding Doors technique.
Included in the source package are:
Tabs are supposed to be intuitive and good looking. As a simulation of a real-world interface, they should be lifelike. Shadows and textures greatly enhance the feel and quality.
Our goal is for our tabs to have all the visual properties of an image, yet be flexible as text. The tabs should be able to be styled in any way, yet be changed with ease. The tabs should also fit text of different sizes.
We want to have a solid foundation which we can customize in whatever way we want. Something that can be expanded and something that is very flexible. We want to be able to create drop shadows, vertical and horizontal gradients, repeating patterns, and more.
I’ve selected a few hover styles and menu schemes that are fairly popular and good looking. Hover styles are a real great way to make your menus a lot cooler and provide feedback to the user.
Well designed hover styles can really enhance a menu’s appearance and style. For a subtle effect, just change the background or even just the text color of the tab. For a stronger effect, you can change the size of the menu (it’s best vertically since changing the horizontal size will cause the whole menu to move.
We’ll experiment with both background (color and background image) changes and also changes in height that give the tabs an appearance of “popping out”.
We will use a basic unordered list here – with just one special addition. Our anchors will be surrounded by an extra span tag, which we’ll use later on.
<ul> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>The</span></a></li> <li><a href="#"><span>Ultimate</span></a></li> <li><a href="#"><span>Tabbed</span></a></li> <li><a href="#"><span>Menu</span></a></li> </ul>
Some fanatics may complain that this is non-semantic and blasphemous – I say it is better to have a site that looks good than one that looks bad - and unless there is a better way to do it (and there isn’t, with current CSS specifications), this is how it’ll be done.
By their nature, tabs are designed to both provide a menu and show what page is currently active or open – very similar to real tabs. Especially in the case of site navigation menus, you’re going to want to use the same tabbed menu universally and use it to show what page the visitor is currently on.
In the past, people would use a class of “active” or something to that effect, and apply it separately to each page. Some seasoned coders will already know this technique, but this method will allow us to use the same menu on each page, and have the “active” or “current” tab change based on the page.
First we will assign each link in the menu it’s own class. Then we will assign a class to all the body elements of all our pages. For example, we will have a body class of home on the home page, and in all the menus the link to the homepage will have a class of home.
<ul class="two"> <li><a href="#" class="home"><span>Home</span></a></li> <li><a href="#" class="the"><span>The</span></a></li> <li><a href="#" class="ultimate"><span>Ultimate</span></a></li> <li><a href="#" class="tabbed"><span>Tabbed</span></a></li> <li><a href="#" class="menu"><span>Menu</span></a></li> </ul>
Then in CSS, we essentially say that if the classname of body and the link are the same (through listing each instance of the link – ie. .home .home), then to apply the following style. We will do one for each page that we’re going to have, and separate them all with commas.
This way we can create a separate text file, such as menu.inc, and then use a php include to insert that within all our (php) webpages. That way, all our menus are uniform and a change in a link (perhaps we want to change the name of a page) can be done simply once, rather than going into each and every page and manually making changes.
Now we have to construct our tabs. This is pretty straightforward. Personally, I think rounded tabs look a lot more friendly and inviting than sharp corners - even if it just 1 or 3 pixels off the edge.
Use the rounded rectangle tool for rounded tabs or just normal solid edged tags. Feel free to apply drop shadows, gradients, etc. Make sure you construct a tab that is as wide, or wider, than you will need it.
We’re also going to want to have both hover and current states – so we’ll build three instances, one on top of each other. Since cross-browser transparency is tricky, we’re going to want to
Now we run into the tricky part, and also a fork in the path. There are two ways to do this, both have advantages. One is to create a sprite with all the images we will need in one image. Another method is to slice them up. The sliced images work well for tabs with big shadows and similar effects, and also for repeating patterns. Sprites (everything in one image) are great because firstly everything is all in one file and also the hover and other effects will be instant since it just has to move the background position and not load another image. It’s also easier to work with in photoshop and easier to save.
Please excuse the calculus joke... Our first method is the more complex and less elegant of the two - but we will go over it in case anyone does need the functionality.
Basically, we have a few small images - one for the background of the menu, one for the shadow, and one for each of the two ends of the tab. The background will be made separately, and the three other images can be made from a sliced PSD. We will still use a sprite to have the instant loading functionality and less server requests - so both the active, normal and hover states will be contained within each image.
This method is a bit simpler, most of the ‘slicing’ is done via CSS. We simply layout our image like demonstrated and then use the CSS background position properties to move the image throughout our elements. Backgrounds are a powerful thing!
This menu is very easy to edit - just go into the PSD and change the colors and effects and then save the new sprite! You may notice the tab is really long. The length of the tab is the maximum length that the tabs will stretch (horizontally) before they “break”. Since we don’t want to have to worry about that happening, we’ll just leave it at a rather large size.
This is the fun part, and the core of the functionality. First we apply a background to our list itself - it can be in the form of a bar or just a small line at the bottom. Then we will apply the part with the shadow.
ul.two {
background: #e8e8e8 url(images/two/background.png) repeat-x top center;
}
ul.two li {
background: url(images/two/sprite.png) no-repeat right 5px;
display: block;
}
Then we add a little padding one end of our tab to our link. This part can contain the left part of the shadow too.
ul.two li a:link,ul.two li a:visited {
background: url(images/two/sprite.png) no-repeat top left;
}
Then our span within the link will have the third and last image.
ul.two li a:link span,ul.two li a:visited span {
background: url(images/two/sprite.png) no-repeat top right;
display: block;
}
The use of padding is pretty important here. The padding tells us how much of the background should be kept when another elment within it has a new padding. SO basically, the padding on the anchor tells us how much of the left should be the image aligned to the left and then the remaining part is filled by the span with the background aligned to the right. It is just the basic 'sliding doors' type concept.
Of course, we will also be applying other properties such as margins, padding, etc. However, to keep it simple and to the point, we just showed the key parts. The final CSS for a basic menu could be as follows...
ul.seven li {
background: url(images/seven/sprite.png) no-repeat right 5px;
display: block;
float: left;
height: 25px;
padding: 0 2px 0 0;
margin: 0 3px 0 0;
width: auto;
}
ul.seven li a:link,ul.seven li a:visited {
background: url(images/seven/sprite.png) no-repeat top left;
color: #000;
display: block;
font: 12px/26px "Trebuchet MS",verdana,sans-serif;
margin: 5px 0 0 0;
padding: 0 0 0 3px;
text-decoration: none;
height: 25px;
}
ul.seven li a:link span,ul.seven li a:visited span {
background: url(images/seven/sprite.png) no-repeat top right;
padding: 0 28px 0 25px;
display: block;
height: 25px;
}
Notice that we used the line height in the font property (the second number ; after the /) to position the text vertically, instead of using paddings.
For our current pages, we are going to apply a class to both the body and each tab. When the tab class matches the body class, it will apply the style. In other words, the tab for the page you’re currently on will be styled according to this. Customarily, this has no border underneath, so it appears that this tab is part of the current page.
body.home a.home,.the .the,.ultimate .ultimate,.tabbed .tabbed,.menu .menu {
... all your style information here ...
}
The hover state is also self-explanatory. We will have to change two image backgrounds, both the link and the span within it. The background of the li should just be a shadow and isn’t being changed.
ul.seven li a:hover {
background-position: left -50px !important;
}
ul.seven li a:hover span {
background-position: right -50px !important;
}
Well, we’re practically finished! We have our basic tabbed menu implementation, styled and all. Now we will just go over how to make our menu more functional and sleek.
We can change the height of any of the tabs, to make it taller than the others. For example, changing the height of the hover link (and also the corresponding images in the sprite) will yield a tab that pops upwards when hovered upon. Similarly, we can have our active/current tab be taller than the others.
Basically, we just change the height for the specified state, and reposition the background if necessary. Be sure to do so for both the link and the span within it. We specified their background image previously and since we are only changing their background position, there is no need to use full shorthand and be redundant.
ul.two li a:hover {
background-position: left -50px !important;
margin: 0;
height: 30px;
}
ul.two li a:hover span {
background-position: right -50px !important;
height: 30px;
}
For your convenience, I have included a bunch of pre-made tab menus using this technique. Included are the PSD’s, for minor changes, and also all the code and images needed to make them.
Feel free to use these on your site or modify them however you like. A link back would be appreciated.
Though they seem to be somewhat out of date, submenus could still be useful in some situations so I’ve included a submenu script (courtesy of spoono.com). It’s really simple but relies on Javascript, so having Javascript disabled may result in some accessibility issues. The submenu items are stored within the javascript and are inserted dynamically into the div with ID submenu.
I know CSS rollover menus are possible but unfortunately there is no way in CSS to have a submenu become visible upon clicking.
So check out demo 3 to see the submenu in action. As a sidenote, the javascript must be inserted after the menu and not in the header.
Another way to use it is the following method – which is more versatile but for a simple submenu this implementation uses much less code.
Using some javascript libraries, we can have it so that the tabs load content without reloading the page. This may be desirable in some cases though I would advise against using this as the main site navigation (accessibility issues, etc). Also, this isn't really AJAX, but just javascript. However, many people nowadays have no clue what AJAX really is and use it to refer to any dynamic javascript effects, so I use the term colloquially.
I found one simple and functional tab script called Tabtastic - and integrated it into the Ultimate Tabbed Menu – as seen in demo 4. Again, I didn't make the tabtastic script but simply set it up and changed some of the CSS.
It pretty much speaks for itself. There are three included javascript files which give it the functionality. Check out the demo.
The next effect can be done with both CSS or Javascript, and each have their advantage. There are many scripts out there for great remote tooltips and similar effects, but we'll use a simple CSS implementation.
<li><a href="http://dragon-labs.com" class="home"><span>Home <span>Your Description text goes here.</span></span></a></li>
Basically, we have a span within our link, with the description that we want to use. Then, in the CSS we set it to hidden. We can position it as a normal element, or using position: absolute. Just remember that an element is positioned absolutely with respect to its relatively positioned container, or the viewport. So if you specify position: absolute and set it to the top left corner, it will go to the top left corner of the browser. But if you make it's container div position: relative, which doesn't really affect anything, the element will be at the top left of the relatively positioned container div.
To make the spans come up right under the tab, similar to a tooltip...
ul span span {
background: #eee !important;
position: absolute;
top: 65px;
padding: 15px 25px !important;
width: 25em;
height: auto !important;
}
ul a:link span span,ul a:visited span span {
display: none !important;
}
ul a:hover span span {
display: block !important;
}
Or to make them on their own row beneath the tabs...
ul span span {
left: 15px;
width: auto;
}
Centering the tabs is really straightforward. Just specify a width (doesn't work if you don't) and then apply a margin of 0 auto.
#navigation {
margin: 0 auto;
width: 600px;
}
To recap, this is what we've accomplished and what is available to download...
If you liked the article, feel free to digg it.
If you want to leave a comment, head on down to my friend Whalesalad's, where we have a commenting system setup...