View Full Version : Vista Aero Buttons Menu Variation (Horizontal CSS Menu)

05-15-2009, 01:40 AM
1) CODE TITLE: Vista Aero Buttons Menu Variation

2) AUTHOR NAME/NOTES: Wilfrid AVRILLON / Dynamic Drive

3) DESCRIPTION: A mod of the "Vista Aero Buttons Menu"
Screenshot :


Major features : Hovering effect, simple "current active button" setup, floating effect of the menu over the separation line between the two parts of the webpage.

4) URL TO ORIGINAL CODE: http://www.dynamicdrive.com/style/csslibrary/item/vista_aero_buttons_menu/


@charset "iso-8859-1";
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
/*Modified by Wilfrid AVRILLON in order to meet own personalized chart */
<style type="text/css">

html, body {margin: 0;padding: 0;}
body {background-color: white; font-family: Verdana, sans-serif; font-size: 100%;}
h1 {background-color: black;font-size:5; color: white; text-align: left;margin:0;padding-left:15px}

#headerblock {color: white; background-color: black; padding: 0;}
#headerblock td.logo{padding: 16px; vertical-align: top}
#headerblock td.text {color: white; padding: 16px 16px; text-align: right; vertical-align: text-top}
#blocksep {line-height:40px; padding-left:16px;background: url(imgs/sepline.gif) repeat-x}

.aerobuttonmenu{ /*container that holds a row of aero buttons*/
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: auto;
padding: 4px 0;
border-width: 1px 0;
line-height: 32;
display:block ;

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

.aerobuttonmenu a,.aerobuttonmenu a.current{ /*aero button CSS*/
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*/

.aerobuttonmenu a:link, .aerobuttonmenu a:visited, .aerobuttonmenu a:active{
color: white; /*button text color*/
.aerobuttonmenu a.current:link, .aerobuttonmenu a.current:visited,.aerobuttonmenu a:hover{
color: black; /*button text color*/

.aerobuttonmenu a{ /*aero button CSS*/
background: url('imgs/aeroleftblack.gif') no-repeat top left;

.aerobuttonmenu a span{
background: url('imgs/aerorightblack.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:hover,.aerobuttonmenu a.current{ /* Hover state CSS */
background-image: url('imgs/aeroleftwhite.gif');

.aerobuttonmenu a:hover span,.aerobuttonmenu a.current span{ /* Hover state CSS (for text) */
background-image: url('imgs/aerorightwhite.gif');



<!-- ****************************************************************************** -->
<!-- ** Header block with... ** -->
<div id="headerblock">
<table width="100%">
<!-- ** Your Logo ** -->
<td class="logo"><img src="imgs/logo.gif" border="0" width="267" height="55" alt="" /></td>
<!-- ** Some text ** -->
<td class="text"><span><b>Welcome !</b></span></td>
<!-- * Menu : for the "active" button we add class="current" * -->
<div id="blocksep" class="aerobuttonmenu">
<a href="http://www.dynamicdrive.com" class="current"><span>Home</span></a>
<a href="http://www.dynamicdrive.com/style/"><span>CSS Style</span></a>
<a href="http://www.dynamicdrive.com/forums/"><span>Forums</span></a>
<a href="http://tools.dynamicdrive.com"><span>Tools</span></a>
<a href="http://www.javascriptkit.com"><span>Javascript Kits</span></a>
<a href="http://www.cssdrive.com"><span>CSS Drive</span></a>
<!-- ****************************************************************************** -->
<span><br /><br /></span>
<h1>A Title</h1>
<p>Some Text.</p>


Full demo with graphics attached below.

8) personnalisation suggestions :
The "hover" and "current" effect on buttons share the same bitmaps : aeroleftwhite.gif and aerorightwhite.gif
I created those, inspired by the on you already find in the CSS Library section :
here : http://www.dynamicdrive.com/style/csslibrary/item/vista_aero_buttons_menu/
and here : http://www.dynamicdrive.com/style/csslibrary/item/bold_css_buttons/
From those, It is easy to change the color of the buttons.

You can also change the color of the header section, for this, you have to change 2 things :
the CSS code here :

#headerblock {color: white; background-color: black; padding: 0;}

for instance :

#headerblock {color: white; background-color: red; padding: 0;}

And change the color of the small gif sepline.gif

That's my first css realisation (damned, that was hard !) I hope you will like it ! :)

I learned almost everything I know about css, those last 2 days, on your wonderfull website, thanks you dynamic drive !
I will use this code for my sourceforge website http://nostromon50onvi.sourceforge.net/