Pada tutorial kali ini, kita akan membuat Menu Bar cantik berwarna Biru Hitam, penampakannya seperti dibawah ini.
 |
| Menu Bar Cantik |
Menu tersebut saya adaptasi dari CSSMenumaker.com, hanya saya rubah backgrundnya, dari yang awalnya menggunakan gambar saya rubah hanya dengan warna (rgb) saja. Tujuannya tentu saja untuk menghemat waktu Load blog kita.
Baik, langsung saja kita mulai Cara Membuat Menu Bar-nya.
1. Dasar Pembuatan Menu Bar
Kita semua tahu bahwa untuk membuat sebuah menu bar, kita harus menyusun unordered list (ul li) sebanyak jumlah daftar yang akan kita buat.
Misal kita akan membuat 4 Daftar Menu, maka kita harus menyusun ul li sebanyak 4x.
Contoh :
<div id="cssmenu">
<ul>
<li class="active"><a href="index.html"><span>Home</span></a></li>
<li><a href="#"><span>Products</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>
<ul>
<li class="active"><a href="index.html"><span>Home</span></a></li>
<li><a href="#"><span>Products</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>
Mungkin teman-teman akan bertanya kenapa ada div yang membungkus menunya ? ini fungsinya nanti untuk memberi border blue dibagian bawah menu kita nantinya, dan kalau tidak salah sejauh yang sedar memang sebuah Menu Bar idealnya dibungkus dengan divisi atau navigasi (html 5).
2. Membuat Menu Bar Menjadi Horisontal
Default dari sebuah unordered list adalah tegak (vertikal), ceritanya disini kita kan, akan Membuat Menu Bar yang mengarah ke samping alias horisontal, maka kita butuh css yang namanya float:left, kita tambahkan pada listnya.
Contoh ;
#cssmenu ul li {
float: left;
list-style: none;
}
float: left;
list-style: none;
}
List style disana berfungsi sebagai CSS Reset yaitu untuk menghapus bulatan kecil yang secara default menempel di unordered list.
3. Mempercantik Warna Menu Bar dengan CSS
Agar hasilnya makin cantik kita perlu memberi warna pada Menu Bar kita. Cara pemberian warna cukup mudah yaitu dengan menambah, background: warna pada setiap menunya.
Contoh :
#cssmenu {
zoom: 1;
height: 69px;
background: rgb(121, 121, 238);
border-radius: 2px;
width: auto;
width: 600px;
}
#cssmenu ul {
background: rgb(58, 55, 55);
}
#cssmenu ul li a:hover, #cssmenu ul li.active a {
background: rgb(121, 121, 238);
display: block;
height: 37px;
margin-top: 0px;
padding-top: 26px;
color: #004f7c;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.55);
opacity: 1;
}
zoom: 1;
height: 69px;
background: rgb(121, 121, 238);
border-radius: 2px;
width: auto;
width: 600px;
}
#cssmenu ul {
background: rgb(58, 55, 55);
}
#cssmenu ul li a:hover, #cssmenu ul li.active a {
background: rgb(121, 121, 238);
display: block;
height: 37px;
margin-top: 0px;
padding-top: 26px;
color: #004f7c;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.55);
opacity: 1;
}
Disini kita menambahkan warna biru ketika mouse mengarah ke menu (hover).
Source lengkap Menu Bar bisa teman-teman copy dibawah ini :
Source CSS Menu Bar Cantik :
Mungkin sampai disini dulu tutorial mengenai Cara Membuat Menu Bar Cantik di Blog yang bisa saya bagikan kepada teman-teman. Hehe, maaf kalau kurang jelas, soal masih pemula dalam Membuat Menu Bar.