WordPress Style Admin Bar

This code will create an admin bar just like the one you see at the top of WordPress.com when you're signed in and blogging. In fact, I "borrowed" the code directly from them. I only changed a few things so that it could stand on it's own two feet. First, the html:

The HTML

<div id="user-info">  
  
  <div id="welcome">  
    Howdy, <a href="#" title="Edit your profile">Blogger</a> | <a href="#" title="Log Out">Log Out</a>  
  </div>  
    
  <div id="favorite-actions">  
    <div id="favorite-first"><a href="#">New Post</a></div>  
    <div id="favorite-toggle"><br /></div>  
    <div id="favorite-inside" style="width: 126px;" class="slideUp">  
      <div class="favorite-action"><a href="#">Drafts</a></div>  
      <div class="favorite-action"><a href="#">New Page</a></div>  
      <div class="favorite-action"><a href="#">Upload</a></div>  
      <div class="favorite-action"><a href="#">Comments</a></div>  
    </div>  
  </div>  
  
</div>

Just follow the above format, copy the css below to your stylesheet, and you'll be fine.

The CSS

#user-info {  
        background-color: #1D507D;  
        color: #B6D1E4;  
        height: 46px;  
        position: relative;  
        }  
  
#user-info a { color: #fff; }  
#user-info a:hover { text-decoration: underline; }  
  
#welcome {  
        float: right;  
        margin: 0;  
        padding: 0;  
        line-height: 46px;  
        margin: 0 10px 0 0;  
        white-space: nowrap;  
        text-shadow: #3f3f3f 0 -1px 0;  
        position: relative;  
        }  
  
#favorite-actions {  
        float: right;  
        margin: 11px 12px 0;  
        /* min-width: 130px; */ 
        position: relative;  
        }  
  
#favorite-actions a {  
        color: #ddd;  
        display: block;  
        text-decoration: none;  
        font-size: 11px;  
        padding-right: 20px;  
        }  
  
#favorite-actions a:hover { color: #fff; }  
#favorite-inside a { padding: 3px 5px 3px 10px; }  
#favorite-inside a:hover { text-decoration: underline; }  
  
#favorite-actions .slide-down {  
        background-image: url(/images/fav-top-vs.gif);  
        background-position: 0 0;  
        background-repeat: repeat-x;  
        -moz-border-radius: 12px 12px 0 0;  
        -webkit-border-bottom-right-radius: 0;  
        -webkit-border-bottom-left-radius: 0;  
        -khtml-border-bottom-right-radius: 0;  
        -khtml-border-bottom-left-radius: 0;  
        border-bottom-right-radius: 0;  
        border-bottom-left-radius: 0;  
        border-bottom: none;  
        border-bottom-color: #626262;  
        }  
  
#favorite-first {  
        background: #5580a6 url(/images/fav-vs.png) repeat-x 0 center;  
        border-color: #517ea5 !important;  
        border-bottom-color: #416686 !important;  
        -moz-border-radius: 12px;  
        -khtml-border-radius: 12px;  
        -webkit-border-radius: 12px;  
        border-radius: 12px;  
        line-height: 15px;  
        padding: 3px 30px 4px 12px;  
        border-width: 1px;  
        border-style: solid;  
        white-space: nowrap;  
        }  
  
#favorite-toggle {  
        background: transparent url(/images/fav-arrow-vs.gif) no-repeat 0 -4px;  
        height: 22px;  
        position: absolute;  
        right: 0;  
        top: 1px;  
        width: 28px;  
        }  
  
#favorite-inside {  
        border-color: #5b86ac;  
        background-color: #5580a6;  
        margin:0;padding: 2px 1px;  
        border-width: 1px;  
        border-style: solid;  
        position: absolute;  
        z-index: 11;  
        display: none;  
        -moz-border-radius: 0 0 12px 12px;  
        -webkit-border-bottom-right-radius: 12px;  
        -webkit-border-bottom-left-radius: 12px;  
        -khtml-border-bottom-right-radius: 12px;  
        -khtml-border-bottom-left-radius: 12px;  
        border-bottom-right-radius: 12px;  
        border-bottom-left-radius: 12px;  
        }

The #favorite-actions min-width attribute was screwing up the #welcome div in IE7, so I settled on right padding the #favorite-actions a tags. The download includes the images you'll need.

The jQuery

$("#favorite-inside").width($("#favorite-actions").width()-4);  
$("#favorite-toggle, #favorite-inside").bind("mouseenter",function(){  
  $("#favorite-inside").removeClass("slideUp").addClass("slideDown");  
  setTimeout(function(){  
    if($("#favorite-inside").hasClass("slideDown")){  
      $("#favorite-inside").slideDown(100);  
      $("#favorite-first").addClass("slide-down")  
    }  
  },200)  
}).bind("mouseleave",function(){  
  $("#favorite-inside").removeClass("slideDown").addClass("slideUp");  
  setTimeout(function(){  
    if($("#favorite-inside").hasClass("slideUp")) {  
      $("#favorite-inside").slideUp(100,function(){  
        $("#favorite-first").removeClass("slide-down")  
      })  
    }  
  },300)  
});

