Dynamic Drive CSS Library- Vista Aero Buttons Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

Vista Aero Buttons Menu

Author: Dynamic Drive

This menu consists of a row of independent, Vista aero looking CSS buttons, and departs from the typical list based menu structure. Each button appears initially faded out slightly via CSS opacity, then brought back to full opacity during the "hover" state. The caveat for this menu is the fixed height of each button based on the graphic interface, hence isn't ideal if the buttons' font size is changed from the default.

Demo:

Home CSS Examples Forums JavaScript Gallery

The two images used:

(black theme)

The CSS:

<style type="text/css">

.aerobuttonmenu{ /*container that holds a row of aero buttons*/
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: auto;
background: #F7F7F7; /*menu strip background*/
border: 1px solid gray;
padding: 4px 0;
border-width: 1px 0;
}

* html .aerobuttonmenu{ /*IE6 and below hack. Set explicit strip width*/
width: 100%;
}

.aerobuttonmenu a.aero{ /*aero button CSS*/
background: transparent url('media/aeroleft.gif') no-repeat top left;
display: block;
float: left;
font: bold 13px Verdana, Trebuchet MS; /* Change 13px as desired */
line-height: 23px; /* This value + 8px should equal height of button background (default is 31px) */
height: 31px; /* Height of button background height */
padding-left: 10px; /* Width of left menu image */
text-decoration: none;
margin-right: 5px; /*spacing between buttons*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); /*this and next two rules control opacity of buttons before hover*/
opacity: 0.9;
-moz-opacity: 0.9;
}

.aerobuttonmenu a.aero:link, .aerobuttonmenu a.aero:visited, .aerobuttonmenu a:active{
color: white; /*button text color*/
}

.aerobuttonmenu a.aero span{
background: transparent url('media/aeroright.gif') no-repeat top right;
display: block;
padding: 4px 10px 6px 0; /*Set 10px here to match value of 'padding-left' value above*/
}

.aerobuttonmenu a.aero:hover{ /* Hover state CSS */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /*this and next two rules control opacity of buttons during hover*/
opacity: 1;
-moz-opacity: 0.99;
}

.aerobuttonmenu a.aero:hover span{ /* Hover state CSS (for text) */
color: yellow;
}

.black a.aero{
background-image: url('media/aeroleftblack.gif');
}

.black a.aero span{
background-image: url('media/aerorightblack.gif');
}

.aerobuttonmenu .rightsection{
float: right;
width: 100px;
position: relative;
top: 3px;
padding-right: 5px;
text-align: right;
}

.aerobuttonmenu .rightsection a{
color: navy;
}

</style>

The HTML:

<h4>Aero Blue and Black Button Menus:</h4>

<div class="aerobuttonmenu">

<div class="rightsection">
<a href="#"><img src="http://i31.tinypic.com/33mpnon.png" border="0" alt="search" /></a>
</div>

<a href="http://www.dynamicdrive.com" class="aero"><span>Home</span></a> 
<a href="http://www.dynamicdrive.com/style/" class="aero"><span>CSS Examples</span></a> 
<a href="http://www.dynamicdrive.com/forums/" class="aero"><span>Forums</span></a> 
<a href="http://tools.dynamicdrive.com" class="aero"><span>Webmaster Tools</span></a> 
<a href="http://www.javascriptkit.com" class="aero"><span>JavaScript</span></a> 
<a href="http://www.cssdrive.com" class="aero"><span>Gallery</span></a>
</div>

<br />

<div class="aerobuttonmenu black">

<div class="rightsection">
<a href="#"><img src="http://i31.tinypic.com/33mpnon.png" border="0" alt="search" /></a>
</div>

<a href="http://www.dynamicdrive.com" class="aero"><span>Home</span></a> 
<a href="http://www.dynamicdrive.com/style/" class="aero"><span>CSS Examples</span></a> 
<a href="http://www.dynamicdrive.com/forums/" class="aero"><span>Forums</span></a> 
<a href="http://tools.dynamicdrive.com" class="aero"><span>Webmaster Tools</span></a> 
<a href="http://www.javascriptkit.com" class="aero"><span>JavaScript</span></a> 
<a href="http://www.cssdrive.com" class="aero"><span>Gallery</span></a>
</div>

Code Info

Rate this code:

Date Posted: 06/16/2008

Revision History: None

Usage Terms: Click here

Your Comments (66)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 3 of 7 pages < 1 2 3 4 5 > Last »

Does anyone know how to use this script for my joomla Menu.
This very nice effect..

Posted by Joomla panel on 11/07, 02:30 PM

Hello,Please,How to change the cell dynamic which table width is 100%.

Posted by shawn on 11/07, 09:37 PM

Sorry this might sound stupid but i don't know where to place the CSS code and the HTML im new to this and can't find any help to it. Thanks Calvin :)

Posted by Calvin on 11/09, 07:08 PM

Yea this is a great CSS formated menu my Fav so far if any one wants help in putting it together they can contact me.

Posted by Nigel Alexander on 11/16, 12:30 PM

They are fantastic buttons easy too use and setup....thank you

Posted by Jayne on 11/27, 07:14 AM

filter & opasity is not known to css property name

Posted by anuj on 12/18, 11:00 AM

I ran this code through the W3C CSS validater and it came up with these line number errors:
86 .aerobuttonmenu a.aero Parse Error style=filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
87 opacity Parse Error opacity: 0.9;
88 -moz-opacity Parse Error -moz-opacity: 0.9;
89 -moz-opacity Parse error - Unrecognized }
102 .aerobuttonmenu a.aero:hover attempt to find a semi-colon before the property name. add it
102 .aerobuttonmenu a.aero:hover Property progid doesn't exist : DXImageTransform
102 .aerobuttonmenu a.aero:hover Parse Error DXImageTransform.Microsoft.Alpha(opacity=100);
103 opacity Parse Error opacity: 1;
104 -moz-opacity Parse Error -moz-opacity: 0.99;
105 -moz-opacity Parse error - Unrecognized }
Any suggestions as to fixing will be appreciated.
I do not suggest using this code until it is fixed.

Posted by Timothy Brockett on 12/24, 12:00 PM

Can these buttons be used with a multi-level menu ?

I wish to replace the top-level menu (at www.bst.asn.au) with these buttons.

Posted by Stephen on 01/03, 09:44 PM

jernas

Posted by jernas on 01/08, 02:31 PM

web mu akeh mbantu aku....
Matur nuwun yaaaaa....

Posted by anthoni on 01/10, 09:00 AM

Comment Pages 3 of 7 pages < 1 2 3 4 5 > Last »

Commenting is not available in this weblog entry.