Icon Supported Navigation
Looking to give your navigation menu a little more impact with some icons/graphics while still retaining accessibility to your users? Then this tutorial is for you!
In every internet application I build – within and out with Zen Elements – I attempt to stay away from creating menus made entirely from images. In my oppinion, text within a menu system should be just that; text. This will result in a more crisp, sharp and legible menu, regardless of the application reading it, the magnification of the page, etc. Maybe it is just me but should we not be able to create good looking AND accessible menus?
Below is the Markup and CSS used to create the following Icon Supported Menu.
Click here for a live example (opens in a new window).
The Basic Markup
- navigation.html
- <ul class="nav">
- <li class="home"><a href="#link">home</a></li>
- <li class="about"><a href="#link">about</a></li>
- <li class="work"><a href="#link">work</a></li>
- </ul>
The CSS
- style.css
- .nav {width:550px; height:50px; padding:0px 25px; margin:0px; background:url(img/bg.gif) repeat-x; border:1px solid #efefef;}
- .nav li {float:left; width:125px; height:50px; display:inline; padding:0px; margin:0px 25px 0px 0px;}
- li.home {background:url(img/nav-home.gif) top left no-repeat;}
- li.home:hover {background:url(img/nav-homeHover.gif) top left no-repeat;}
- li.about {background:url(img/nav-about.gif) top left no-repeat;}
- li.about:hover {background:url(img/nav-aboutHover.gif) top left no-repeat;}
- li.work {background:url(img/nav-work.gif) top left no-repeat;}
- li.work:hover {background:url(img/nav-workHover.gif) top left no-repeat;}
- .nav li a {display:block; padding:15px 0px 0px 50px; color:#000; font-size:18px; font-family:arial; height:35px; text-decoration:none;}
- .nav li a:hover {color:#C00;}
With menus becoming more heavily styled in keeping with more sophisticated website designs, it is fair to say that if you are wanting to use a particular font – and there is NO way a web compliant one will do – then you are going to have to use images, flash or magic of some sort. It is important to at least try to retain some level accessibility though, as much as possible. Pretty will only get you so far ;)
The best way to learn from this tutorial, is to play! Try moving the icons over to the right or creating a vertical icon supported menu system. If you have an example of a particularly pretty icon supported menu on your site, please share a link alongside a comment!
Thank you for reading.
Alex | Zen Elements
�)
why not using id instead of class? it’s not like you’re gonna be using those elements somewhere else on the page….
@Crd | You can – and are as well to – use the ‘id’ attribute in place of ‘class’ for the navigation, as you say, it is unlikely you’ll use the exact same set again.
I have seen a few sites that have done this, mimicing the main navigation down in the footer but it is few.
Quite, as stated
Class = more than one instance
ID = unique
.nav is repeated.
I always find these things of styling individual links to use images quite cumbersome to manage and is often best left in the structural layer rather than presentation layer of the page.
alternatively, class could be used for semantic description, but i’m not fond of it as it comes down to overloading the attribute :-/ other than that, nice tutorial :)
I feel that using the class attribute is much more effective (for the reason that Zen listed). Even if you weren’t planning on using it in multiple instances to start, you might want to add that without having change a bunch of code.
As well, what if you wanted to name the body with an ID of ‘about’?
Regardless, I don’t think this tut was meant to show the specifics of naming methods, but the CSS attached.. Great work!
why naming the body tag? there’s always one on every document.
and as for id and not class, if you’re using javascript and getElementById it’s easier to manipulate the element… with class, not impossible, but requires more work…
still agree that the number of instances is the prime factor for choosing the attribute :)
Please, use a sprite for images, it is not justified to continue using two different images for two different states.
so this is very cool, but, I think it will be more lightweight if it use the Sprite technology …
Yeah, one should definitely use css-sprites in this example, everything else just cause a visible lag which doesn’t at all feel professional. A better way as well would be to assign the CSS-class via javascript + a document ready function (depending on the TEXT inside the A-tag). That way one wouldn’t have to litter down the markup with presentational fluff. A tad more advanced though… ;)
Thank you everyone for your comments, feedback and criticism on this post! It has been interesting hearing the debate going on regarding CLASS vs ID as well as the requesting of the CSS Sprites to be used.
To @caruso_g, @vocal, @Tommie Hansen :-
This tutorial was meant as a first steps guide to aligning icons/graphics in a listed navigation menu but I agree with you wholeheartedly regarding the use of the CSS sprite. It is more efficient in using a Sprite panel (if a controlled one) and the background-position declaration, so I am inspired to write a post toward that very very shortly.
Thanks again everyone, your feedback is fantastic.
Technically rather than using 2 images for the hover, wouldn’t it make more sense to make them one image and on the hover set the positioning differently. i.e. resting state is top left, hover is bottom left. Set the height of the image to half of the actual height and then you have half as many images to load when the site is opened.
Oh, i think you’ve answered my comment already! :D
Chase Swindler | Indeed I have but it is good to see the continued support for that way of doing things =] I’ve a few things on schedule but on my list of posts to complete… it’s in drafts ;]
@Crd – you would always need a body id attribute if you would like to make your life easier and have the page where you are in a website highlighted in the menu for example .. so instead of editing the menu code on every single page to have the menu button highlighed you can get away with using the body id tag matching the id of ur button ( or class ) so you would have the same menu code ( or even have it in a php include if you prefer ) and the only changed bit is the body id ;)
Not really commenting on this article, just to say what a nicely designed website. The aesthetics and overall feel is great!
I also agree that this would have a smoother overall effect had you used sprites. Nice tut! I recently did a tut on sprites and how to use them….http://joshcompston.com/horizontal-navigation-bar-using-css-sprites/