Dynamic Drive CSS Library- Vista Aero Buttons Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

Page Flip Creator- aXmag

Website Usability Testing

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 5 of 7 pages « First < 3 4 5 6 7 >

m new in thz ..... tel me how to apply it....Wait 4 ur rply ...
Regurad

Posted by Adeel on 02/06, 10:40 PM

How did you make it horizontal? I am trying to learn CSS as I work and am trying to make a horizontal navbar for a site using CSS. I can do everything but make it horizontal.

Posted by Zan2434 on 03/03, 04:06 PM

First off, beautiful job...classy looking buttons.
Secondly, anyone know how to get a text entry field for the search ? That would be like icing on the cake.
And Al, where ever you are it looks like the
"magnifying glass" search icon is being pulled from a a foreign site. Personally I like my site to be self contained... who knows what
"http://i31.tinypic.com/33mpnon.png" is or how they'rs tracking hits coming from your site... not to mention if the icon goes missing from that site it breakes (to some extent) you site search.
long live java !

Posted by Bitrunner on 03/21, 06:48 PM

is anybody have idea how to put this on blogger templates???

Posted by desionlinemovies on 03/25, 10:17 PM

Hi,

I am new to Web Site writing, and I am having trouble trying to put Vist Aero Button Menu on a Web Page, I am using Front page, can anybody advise me where I am going wrong, when I paste to my page, the menu is vertical with a bullet before each word.

Thanks

Vincent

Posted by Vincent on 03/27, 02:18 PM

I am really Glad to view DynamicDrive website. it includes really good material.

Posted by faisal on 03/28, 03:03 AM

thanks for you help

Posted by Thabo on 04/03, 01:39 AM

These are great - thx! My Q: has anyone used jQuery + these buttons to create a dropdown menu? I need menu actions below these top level menus... Thanks for any help.

Posted by Mark on 04/03, 07:59 AM

Thank God I've got this site and it is very useful.I nid only one help of aligning these on the top left of my page.Anyone with help will be appriciated.

Posted by Thabo on 04/06, 12:26 AM

非常感谢！I mean thank you very much~

Posted by cambrian12345 on 04/26, 03:22 AM

Comment Pages 5 of 7 pages « First < 3 4 5 6 7 >

Commenting is not available in this weblog entry.