A simple navigation with transition effects on hover.
A Pen by Stan Williams on CodePen.
<ul class="navigation"> | |
<li><a href="#" target="_blank"> | |
<h2>Home</h2></a> | |
<p></p> | |
</li> | |
<li><a href="#" target="_blank"> | |
<h2>Media</h2></a> | |
<p>Music/Photos</p> | |
</li> | |
<li><a href="#" target="_blank"> | |
<h2>About</h2></a> | |
<p>Who we Aree</p> | |
</li> | |
<li><a href="#" target="_blank"> | |
<h2>Blog</h2></a> | |
<p>Visit our Blog</p> | |
</li> | |
</ul> |
//orig. code author https://twitter.com/thecodeplayer | |
// forked by Stan Williams | |
// http://stanwilliamsmusic.com | |
// Adapted from: | |
// http://thecodeplayer.com/walkthrough/make-a-simple-navigation-with-hover-transitions |
* {margin: 0; padding: 0;} | |
body { | |
font-family: 'Lucida Grande', helvetica, arial, sans-serif; | |
font-size: 12px; | |
background: #eff; | |
} | |
.navigation { | |
margin: 200px 20px; | |
background: #fff; | |
overflow: hidden; | |
width: 760px; | |
box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2); | |
} | |
.navigation li { | |
width: 120px; border-left: 5px solid #666; | |
float: left; | |
cursor: pointer; | |
list-style-type: none; | |
padding: 10px 50px 10px 15px; | |
-webkit-transition: all 0.3s ease-in; | |
-moz-transition: all 0.3s ease-in; | |
-o-transition: all 0.3s ease-in; | |
} | |
.navigation li h2 { | |
font-family: georgia; | |
font-weight: normal; | |
font-style: italic; | |
font-size: 14px; | |
margin-bottom: 5px; | |
line-height: 16px; | |
} | |
.navigation li p{ | |
font-size: 11px; | |
color: #999; | |
-webkit-transition: all 0.1s ease-in; | |
-moz-transition: all 0.1s ease-in; | |
-o-transition: all 0.1s ease-in; | |
} | |
.navigation li:hover { | |
background: #333; | |
border-left: 5px solid #000; | |
} | |
.navigation li:hover h2 { | |
font-weight: bold; | |
color: #fff; | |
} | |
.navigation li:hover p { | |
color: #ccc; | |
padding-left: 5px; | |
} |
Preview and Demo with live editor, here: http://codepen.io/Stanssongs/pen/egaky/