Simple navbar with CSS. Navbar atau navigation bar, yang merupakan menu utama dari sebuah halaman weblog. Adapun fungsinya untuk menyimpan link pilihan kita untuk mempermudah dalam memasuki sebuah halaman (halah pusing keterangannya ~x() Biasanya sih diisi sama home, about us, contact dan lain-lain :D Pernah juga posting tentang navbar, tapi lupa dimana yak :D (cari di arsip saja)Sekarang BeBeN si bloglang ganteng kalem tea memilih cara membuat navbar sederhana dengan CSS. Biasa dapat yang unik, mudah, gaya tentunya langsung ta' eumpost :"> Sangkin sederhana jadi dipostingkan, kalau yang pusing-pusing berat ah =)) Bagian master Doyok saja yang berat² ;))
Masukan kode CSS berikut diatas/sebelum kode ]]></b:skin>
Lalu kode HTMLnya dimasukan didalam tag <body>...</body>ul#list-nav {
list-style:none;
margin:5px;
padding:0;
width:510px
}
ul#list-nav li {
display:inline
}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:100px;
background:#333;
color:#eee;
float:left;
text-align:center;
border-left:1px solid #fff;
}
ul#list-nav li a:hover {
background:#00FF00;
color:#6600CC;
}
<ul id="list-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
Sekarang yang kedua, tahapannya sama dengan diatas cuma tinggal ganti saja kode-kodenya ;) Masukan kode CSS berikut...
#nav-wrapper {
width:465px;
margin:0 auto;
padding:20px 0;
background:#666666;
}
ul#nav {
font-family: Verdana;
font-size:14px;
list-style:none;
margin:0 auto;
padding:0;
width:455px;
overflow: auto;
}
ul#nav li {
display:inline;
}
ul#nav li a {
text-decoration:none;
display: block;
padding:5px 21px;
background:#5F3222;
color:#eee;
float:left;
text-align:center;
border-top:2px solid #815444;
border-right:2px solid #3d1000;
border-bottom:2px solid #3d1000;
border-left:2px solid #815444;
}
ul#nav li a:hover {
background:#FFFF00;
color:#FF6600;
border-top:2px solid #815444;
border-right:2px solid #c59888;
border-bottom:2px solid #c59888;
border-left:2px solid #815444;
}
Nah ini kode HTMLnya...
<div id="nav-wrapper">
<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Services</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
Silahkan mau pakai yang mana :) Demikian acara berbloglang sampai bertemu semoga bermanfaat bagi yang mau membuat navbar.Source by : www.vanseodesign.com
Tidak ada komentar:
Posting Komentar