Hai hai semua..... postingan kali ini kita akan membahas mengenai menu yang terdapat di setiap web yang akan dibuat. Pada umumnya terletak di paling atas dari tampilan web. Contohnya seperti ini nih..
Dan untuk membuat tampilan seperti di atas kita akan menggunakan CSS yang langsung pada skript HTML nya.
Oke kita mulai dari
1. Mendesain Menu (Vertikal) dengan CSS
One Step
CARA MEMBUAT MENU (VERTIKAL) dengan CSS
Untuk mendesain menu dengan CSS kita memerlukan daftar menu yang dibuat dengan HTML.
Tag HTML yang digunakan untuk membuat menu adalah dengan tag ul. Di bawah ini adalah kode HTML dari menu yang akan didesain oleh CSS.
Untuk mendesain menu tersebut kita harus memberi id terlebih dahulu untuk membedakan
dengan daftar ul yang lain, id yang akan digunakan bernama “nav”sehingga kode di atas menjadi sbb:
Setelah diberi id, kita bisa memilih menu tersebut dengan CSS dan mulai mendesainnya. Kode
CSS nya adalah sebagai berikut:
Dengan kode diatas maka menu tidak akan menampilkan bullet (dengan kode list-style-type:
none), batas dan padding akan menjadi 0, lebar 180px, dan akan menampilkan warna latar
biru. Kurang lebih tampilannya seperti ini:
Setelah itu kita akan mendesain tiap menu item, yang mana tag dari item-item tersebut adalah
<li></li>. Selain tag li, kita juga akan mendesain tag <a></a> (link) sehingga area yang bisa
diklik menjadi lebih besar (tidak hanya teks nya saja, melainkan seluruh kotak).
Kita perlu menambahkan kode CSS lagi untuk mendesainnya. Kode CSS nya adalah sbb:
Untuk menstandarisasi tampilan maka tambahkan kode CSS berikut:
Untuk menambah efek ketika mouse di atas salah satu menu item, maka kita akan mengubah
warna latar dari menu item tersebut dengan kode:
Dengan skript lengkap sebagai berikut:
<html>
<head>
<title>One Step</title>
</head>
<body>
<p>CARA MEMBUAT MENU (VERTIKAL) dengan CSS</p>
<style>
#nav {
list-style-type: none;
margin: 0;
padding: 0;
width: 180px;
background-color:#09C;
float:left;/*untuk menstandarisasi tampilan di setiap browser*/
}
#nav li {
margin: 0;
padding: 0;
float:left;
width:100%;
}
#nav a {
display: block;
color: #FFF;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom:1px solid #FFF;
}
#nav a:hover {
background:#039;
}
</style>
<ul id="nav">
<li><a href="#">Home</li>
<li><a href="http//www.google.com">Google</li>
<li><a href="http//www.youtube.com">Youtube</li>
<li><a href="http//www.yahoo.com">Yahoo</li>
</ul>
</body>
</html>
Catatan:
- IE6 merupakan browser yang tidak standar, sehingga seringkali menampilkan tampilan yang tidak diharapkan. Karena itu, selalu gunakan browser yang standar seperti Mozilla Firefox dan Safari.
- Dan selalu periksa hasil desain kita di IE6 agar hasil desain kita sama di semua browser.
2. Mendesain Menu (Horisontal) dengan CSS
Perbedaan menu vertikal dengan horizontal adalah:
a. Lebarnya jauh lebih lebar dari menu vertikal
b. Teks nya berada di tengah
c. Setiap elemen berada di sisi elemen lainnya, bukan di bawah elemen lainnya.
Untuk mendesain menu horizontal, kita hanya tinggal memodifikasi beberapa kode CSS dari
menu Vertikal. Kode yang harus dimodifikasi adalah
a. Kita perlu mengubah width dari elemen ul karena tidak diperlukan lagi 100%
b. Elemen a tidak memerlukan display:block, karena akan di-float
c. Karena kita membuat teks menjadi di tengah, padding kanan dan kiri bisa dihapus
d. Border pun diubah dari bottom menjadi right
Maka skriptnya menjadi berikut:
<html>
<head>
<title>One Step</title>
</head>
<body>
<p>CARA MEMBUAT MENU (HORISONTAL) dengan CSS</p>
<style>
#nav { /*id yang berfungsi menghilangkan list lingkaran*/
list-style-type:none; /*hilanhkan kode width*/
margin:0;
padding:0;
background:#999;
float:left; /*berfungsi untuk menstandarkan tampilan pada browser*/
}
#nav li{
margin:0;
padding:0;
float:left; /*hapus kode width*/
}
#nav a{
color:#333;
text-decoration:none;
line-height:2;
border-right:1px solid #FFF; /*ubah border dari battom menjadi right*/
text-align:center; /*tambahkan kode berikut*/
width:127px;
float:left;
}
#nav a:hover {/*untuk memberikan efek perbedaan warna ketika mouse mendekat*/
background:#333;
}
</style>
<ul id="nav">
<li><a href="#">Home</li>
<li><a href="https//www.google.com">Picture</li>
<li><a href="https//www.google.com">Game</li>
<li><a href="https//www.google.com">Music</li>
<li><a href="https//www.google.com">Movie</li>
</ul>
</body>
</html>
Terima kasih telah mengunjungi blog saya dan terima kasih kepada sumber
ilmukomputer.com semoga bermanfaat dan menambah ilmu serta semangat belajar kalian.
