A Pen by Anonasaurus Rex.

An-Anonymous-Pen.markdown

An Anonymous Pen

A Pen by A Non Ymous on CodePen.

License.

index.html

<div id="GNav">
   <div id="GNwrapper">
     <a class="abMe" title="About Me" href="#username_label"></a>
     <a class="wish" title="My Wishlist" href="http://www.amazon.com/"></a>
     <a class="store" title="Buy my goodies" href="#store"></a>
     <a class="vids" title="Buy Recorded Videos" href="#videos"></a>
     <a class="club" title="Join My Club" href="#club"></a>
     <a class="offtips" title="Tip Me Offline" href="#Wall"></a>
     <a class="topTips" title="Top Tippers" href="#club"></a>
     <a class="joinRoom" title="Join My Room" href="#roomrules"></a>
     <a class="twitts" title="Follow Me on Twitter" href="https://www.twitter.com/"></a>
   </div>
</div>

style.css

#GNav {
  display:inline-block;
  width:75%;
  height:45px;
  position:fixed;
  top:0;
  left:0;
  background:rgba(0,0,0,0.3);
  padding:5px;
  -moz-box-shadow:inset 0 0 7px 4px rgba(0,0,0,.3);
  -webkit-box-shadow:inset 0 0 7px 4px rgba(0,0,0,.3);
  box-shadow:inset 0 0 7px 4px rgba(0,0,0,.3);
  overflow:hidden;
  z-index:99999;
}

#GNwrapper {
  display:inline-block;
  position:relative;
  width:950px;
  margin-left:20px;
  background:url(http://2.bp.blogspot.com/-Qz5I8DWATbw/Ut-vbG1Y8UI/AAAAAAAADo0/yKlvSQ0Edko/s1600/nav_main.jpg) repeat-x;
  border:1px solid rgba(0,0,0,.6);
  height:40px;
  padding:1px;
}

