From the lab: CSS Navigation Bar Code Generator

CSS Navigation Bar Code Generator

The generator has been discontinued.

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. You can download the generated code in a zip file.

Hope you find it useful. Enjoy!

Reactions (16)

  1. 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.

  2. Pingback [Web] 連結分享 « 網站製作學習誌

  3. Hey Matt, I used the CSS Navigation Bar Code Generator and it Saved me a ton of time. Nice work! You rock!

  4. 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

  5. My portfolio website 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.

  6. 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?

  7. HI Matt

    This is a great tutorial and I have created my bar.

    I have a problem…I’m no expert with html or css and I have created my website using iWeb and wondered if it was possible to get my menu bar into that. If so my next problem would be how to do it. I have no idea how it needs to be structured to work. Does the css and xhtml code go into the iWeb html snipet or does the XHTML bit only go in there and then the css in your folder? I’m stuck. My bar is exactly how I want it, but don’t know what to do next…

    Can you help me with the structure?


  8. Annie

    My computer won’t let me open the zip drive. why? it says there’s an error:
    I am using a MacBook, new.????
    any suggestions

  9. Alejandro

    Does this work for wordpress also? Im designing a theme from scratch.

  10. This seems like a dead post, over 2 years old. It’s a shame you took the generator off, it seemed like a good tool to have