Results 1 to 2 of 2

Thread: DD top menu

  1. #1
    Join Date
    Jul 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation DD top menu

    Does anyone know the coding to get a menu like the one used on the dynamic drive homepage? The green, that darkens when it's hovered over. Please help, it's been frustrating me for the better part of a few hours now.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    This is a CSS based tabs interface. Unfortunately it's not openly available for download, and the tab images used are copyright Dynamic Drive. However, you can study the CSS file to see how it's done in general:

    Code:
    #ddtoptabs{
    margin-left: 4px; /*Opera 8 fix -1px*/
    padding: 0;
    width: 450px;
    height: 27px;
    background: transparent;
    voice-family: "\"}\"";
    voice-family: inherit;
    padding-left: 5px;
    }
    
    #ddtoptabs ul{
    font: normal 10px verdana, arial, sans-serif;
    margin:0;
    padding:0;
    list-style:none;
    }
    
    #ddtoptabs li{
    display:inline;
    margin:0 2px 0 0;
    padding:0;
    text-transform:uppercase;
    line-height: 1.3em;
    font-size: 120%;
    }
    
    
    #ddtoptabs a, #ddtoptabs strong{
    float:left;
    color:#fff;
    background: transparent url("tabs_left.gif") no-repeat left top;
    margin:0 2px 0 0;
    padding:0 0 0 3px;
    text-decoration:none;
    font-size: 10px;
    letter-spacing: 1px;
    margin-top: 4px;
    font-family:  Arial, Verdana, sans-serif;
    border-bottom: 1px solid #FFF;
    }
    
    #ddtoptabs a span, #ddtoptabs #current span{
    float:left;
    display:block;
    color:#fff;
    background: transparent url("tabs_right.gif") no-repeat right top;
    padding:3px 9px 3px 6px;
    font-weight:bold;
    }
    
    #ddtoptabs a span{
    float:none;
    }
    
    #ddtoptabs #current a, #ddtoptabs strong{
    background-position:0 -300px;
    border-bottom: 1px solid #2B6600;
    }
    
    #ddtoptabs #current a span, #ddtoptabs #current span{
    background-position:100% -300px;
    padding-bottom:3px;	color:#fff;
    }
    
    #ddtoptabs a:hover{
    background-position:0% -150px;
    }
    
    #ddtoptabs a:hover span{
    color: #fff;
    background-position:100% -150px;
    }
    
    #ddtoptabs #current a:hover {	background-position:0% -300px; }
    #ddtoptabs #current a:hover span { color: #fff;	background-position:100% -300px; }
    
    #ddtoptabsline{
    clear: both;
    padding: 0;
    width: 100%;
    height: 8px;
    background: #2B6600;
    border-bottom: 1px solid #fff;
    margin-bottom: 5px;
    }

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
  •