The Result

 Subscribe to our feed

<?php 
 
$page = new Page ('WordPress Style Admin Bar'); 
 
$html = '<div id="user-info">   
   
  <div id="welcome">   
    Howdy, <a href="#" title="Edit your profile">Blogger</a> | <a href="#" title="Log Out">Log Out</a>   
  </div>   
     
  <div id="favorite-actions">   
    <div id="favorite-first"><a href="#">New Post</a></div>   
    <div id="favorite-toggle"><br /></div>   
    <div id="favorite-inside" style="width: 126px;" class="slideUp">   
      <div class="favorite-action"><a href="#">Drafts</a></div>   
      <div class="favorite-action"><a href="#">New Page</a></div>   
      <div class="favorite-action"><a href="#">Upload</a></div>   
      <div class="favorite-action"><a href="#">Comments</a></div>   
    </div>   
  </div>   
   
</div>'; 
 
$page->link('<style type="text/css"> 
#user-info {   
        background-color: #1D507D;   
        color: #B6D1E4;   
        height: 46px;   
        position: relative;   
        }   
   
#user-info a { color: #fff; }   
#user-info a:hover { text-decoration: underline; }   
   
#welcome {   
        float: right;   
        margin: 0;   
        padding: 0;   
        line-height: 46px;   
        margin: 0 10px 0 0;   
        white-space: nowrap;   
        text-shadow: #3f3f3f 0 -1px 0;   
        position: relative;   
        }   
   
#favorite-actions {   
        float: right;   
        margin: 11px 12px 0;   
        /* min-width: 130px; */   
        position: relative;   
        }   
   
#favorite-actions a {   
        color: #ddd;   
        display: block;   
        text-decoration: none;   
        font-size: 11px;   
        padding-right: 20px;   
        }   
   
#favorite-actions a:hover { color: #fff; }   
#favorite-inside a { padding: 3px 5px 3px 10px; }   
#favorite-inside a:hover { text-decoration: underline; }   
   
#favorite-actions .slide-down {   
        background-image: url(/images/fav-top-vs.gif);   
        background-position: 0 0;   
        background-repeat: repeat-x;   
        -moz-border-radius: 12px 12px 0 0;   
        -webkit-border-bottom-right-radius: 0;   
        -webkit-border-bottom-left-radius: 0;   
        -khtml-border-bottom-right-radius: 0;   
        -khtml-border-bottom-left-radius: 0;   
        border-bottom-right-radius: 0;   
        border-bottom-left-radius: 0;   
        border-bottom: none;   
        border-bottom-color: #626262;   
        }   
   
#favorite-first {   
        background: #5580a6 url(/images/fav-vs.png) repeat-x 0 center;   
        border-color: #517ea5 !important;   
        border-bottom-color: #416686 !important;   
        -moz-border-radius: 12px;   
        -khtml-border-radius: 12px;   
        -webkit-border-radius: 12px;   
        border-radius: 12px;   
        line-height: 15px;   
        padding: 3px 30px 4px 12px;   
        border-width: 1px;   
        border-style: solid;   
        white-space: nowrap;   
        }   
   
#favorite-toggle {   
        background: transparent url(/images/fav-arrow-vs.gif) no-repeat 0 -4px;   
        height: 22px;   
        position: absolute;   
        right: 0;   
        top: 1px;   
        width: 28px;   
        }   
   
#favorite-inside {   
        border-color: #5b86ac;   
        background-color: #5580a6;   
        margin:0;padding: 2px 1px;   
        border-width: 1px;   
        border-style: solid;   
        position: absolute;   
        z-index: 11;   
        display: none;   
        -moz-border-radius: 0 0 12px 12px;   
        -webkit-border-bottom-right-radius: 12px;   
        -webkit-border-bottom-left-radius: 12px;   
        -khtml-border-bottom-right-radius: 12px;   
        -khtml-border-bottom-left-radius: 12px;   
        border-bottom-right-radius: 12px;   
        border-bottom-left-radius: 12px;   
        } 
</style>'); 
 
$page->jquery(' 
$("#favorite-inside").width($("#favorite-actions").width()-4);   
$("#favorite-toggle, #favorite-inside").bind("mouseenter",function(){   
  $("#favorite-inside").removeClass("slideUp").addClass("slideDown");   
  setTimeout(function(){   
    if($("#favorite-inside").hasClass("slideDown")){   
      $("#favorite-inside").slideDown(100);   
      $("#favorite-first").addClass("slide-down")   
    }   
  },200)   
}).bind("mouseleave",function(){   
  $("#favorite-inside").removeClass("slideDown").addClass("slideUp");   
  setTimeout(function(){   
    if($("#favorite-inside").hasClass("slideUp")) {   
      $("#favorite-inside").slideUp(100,function(){   
        $("#favorite-first").removeClass("slide-down")   
      })   
    }   
  },300)   
});', false); 
 
echo $page->display ($html); 
 
?>