Free Css Menus. There are many websites out there that offer free css menus and buttons. We aim to be different. Our Css rollover maps, buttons and menus will show you that with thought and patience, anything is possible with css.

Diagonal Horizontal Green Menu

The working code:

Small Diagonal Horizontal Green Menu

Medium Diagonal Horizontal Green Menu

Large Diagonal Horizontal Green Menu

Author: Free CSS Menus: www.freecssmenus.co.uk

Description: This horizontal menu took quite a few hours to perfect but hopefully, the result is quite effective. The only way to create this effect (and I tried all of them)was to change the width, background-image and z-index apon the hover state. If there are any other ways of acheiving this effect with CSS please let me know.

Category: Menu Horizontal

Tested Browsers: AOL 9, Firefox 3.0.1, Opera 9.10, IE 7

Rate this script:

Rating: 4.8 / 5

5 ratings.

Comments:

Comment from: Zed

This is a seriously tasty css script. Every horizontal menu I have ever seen (built with xhtml and css)has verticle lines dividing each link. Diagonal lines looks far cooler. I like the way you have used the z-index to its full capability here, without it, I dont think this effect would have been possible. Found some more css goodies in the link above.
Many Thanks !!!!!

Date posted: Wednesday 12 Aug, 2009

Read all Comments

Top of Page go back to top of page

More CSS related to this script:

Diagonal Horizontal Green Menu. This horizontal menu took quite a few hours to perfect but hopefully, the result is quite effective. The only way to create this effect (and I tried all of them)was to change the width, background-image and z-index apon the hover state. If there are any other ways of acheiving this effect with CSS please let me know.

Top of Page go back to top of page

CSS by Colour:

Red Pink Purple Blue Cyan Green Yellow Orange Light Dark

Latest CSS:

• Animated navigation menu
Great animated vertical menu. Our first submission by one of our visitors. Top M ...
Added: Monday 15 Feb, 2010

• CSS vertical numeric keypad
Stylish CSS vertical numeric keypad. ...
Added: Sunday 03 Jan, 2010

• Red Green and Blue Menu
These three css menus use subtle shades of red, green and blue, just enough to a ...
Added: Thursday 31 Dec, 2009

• 2010 Dark Gloss Nav
If you have a dark website, this glossy nav menu a perfect compliment for it. ...
Added: Wednesday 30 Dec, 2009

• Dark Flash Metal Menu
You may be mistaken for thinking that this menu was created using flash. CSS, ba ...
Added: Monday 30 Nov, 2009

Top Rated:

CSS World Map Rollover
I made the UK rollover map las ...

4.9 / 5 - 29 Ratings

Curved Horizontal Menu
This horizontal menu shows how ...

4.5 / 5 - 16 Ratings

Diagonal Horizontal Gr ...
This horizontal menu took quit ...

4.8 / 5 - 5 Ratings

Diagonal Horizontal Bl ...
This horizontal menu took quit ...

4.6 / 5 - 5 Ratings

Curved white css borde ...
Creating curved corners for yo ...

4.5 / 5 - 4 Ratings

CSS Tags:

Cascading Hover Chrome 3d Blog Menu Display Website Template Css Solar System Dark Green Cyan Text Orange Rollover Horizontal Transparency Grey Rating Menu Drop Down Rounded Animation Tabbed Vertical Tutorials Yellow Metal Centering Texture Float Css Forms Color Border Block Opacity Photo Gallery Blue Url Watermark Icon Hypertext Button Alignment Style Sheets Red Sliding Doors Image Colour Design Script Width Style Navigation Z-index Positioning Depth Font Background Expandable Purple Gold Flash Text-decoration Png Light Pink