Good Template and Expanding Vertical Navigation Menu

Dari pada tidak memosting sama sekali, Koben akan berbagi informasi sedikit dari Dunia Template dan trick mengenai hover menggunakan atribut CSS3. Tanpa banyak basa-basi gue mulai saja hasil menemukan 1 buah template yang menurut saya full stylish b-)

Home

This is a simple animated vertical navigation menu created by Design Shack. Click here to return to the tutorial.

Portfolio

• Web
• Print
• Other

About

• History
• Meet The Owners
• Awards

Contact

• Phone
• Email
• Location

Code CSS3 Expanding Vertical Navigation Menu

<style>
.v_nav {
  background: #f0f0f0;
  width: 200px; 
margin: 0 auto;
}
.v_nav h4 {
  border-bottom: 1px solid rgba(0,0,0,0.3);
  border-top: 1px solid rgba(255,255,255,0.5);
  font-size: 15px;
  font-weight: 500;
  padding: 7px 12px;
margin:0;
  background: #a90329;
}
.v_nav h4:hover {  
  background: #cc002c; 
}
.v_nav h4 a {
color: #fff;
  display: block;
  text-decoration: none;
  width: 200px;
}
.v_nav ul {
  background: #DEB279;
  font-size: 13px;
line-height: 30px;
  height: 0px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
margin:0;
  -webkit-transition: height 1s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
          transition: height 1s ease;
}
.v_nav:hover ul {
  height: 93px;
}
.v_nav ul a {
  margin-left: 20px;
  text-decoration: none;
color: #333;
  display: block;
  width: 200px;
}
.v_nav li {
  border-bottom: 1px solid #eee;
}
.v_nav li:hover {
background: #eee;
}
.alpha p {
padding: 8px 12px;
color: #333;
margin:0;
}
</style>
    <div class="v_nav alpha">
     <h4><a href="#">Home</a></h4>
     <p>This is a simple animated vertical 
navigation menu created by <span style="font-weight:bold">Design Shack</span>.</p>
     </div>
    <div class="v_nav">
      <h4><a href="#">Portfolio</a></h4>
      <ul>
        <li><a href="#">Web</a></li>
        <li><a href="#">Print</a></li>
        <li><a href="#">Other</a></li>
        </ul>
</div>
      <div class="v_nav">
        <h4><a href="#">About</a></h4>
        <ul>
        <li><a href="#">History</a></li>
        <li><a href="#">Meet The Owners</a></li>
        <li><a href="#">Awards</a></li>
        </ul>     
</div> 
<div class="v_nav">
      <h4><a href="#">Contact</a></h4>
        <ul>
        <li><a href="#">Phone</a></li>
        <li><a href="#">Email</a></li>
        <li><a href="#">Location</a></li>
        </ul>
      </div>

Happy blogging \m/