Results 1 to 1 of 1

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

  1. #1
    Join Date
    May 2009
    Posts
    1
    Thanks
    0
    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.

    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/
    Last edited by waskol; 05-15-2009 at 02:58 AM.

Bookmarks

Posting Permissions

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