G+ Notification Bar

I recreated this for some reason. If you have a use for it, feel free :)

by allusis

HTML

<script src="http://dl.dropbox.com/u/1621719/demo/JSFiddle/jquery.easing.1.2.js"></script>
<script src="http://dl.dropbox.com/u/1621719/demo/JSFiddle/prettify.js"></script>
<div id="top">
 <ul id="main">
   <li><a href="http://gplus.to/allusis" target="_blank" class="active">+Ripoff</a></li>
   <li><a href="http://allusis.net" target="_blank">Allusis</a></li>
   <li><a href="http://twitter.com/#!/tonymontemorano" target="_blank">Twitter</a></li>
   <li><a href="http://allusis.tumblr.com/" target="_blank">Tumblr</a></li>
   <li><a href="http://about.me/tonymontemorano" target="_blank">About</a></li>
 </ul>
  <ul id="right">
   <li class="divider"></li>
   <li style="padding:2px 5px 0 5px;"><img src="http://dl.dropbox.com/u/1621719/development/JSFiddle/images/icons/tony01.jpg"></li>
   <li class="divider"></li>
   <li><a href="#">Share</a></li>
   <li class="divider"></li>
 </ul>
<div id="counter">
  <ul id="numbers">
    <li class="number" id="zero">0</li>
    <li class="number" id="1">1</li>
    <li class="number" id="2">2</li>
    <li class="number" id="3">3</li>
    <li class="number" id="4">4</li>
    <li class="number" id="5">5</li>
    <li class="number" id="6">6</li>
    <li class="number" id="7">7</li>
    <li class="number" id="8">8</li>
    <li class="number" id="9">9</li>
    <li class="number" id="10">10</li>
    <li class="number" id="11">11</li>
    <li class="number" id="12">12</li>
    <li class="number" id="13">13</li>
    <li class="number" id="14">14</li>
    <li class="number" id="15">15</li>
    <li class="number" id="16">16</li>
    <li class="number" id="17">W</li>
    <li class="number" id="18">T</li>
    <li class="number" id="19">F</li>
    <li class="number" id="20">20</li>
    
  </ul>
</div>
 <ul id="middle">
     <li class="divider"></li>
   <li><a href="#">[email protected]</a></li>
   
 </ul>
</div>

<div style="margin:50px;font-size:0.8em">I liked the little notification bar that you see when you log in to your Google account so I...

CSS

html,body {margin:0;padding:0;}
body {color:#000;font-family:Arial, Helvetica, sans-serif;font-size:1em;}
h2 {margin-top:50px;font-family: 'Ubuntu', sans-serif;border-bottom:1px solid #ccc;font-weight:normal;}
::-moz-selection {background: #aaa;}
::selection {background: #aaa;}

@media screen {
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: normal;
  src: local('Ubuntu'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v3/_xyN3apAT_yRRDeqB3sPRg.woff') format('woff');
}
}

#top {width:100%;height:30px;background-color:#2D2D2D;border-bottom:1px solid #D2D2D2;}
#top a, #top a:hover {text-decoration:none;color:#ddd;}

ul {list-style: none;margin:0;padding:0;}
ul#main {margin-left:5px;color:#fff;float:left;}
ul#main li {float:left;padding-top:5px;}
ul#main li a{font-size:0.8em;padding:7px 8px;}
ul#main li .active {border-top:2px solid red;padding-top:5px;font-weight:bold;color:#fff;}
ul#main li a:hover {background-color:#4C4C4C;cursor:pointer;}

ul#right, ul#middle {color:#fff;float:right;}
ul#right li, ul#middle li{float:right;padding-top:5px;}
ul#right li a, ul#middle li a{padding:7px 8px;font-size:0.8em;}
ul#right li a:hover, ul#middle li a:hover {background-color:#4C4C4C;cursor:pointer;}

ul li.divider {background:url('http://dl.dropbox.com/u/1621719/development/JSFiddle/images/ui/divider.gif')no-repeat;width:1px;height:29px;}

#numbers {height:22px;position:relative;background-color:red;border-radius:3px;}
ul#numbers {float:right;}
ul#numbers li {border-radius:2px;font-size:11px;}

#counter {
  margin:4px 5px;
  float:right;
  border-radius:5px;
  height:22px;width:23px;
  overflow:hidden;
  background-color:#555;
  color:#fff !important;
  cursor:pointer;
}

#zero {color:#999;background-color:#777 !important;}

.number {
  padding: 5px 1px 5px 0;
  font-weight:bold;
  text-align:center;
  float:left;
  width:22px;
  position:relative;
}

JavaScript

$(function(){
        $("#counter").mouseenter(function(){
              $(".number").animate({"top": "-=22px"}, "fast");
              
        });
    });