Results 1 to 1 of 1

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

  1. #1
    Join Date
    May 2009
    Thanked 0 Times in 0 Posts

    Default Vista Aero Buttons Menu Variation (Horizontal CSS Menu)

    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.


    5) CSS CODE :
    @charset "iso-8859-1";
    <style type="text/css">
    /*Credits: Dynamic Drive CSS Library */
    /*URL: */
    /*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: */
    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');
    6) HTML CODE :
    <!-- ****************************************************************************** -->	   
    <!-- ** 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="" class="current"><span>Home</span></a> 
      <a href=""><span>CSS Style</span></a> 
      <a href=""><span>Forums</span></a> 
      <a href=""><span>Tools</span></a> 
      <a href=""><span>Javascript Kits</span></a> 
      <a href=""><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 :
    and here :
    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
    Last edited by waskol; 05-15-2009 at 01:58 AM.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts