Koben akan berbagi membuat navigasi sederhana dari kehebatan kode CSS seperti
Make TreeVew Menu Without JavaScript! Murni memakai variabel CSS2 memudahkan sobat dalam memakainya :)
Ide ini datang dari
MediaLoot salah satu web kumpulan premium design resources
for you. Bisa belajar atau jadi member di sana guna menjadi profesional blogger :d Menu navigasi sekarang ini sejenis tree-menu, tetapi tidak bisa di
hide/show
;) Jadi terpampang dan jelas terlihat. Cocok banget bagi designer pemula seperti kita-kita ;))
Dibutuhkan 2 buah image >> "
&
" Save img tersebut dan hostingkan.
Kode CSS
.main_nav {
float: left;
width: 370px;
margin-left: 5px;
font-size: 14px;
}
.main_nav ul {
float: left;
display: inline;
width: 175px;
margin-right: 5px;
color: #cbd6e2;
padding: 10px 0 0 0;
list-style-type: none;
background: url(PNG Image, 1×10 pixels.png) left repeat-y;
}
.main_nav ul li {
float: left;
width: 145px;
padding-left: 23px;
line-height: 145%;
background: url(PNG Image, 20×1 pixels.png) 0 bottom no-repeat;
}
.main_nav ul li.mains_sub {
background: url(PNG Image, 20×1 pixels.png) 0 17px no-repeat;
}
.main_nav ul li a {
color: #c48962;
position: relative;
top: 7px;
}
.main_nav ul li a:hover {
color: #cbd6e2;
}
.main_nav ul ul {
width: 132px;
margin: 8px 0 0 15px;
padding- top:0;
}
.main_nav ul ul li {
width: 100px;
}
Don't forget to change url
image! Kemudian kode HTMLnya deh.
Syntax HTML
<div class="main_nav">
<ul>
<li class="mains_sub">
<a href="/">Main</a>
<ul>
<li><a href="#">Main</a></li>
<li><a href="#">Main1</a></li>
<li><a href="#">Main2</a></li>
</ul>
</li>
<li class="mains_sub"><a href="#">Main1</a>
<ul>
<li><a href="#">Main1</a></li>
<li><a href="#">Main1-2</a></li>
</ul>
</li>
<li><a href="#">Main2</a></li>
</ul>
<ul>
<li class="mains_sub">
<a href="#">Main-A</a>
<ul>
<li><a href="#">Main-A-1</a></li>
<li><a href="#">Main-A-2</a></li>
<li><a href="#">Main-A-3</a></li>
<li><a href="#">Main-A-4</a></li>
<li><a href="#">Main-A-5</a></li>
</ul>
</li>
<li><a href="#">Main-B</a></li>
<li><a href="#">Main-C</a></li>
</ul>
</div>SAVE. Lihat hasil kerja. Thanks @medialoot :)
http://geeksretreat.wordpress.com/2012/07/15/swinging-with-html5-and-css3-transitions/
Happy navigasi \m/
