◄ Min  Size Fonts: + | - | ± Color: Max ►

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.


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/
Loading...
XGood Template and Expanding Vertical Navigation Menu

Subscribe my posts Register For Free!
[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE