Dynamic Drive CSS Library- Vista Aero Buttons Menu

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

PSD to HTML

HTML Editor

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

I just happened to come to this site and I am not that familiar with CSS. Any suggestions. I really do think it would look cool if i knew how to customize it and all that stuff. Any help?

Posted by Mark on 05/02, 05:23 PM

By the way, I am trying to use Freewebs.com (Now known as Webs.com) to make my little own site but i cant seem to figure it out, help is appreciated!

Posted by Mark on 05/02, 05:34 PM

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

<div class="aerobuttonmenu">

<div class="rightsection">
http://i31.tinypic.com/33mpnon.png
</div>

<span>Home</span>
<span>CSS Examples</span>
<span>Forums</span>
<span>Webmaster Tools</span>
<a href="http://www.javascriptkit.com" class="aero"><span>Javascript</span></a>
<span>Gallery</span>
</div>

<div class="aerobuttonmenu black">

<div class="rightsection">
http://i31.tinypic.com/33mpnon.png
</div>

<span>Home</span>
<span>CSS Examples</span>
<span>Forums</span>
<span>Webmaster Tools</span>
<a href="http://www.javascriptkit.com" class="aero"><span>Javascript</span></a>
<span>Gallery</span>
</div>

Posted by chaosroad on 05/03, 12:56 AM

i've got the same problem, and i found the solution here to fix blue screen of death, just for reference.

Posted by Regcure PC Optimizer on 05/05, 08:46 PM

Very cool looking navigation bar which I am trying to implement on my site. I saw this same comment earlier but I haven't been able to find an answer - how do I center the entire nav bar - not just the text inside each button? text-align: center does not seem to have any effect???
Thanks,
David

Posted by David Gadarain on 05/10, 12:12 AM

to center menu remove in ".aerobuttonmenu a.aero" property "float" and set display:inline-block =) good luck

Posted by leoab on 05/15, 05:30 AM

oh, and put links in <center> tag.

Posted by leoab on 05/15, 05:32 AM

Thanks for commenting back! I'm not sure I'm following the fix - I attempted to remove the float property in the ".aerobuttonmenu a.aero" and the nav bar broke down - i also adjusted the display: block; to display: inline-block - I think I'm missing something here???
Thanks again!
David

Posted by David Gadarain on 05/21, 11:17 AM

i've got the same problem, and i found the solution here on repair blue screen, just for reference.

Posted by Regcure Registry Tool on 05/23, 07:03 PM

OK, here is CHANGES to make menu centered.
HTML:



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



<div class="aerobuttonmenu">



<div class="rightsection">

http://i31.tinypic.com/33mpnon.png

</div>

<CENTER>

<span>Home</span> 

<span>CSS Examples</span> 

<span>Forums</span> 

<span>Webmaster Tools</span> 

<a href="http://www.javascriptkit.com" class="aero"><span>Javascript</span></a> 

<span>Gallery</span>

</CENTER>

</div>

CSS:



.aerobuttonmenu a.aero{ /*aero button CSS*/

background: transparent url('media/aeroleft.gif') no-repeat top left;

display: inline-block;

float: none;

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;

}

Posted by leoab on 05/25, 01:04 AM

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

Commenting is not available in this weblog entry.