From the lab: CSS Navigation Bar Code Generator
— This web tool will help you generate the code you need to build a navigation bar with the technique described in this article: CSS Text based navigation bar with images.
The result is a valid and accessible text based imaged navigation bar with one sprite image, XHTML and CSS. I have included a short video as well to showcase the process.
Please let me know if you have any comment. You can download the generated code in a zip file.
Hope you find it useful. Enjoy!
→ If you find this post useful please consider inviting me a cup of tea :) Thanks!
very useful tool. thanks :)
Thanks for usefull post.
Pretty, pretty cool :-)
Thank you!
Uwe
Excellent tool… I had started writing something similar, but don’t need it now. Brilliant!
One suggestion… The css for the third state goes a little something like this:
ul#navigation li#navigation-1 a.current {
it would be great to add an active state:
ul#navigation li#navigation-1 a:active,
ul#navigation li#navigation-1 a.current {
Just a thought.
Thank you all for the nice comments, glad you found it useful.
Good suggestion Josh, I see no harm in adding that. Will update it as soon as possible.
Cheers!
Hey Matt, I used the CSS Navigation Bar Code Generator and it Saved me a ton of time. Nice work! You rock!
THANKS
hi, i have a little problem with the instalation. Need I put on the navbar in some hosting? why cant I see my nav bar in my blog? :´0
My portfolio website http://www.randompatterned.com is currently under construction. I struggle with coding, I’d rather create stuff. For my first navigation bar I referred to the article but decided I didn’t like how my bar looked so a made a more attractive one and used the generator. Thanks very much for the code and the generator – hooray, it works! And now I have a cool nav bar. I’ll definitely use it again.
Thanks for the awesome nav bar Matt, is there an easy way to make one of the rollover items have a drop down with nested links?