Advertise About Tech Consultations Write for Us Contact

Free CSS Navigation Menus

By Radwa Samir   |   August 12, 2009   |   Posted in CSS   |   View Comments  
→ Photoshop 3D for Animators: The complete guide to learn 3D and animation in Photoshop CS5. Pre-order this book now and receive a %22 discount here

Free CSS Navigation Menus

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

Free CSS Navigation Menus

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

Free CSS Navigation Menus

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

Author:http://devthought.com

Horizontal unordered lists non-floating

Free CSS Navigation Menus

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

Free CSS Navigation Menus

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

Free CSS Navigation Menus

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

Free CSS Navigation Menus

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

Free CSS Navigation Menus

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

Free CSS Navigation Menus

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

Free CSS Navigation Menus

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

Inline Mini Tabs

Free CSS Navigation Menus

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

Tags: , , ,


About Radwa Samir

My name is Radwa, designer, blogger and co-founder of Graphic Mania. I really love graphics and taking photos.Contact me at radwa (at) graphicmania (dot) net.

Enter your email to receive updates:

View Comments to “Free CSS Navigation Menus”

Post comment

blog comments powered by Disqus

Subscribe without commenting

Follow on Twitter Subscribe: RSS | Email


 


 

 

Enter your email to receive email alerts of new posts and fresh free resources .

Pages

 

 


Resources News

  • Create a Vibrant and Eye-Catching Drink Compositio…August 18, 2010

    In this Photoshop tutorial, you’ll learn how to create a Sobe fruit drink advertisement using some simple water stock images and a lot of easy to use techniques that will yield high quality resul…

  • 25 FREE HIGH QUALITY VECTOR FILESAugust 18, 2010

    We would like to proudly introduce you to Vectorious.net. Vectorious is a great resource for finding royalty free stock vector images. Currently they offer over 12055 vector image files available f…

  • Logo Design: 80+ Beautiful ExamplesAugust 18, 2010

    It has been almost four months since my last post on logo design. Since then I have assembled an amazing collection of fresh new creative logos for you to be inspired by. I am confident that these …

  • Poster Art – Reminiscence Down the History LaneAugust 18, 2010

    Poster art is one of the most well-defined forms of art that has a rich historical background that involves a number of famous artists throughout the world. Ranging from advertising campaigning to …

  • The Complete Beginner’s Guide to User Script…August 18, 2010

    A user script is code written in a programming language that allows you to control a piece of software.

 

Useful Links

 
 


Graphic Mania on Facebook