HTML5/CSS3 Gray Navigation Menu

html5-css3-gray-navigation-menu
Date: February 18, 2012 Categories: HTML/CSS Examples Comments: 31 Comments Share:

Today’s freebie is another navigation menu, but, this time, one built using only HTML5 and CSS3.

No images were used, just CSS. It is cross-browser compatible and was optimized for IE7 and above.

Enjoy!

31 Responses to "HTML5/CSS3 Gray Navigation Menu"

Add Comment
  1. Pingback: 35 Excellent jQuery and CSS3 Navigation Menus | Indoor Digital Billboards

  2. Pingback: 35 Excellent jQuery and CSS3 Navigation Menus | MNM Tutorials

  3. Pingback: 35 Excellent jQuery and CSS3 Navigation Menus | Mo Ghaoui, Personal Blog

  4. Pingback: 35 Excellent jQuery and CSS3 Navigation Menus

  5. Pingback: 35个优秀的jQuery和CSS3导航菜单 | 我们爱网页设计

  6. Pingback: Menu di navigazione in HTML5 e CSS3 - sastgroup.com

  7. Pingback: Menu di navigazione in html5 e css3

  8. Katherine

    August 1, 2012 at 7:29 am

    Thanks, love the added IE7+ support though I hate IE in general.

  9. ixtendo

    August 1, 2012 at 10:00 am

    You are welcome. I’m glad you like it. :-)

  10. Pingback: jQuery et CSS3 Excellente Tutorials Menus de navigation | WEB 2 KECH Blog

  11. Xalman

    November 13, 2012 at 2:06 am

    Ixtendo, this is excellent work. I am trying to adopt this for my website. However, the menu does not show the active page. I have tried messing about with it but no luck. What can I do to make it happen?? Help please…

  12. ixtendo

    November 13, 2012 at 4:44 pm

    Add the “current” class to the active list item in your menu, like this:

    <li class="current"><a href="portfolio.html">Portfolio</a></li> (if you are, for example, in the portfolio page)
    
  13. Xalman

    November 14, 2012 at 5:20 am

    Ixtendo, you are a super star. All sorted. Many thanks and keep marching …

  14. jathurchan Selvakumar

    November 21, 2012 at 5:52 pm

    Ixtendo, you are a star man. you saved me. And many thanks.

  15. Pingback: Designing A Winning Navigation Menu: Ideas and Inspirations

  16. Pingback: Designing A Winning Navigation Menu: Ideas and Inspirations | Android News

  17. Pingback: Designing A Winning Navigation Menu: Ideas and Inspirations : Unlimitedtricks Programming Blog, Tutorials, jQuery, Ajax, PHP, MySQL and Demos

  18. Pingback: Designing A Winning Navigation Menu: Ideas and Inspirations | iPixel Creative | Singapore Web Design & CMS Development Company Blog

  19. Pingback: Designing A Winning Navigation Menu: Ideas and Inspirations | DigitalMofo

  20. Antonio

    December 21, 2012 at 1:43 pm

    Muchas gracias por compartir con todos, lo pondré en práctica en mi próximo trabajo.

    Felices fiestas

  21. Pingback: Designing A Winning Navigation Menu: Ideas and Inspirations - 360tech.in

  22. Sam

    January 14, 2013 at 9:08 am

    Hi Ixtendo, great work! I have implemented this feature and would like to further enhance it with “dropdown” function. Is that possible?

  23. Pingback: Designing A Winning Navigation Menu: Ideas and Inspirations | news 4niger

  24. Pingback: DesignBloq | Design Magazine

  25. Pingback: w3talks.org 40 бесплатных выпадающих меню на HTML5 и CSS3 » w3talks.org

  26. dsf

    January 29, 2013 at 10:33 am

    sdfsd

  27. Pingback: 20 قائمة JQuery جميلة جدا

  28. zahid

    February 3, 2013 at 8:55 pm

    perfect menu i love that

  29. Black27

    March 21, 2013 at 1:58 pm

    I just have a question: on Internet Explorer, background overflows on border-radius…It looks like color is squared and borders are rounded.
    How can I fix it?

  30. Pingback: 30 Free Dropdown Menus in HTML5 and CSS3

  31. Pingback: 40 Free Hot and Excellent Dropdown menus Created With HTML5 and CSS3 | Creative Verse

Submit a comment

Your email address will not be published. Required fields are marked with *.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>