.abMe {
  display:inline-block;
  position:relative;
  width:100px;
  height:45px;
  background:url(http://4.bp.blogspot.com/-G4YDKNY0A7c/Uphp0lPClOI/AAAAAAAACwc/zQTy9A39nSI/s1600/about0.png);
  background-repeat:no-repeat;
  margin-right:1px;
  cursor:pointer;
  -webkit-transition:all .6s;
  -moz-transition:all .6s;
  transition:all .6s;
}

.abMe:hover {
  display:inline-block;
  position:relative;
  width:100px;
  height:45px;
  background:url(http://4.bp.blogspot.com/-1UTw70cPbTA/Uphp0izKZ0I/AAAAAAAACwg/RDB66EVHqho/s1600/about1-100x42.gif);
  background-repeat:no-repeat;
}

.wish {
  display:inline-block;
  position:relative;
  width:100px;
  height:45px;
  background:url(http://4.bp.blogspot.com/-nIO6pje78B4/Uphp4dhnEkI/AAAAAAAACyQ/EIWoTydbVws/s1600/wish0.png);
  background-repeat:no-repeat;
  margin-right:1px;
  cursor:pointer;
  -webkit-transition:all .6s;
  -moz-transition:all .6s;
  transition:all .6s;
}

.wish:hover {
  display:inline-block;
  position:relative;
  width:100px;
  height:45px;
  background:url(http://1.bp.blogspot.com/-zeI3zbB0Vuc/Uphp4n5567I/AAAAAAAACyM/d-XeFs1dI84/s1600/wish1-100x42.gif);
  background-repeat:no-repeat;
}

.store {
  display:inline-block;
  position:relative;
  width:100px;
  height:45px;
  background:url(http://4.bp.blogspot.com/-ePM-EkEiThQ/Uphp1c1oKnI/AAAAAAAACw0/r4lJXiDfcKI/s1600/mystore0.png);
  background-repeat:no-repeat;
  margin-right:1px;
  cursor:pointer;
  -webkit-transition:all .6s;
  -moz-transition:all .6s;
  transition:all .6s;
}

.store:hover {
  display:inline-block;
  position:relative;
  width:100px;
  height:45px;
  background:url(http://4.bp.blogspot.com/-TRiIufq0O04/Uphp1z4n4FI/AAAAAAAACxI/Tg4Cl21Re_w/s1600/mystore1-100x42.gif);
  background-repeat:no-repeat;
}

.vids {
  display:inline-block;
  position:relative;
  width:100px;
  height:45px;
  background:url(http://4.bp.blogspot.com/-0aIkEwfgYz4/Uphp3UG7zBI/AAAAAAAACxo/eDlDcna0Yek/s1600/videos0.png);
  background-repeat:no-repeat;
  margin-right:1px;
  cursor:pointer;
  -webkit-transition:all .6s;
  -moz-transition:all .6s;
  transition:all .6s;
}

.vids:hover {
  display:inline-block;
  position:relative;
  width:100px;
  height:45px;
  background:url(http://2.bp.blogspot.com/-BXvkVfHj1rg/Uphp3nVgvVI/AAAAAAAACyA/0kdjZr9Baws/s1600/videos1-100x42.gif);
  background-repeat:no-repeat;
}

.club {
  display:inline-block;
  position:relative;
  width:100px;
  height:45px;
  background:url(http://4.bp.blogspot.com/-iJenIh0INSE/Uphp396x9TI/AAAAAAAACx0/ICcVdbIhpXU/s1600/vips0.png);
  background-repeat:no-repeat;
  margin-right:1px;
  cursor:pointer;
  -webkit-transition:all .6s;
  -moz-transition:all .6s;
  transition:all .6s;
}

.club:hover {
  display:inline-block;
  position:relative;
  width:100px;
  height:45px;
  background:url(http://2.bp.blogspot.com/-RTJDAxjwR2s/Uphp4bNDGpI/AAAAAAAACyg/qFO8sLGmJJU/s1600/vips1-100x42.gif);
  background-repeat:no-repeat;
}

.offtips {
  display:inline-block;
  position:relative;
  width:100px;
  height:45px;
  background:url(http://2.bp.blogspot.com/-CJ4Qb87ZuuI/Uphp10tpQUI/AAAAAAAACxM/gt5qZwKM-08/s1600/tipme0.png);
  background-repeat:no-repeat;
  margin-right:1px;
  cursor:pointer;
  -webkit-transition:all .6s;
  -moz-transition:all .6s;
  transition:all .6s;
}

.offtips:hover {
  display:inline-block;
  position:relative;
  width:100px;
  height:45px;
  background:url(http://4.bp.blogspot.com/-ZaOb62zGLjc/Uphp2q-qJtI/AAAAAAAACxk/yWnFFB8dwyI/s1600/tipme1-100x42.gif);
  background-repeat:no-repeat;
}

.topTips {
  display:inline-block;
  position:relative;
  width:100px;
  height:45px;
  background:url(http://2.bp.blogspot.com/-uPbqXQdjv9M/Uphp1LljPVI/AAAAAAAACw4/6y_B4myPQvI/s1600/fans0.png);
  background-repeat:no-repeat;
  margin-right:1px;
  cursor:pointer;
  -webkit-transition:all .6s;
  -moz-transition:all .6s;
  transition:all .6s;
}

.topTips:hover {
  display:inline-block;
  position:relative;
  width:100px;
  height:45px;
  background:url(http://3.bp.blogspot.com/-4lSUK7GzxL0/Uphp1TgRdfI/AAAAAAAACxg/nJD8ij-8Hfg/s1600/fans1-100x42.gif);
  background-repeat:no-repeat;
}

.joinRoom {
  display:inline-block;
  position:relative;
  width:100px;
  height:45px;
  background:url(http://4.bp.blogspot.com/-coHOXWhSeJM/Uphp0sDgO6I/AAAAAAAACwk/7kAeYEKXFK0/s1600/crools0.png);
  background-repeat:no-repeat;
  margin-right:1px;
  cursor:pointer;
  -webkit-transition:all .6s;
  -moz-transition:all .6s;
  transition:all .6s;
}

.joinRoom:hover {
  display:inline-block;
  position:relative;
  width:100px;
  height:45px;
  background:url(http://2.bp.blogspot.com/-hqkUnLRH4Sw/Uphp0wTGO9I/AAAAAAAACwo/dAQ_YlhyX8k/s1600/crools1-100x42.gif);
  background-repeat:no-repeat;
}

.twitts {
  display:inline-block;
  position:relative;
  width:100px;
  height:45px;
  background:url(http://2.bp.blogspot.com/-37dbHvHE8SU/Uphp23pHb9I/AAAAAAAACxc/QjzSauyG1-A/s1600/twitter0.png);
  background-repeat:no-repeat;
  margin-right:1px;
  cursor:pointer;
  -webkit-transition:all .6s;
  -moz-transition:all .6s;
  transition:all .6s;
}

.twitts:hover {
  display:inline-block;
  position:relative;
  width:100px;
  height:45px;
  background:url(http://4.bp.blogspot.com/-us31y5dy300/Uphp3XoGqaI/AAAAAAAACx4/FH8io3yIFp4/s1600/twitter1-100x42.gif);
  background-repeat:no-repeat;
}