Vista Aero Buttons Menu Variation (Horizontal CSS Menu)

**waskol** · 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/cs..._buttons_menu/

5) CSS CODE :

Code:

@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');
}

</style>

6) HTML CODE :

Code:

<body>		
<!-- ****************************************************************************** -->	   
<!-- ** Header block with... ** -->
<div id="headerblock">
<table width="100%">
  <tr>		  
    <!-- ** 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>
  </tr>    
</table>       
</div>
<!-- * 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>
</div> 
<!-- ****************************************************************************** -->
<div>
  <span><br /><br /></span>     
  <h1>A Title</h1>	
  <p>Some Text.</p> 	
</div>

</body>

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/cs..._buttons_menu/
and here : http://www.dynamicdrive.com/style/cs...d_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 :

Code:

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

for instance :

Code:

#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/

Thread: Vista Aero Buttons Menu Variation (Horizontal CSS Menu)

Thread Tools

Search Thread

Vista Aero Buttons Menu Variation (Horizontal CSS Menu)

Bookmarks

Bookmarks

Posting Permissions