Graphic Mania

  • Home
  • Articles
  • Vector Packs
  • Freebies
    • Free Fonts
    • Free Icons
    • Photoshop Brushes
    • Photoshop Patterns
    • Photoshop PSDs
    • Textures
  • Photography ideas
  • Advertising Ideas
  • Image Cropper
  • Inspiration
    • Illustration
    • Showcases
  • Resources
    • News
    • Reviews
    • Contests
    • Adobe exams
    • Logo design
    • Wallpapers
    • 3D
  • Web
    • WordPress
  • Tutorials
    • Flash tutorials
    • HTML5
    • Illustrator tutorials
    • Photoshop tutorials

Free CSS Navigation Menus

12
  • by Graphic Mania Editorial
  • in Resources
  • — 12 Aug, 2009

As I continue to share CSS resources and in addition to the CSS buttons collection, I would like to share with you number of most used amazing CSS menus templates.

The below CSS menus templates can be downloaded for free from its sources files.

Free Dark Red Nav Menu

This red navigation menu is a horizontal menu.
Tested Browsers: AOL 9, Firefox 3.0.1, Opera 9.10, IE 7
Author: Free CSS Menus: www.freecssmenus.co.uk

CSS+Javascript power. Fancy menu

navigation bar with some cute Javascript effects that will certainly impress you.

Author:http://devthought.com

Horizontal unordered lists non-floating

Using display:table; which is understood by all the modern browsers, we can center a horizontal menu of unknown width by using margin values.
For IE6 and IE7 we can use display:inline-block; and display:inline; which gives the menu a width value and then position this using text-align.
When using display:table; in Firefox, you must also use display:table-row; in the following element to fix an intermittent bug in which the containing elements wrap around on to two lines.

This now works in IE6, IE7, IE8, Firefox, Opera, Safari(PC) and Chrome.

Author:  www.cssplay.co.uk

Red Horizontal Tabbed Menu

This Horizontal tabbed menu shows the user three different states: Normal, Hover and Active/Selected. This menu is still only using one image and the sliding doors technique.
Tested Browsers: AOL 9, Firefox 3.0.1, Opera 9.10, IE 7
Author: Free CSS Menus: www.freecssmenus.co.uk

CSS Menu with slider

CSS Menu with slider using Prototype.js
This little example shows how to make really simple and yet very nice CSS Menu with slider.
Author:  http://dragan.yourtree.org

visited Menu

Click any of the links to take you to one of the listed menu demonstrations. Then click your browser’s back button to return to this page. You should then see the word ‘visited’ alongside the menu you selected.
Author:www.cssplay.co.uk

Mini-Tab Shapes

The nice thing about the original mini-tabs is that the border will always be the exact width of the text above it — but you are stuck with a square tab.
Tested in Mac: Safari, Camino, IE5; PC: IE5.0, IE5.5, IE6, Opera7
Author: www.simplebits.com

Free CSS Navigation Menu Designs

These eleven CSS navigation menus are created using the Sliding Doors technique, and will even work in everyone’s favorite browser Internet Explorer. You may download the entire set and use any way you see fit. You may want to clean up the stylesheet, or alter the menu graphics to suit your needs. All the menus can be used for commercial or private use.
Author: www.exploding-boy.com

Example Menu one

Just a simple change of border style on hover.
Author:www.cssplay.co.uk

Inline Mini Tabs

That’s it. You can view again the live example. Compatibility of the technique should be extended to all modern browsers. On IE5 no bottom border is displayed, while I’ve tested it with success in IE 5.5, IE6, Firefox and Opera 7.6. Enjoy!
Author: http://web-graphics.com

Share

Tags: CSSCSS menusCSS Navigationsfree CSS templates

— Graphic Mania Editorial

Graphic Mania editorial team likes to share with you useful resources, tutorials and articles related to the graphic design and technology.

  • Previous story AuroraFlash – Revolutionary Flash Site Builder
  • Next story Most Amazing Photo Manipulation Inspiration Collection

You may also like...

  • Free Exclusive Saturday Brushes 23 May, 2009
  • 20 of The Most Stunning 3D Renders 23 Mar, 2009
  • Most Wanted Photohop Effects Tutorials 13 May, 2009
  • Amazing Free Floral Brushes for Photoshop 19 Apr, 2009

12 Comments

  1. John Barrett says:
    August 12, 2009 at 1:25 pm

    nice collections-

  2. Free CSS Navigation Menus | xkid.ro says:
    August 12, 2009 at 3:30 pm

    […] Free CSS Menus: CSS+Javascript power. Fancy menu navigation bar with Read full article VN:F [1.6.0_870]please wait…Rating: 0.0/10 (0 votes cast)VN:F [1.6.0_870]Rating: 0 (from 0 votes) […]

  3. Dzinepress says:
    August 12, 2009 at 4:15 pm

    outstanding menus with latest css tips.

  4. Dzinepress says:
    August 13, 2009 at 2:47 am

    outstanding menus with latest css tips.
    P.S.: Forgot to add great post!

  5. Free CSS Navigation Menus | Flash, Design, Vector, Photoshop, Adobe Tutorials | GraphicMania.net says:
    August 13, 2009 at 6:53 am

    […] Read the original post: Free CSS Navigation Menus | Flash, Design, Vector, Photoshop, Adobe Tutorials | GraphicMania.net […]

  6. Ücretsiz Css Navigasyon Menüleri « Webdergim.Com says:
    August 13, 2009 at 10:43 pm

    […] dosyalar? ile indirilebilir css navigasyon menülerine buradan […]

  7. Creando un menú CSS en minutos | says:
    August 17, 2009 at 2:02 pm

    […] un menú adecuado para nuestro sitio. Si en esa oportunidad ninguno nos gustó, ahora desde GraphicMania nos ofrecen […]

  8. Windows Vista , Instalacion , Formatear , Programas , Problemas, » Blog Archive » Creando un menú CSS en minutos says:
    August 17, 2009 at 3:01 pm

    […] un menú adecuado para nuestro sitio. Si en esa oportunidad ninguno nos gustó, ahora desde GraphicMania nos ofrecen […]

  9. 150 Free PSD Buttons For Every Day Use | Flash, Design, Vector, Photoshop, Adobe Tutorials | GraphicMania.net says:
    September 11, 2009 at 8:01 pm

    […] Free CSS Navigation Menus […]

  10. nitish says:
    September 16, 2009 at 1:37 pm

    very best ….

  11. Free CSS Navigation Menus | Adobe Tutorials says:
    September 30, 2009 at 2:50 pm

    […] As I continue to share CSS resources and in addition to the CSS buttons collection , I would like to share with you number of most used amazing CSS menus templates. Go here to see the original: Free CSS Navigation Menus […]

  12. Guest says:
    October 2, 2010 at 1:48 pm

    This is a really excellent read for me.

Leave a Reply Cancel reply

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

  • Promo Codes Available

    A2 Hosting Coupon
    NordVPN Coupon
    Unbounce Coupon
        • Home
        • Privacy Policy
        • About the Author
        • GRAPHIC MANIA – Guest Post Guidelines
        • Contact

        Copyright © 2008-2024 GraphicMania.net. All Rights Reserved.