Selamat Malam buat sahabat sekalian, saya ingin membagikan kepada anda sebuah tutorial HTML\CSS yang tidak kalah menariknya dari postingan saya yang lain . Tutorial kali ini adalah Cara Membuat Menu Navigasi Lengkap dengan Drop Down murni dengan CSS.
Baiklah sebelumnya, saya sebagai admin mengasumsikan bahwa Anda sudah paham HTML dan CSS, dan tentu saja sudah paham menghubungkan antara HTML file dengan CSS, kalau belum saya sarankan lihat postingan saya sebelum postingan ini.
Sebelum anda meneruskan membaca tutorial ini, saya sarankan anda paham mengenai dasar-dasar HTML dan dasar-dasar CSS terlebih dahulu.
1. Membuat kode HTML
Baik , mari kita mulai dengan kode HTML nya, serhubung sekarang jamannya HTML5 maka kita akan pakai HTML5, tenang aja masih saya campur-campur dengan XHTML, nanti mengenai HTML5 akan saya bahas sendiri dilain waktu. Oke untuk strukturnya masih sama kita menggunakan tag <ul> dan <li>.
Berikut kodenya HTML nya .
Sekarang buat sebuah halaman dengan nama "Header.HTML" , lalu copy-kan seluruh code HTML ini kedalamnya .
Nah sekarang langkah selanjutnya, kita ubah list yang biasa itu menjadi menu yang menarik dengan CSS. Seperti ini kode CSS nya, langsung saya tulis semua nanti baru saya terangin:
Buat sebuah halaman dengan nama "Style.CSS" , lalu copy-kan seluruh kode CSS dibawah ini kedalamnya. .
Jika sudah , sekarang coba anda jalankan pada browser file Header.HTML tadi , lalu lihat hasilnya.
So, sekarang saya akan terangkan bagian-bagian yang terpenting, pertama adalah #nav li disini kita kasih position:relative;, kenapa? karena drop down kita #place-nav ul ul memilki position:absolute;. Sehingga kita harus mendeklarasikan kontainernya agar posisinya pas dibawah tiap menu <li>. Jika kita tidak memberi position:relative; maka browser akan menganggap kontainer nya adalah <body> sehingga drop downnya akan muncul dipojok kiri atas browser.
Berikutnya adalah #nav li:hover a loh kok bukan #nav a:hover li kenapa <li> nya yang dihover? Yap, karena drop down kita berada didalam <li> dan bukan didalam <a> maka apabila kita ingin jejaknya tetap ada ya kita hover di <li> nya. Saya tambahkan z-index:1000 buat jaga-jaga karena biasanya dibawah menu itu biasanya terdapat slideshow javascript dan kebanyakan kasus terutama IE7 posisi dropdown dibawah slideshow, karena itu saya kasih z-index yang agak tinggi biar posisi diatasnya.
Dan karena IE6 hanya kenal hover untuk tag <a> maka kalau anda masih cinta IE6 dan masih ingin mendukungnya mending ke laut aja maka gunakan csshover.htc Peter Nederlof agar bisa jalan di IE6/ .
Oke berikutnya #place-nav ul ul nah ini merupakan drop downnya, karena itu kita beri position:absolute; agar muncul tepat dibawah tiap #nav a:hover li. Jangan lupa untuk kita hilangkan dulu, karena drop downnya baru muncul kalau kita hover jadi awalnya disembunyiin dulu dengan display:none;. Kita atur posisinya agar tepat dibawah menu dengan top:35px; dan left:0;. Pastikan untuk jarak atasnya tidak ada ruang kosong 1 pixel pun karena jika ada ketika mouse kita melewati ruang kosong tersebut maka mouse kita sudah diluar <li> sehingga dropdown akan langsung hilang. Jadi pastikan nilai top lebih kecil atau sama dengan nilai height <li> diatasnya.
Berikutnya #place-nav ul ul ul ini merupakan drop down level ke 2 jadi ya sama kayak sebelumnya, tapi karena dorp down level kedua posisinya agak kekanan dari drop down level 1, maka nilai left kita perbesar tapi juga jangan ada jarak 1 pixel pun.
Ini merupakan kode css untuk memunculkan drop down dan menghilangkannya. Seperti yang Anda lihat div#place-nav li:hover ul, div#place-nav li li:hover ul ini berarti jika kita menghover <li> maka <ul> berikutnya akan muncul display:block dan <ul> dalamnya (level ke 2) tidak muncul display:none; baru ketika kita hover <li> level ke dua maka drop down level ke dua akan muncul.
Selamat mencoba, dan jangan lupa share dan komennya yah.
Terimakasih.
Sebelum anda meneruskan membaca tutorial ini, saya sarankan anda paham mengenai dasar-dasar HTML dan dasar-dasar CSS terlebih dahulu.
1. Membuat kode HTML
Baik , mari kita mulai dengan kode HTML nya, serhubung sekarang jamannya HTML5 maka kita akan pakai HTML5, tenang aja masih saya campur-campur dengan XHTML, nanti mengenai HTML5 akan saya bahas sendiri dilain waktu. Oke untuk strukturnya masih sama kita menggunakan tag <ul> dan <li>.
Berikut kodenya HTML nya .
Sekarang buat sebuah halaman dengan nama "Header.HTML" , lalu copy-kan seluruh code HTML ini kedalamnya .
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Drop Down Menu ala Kumpulan Tutorial Website </title>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
<head>
<body>
<div id="place-nav">
<ul id="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Artikel</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Social</a>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Google</a>
<ul>
<li><a href="#">Google Wave</a></li>
<li><a href="#">Google Buzz</a></li>
<li><a href="#">Google Plus</a></li>
</ul>
</li>
<li><a href="#">Twitter</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
</ul>
</div>
</body>
</html>
Berikut sedikit penjelasan tentang kode diatas :
Jika kita perhatikan didalam <li> Social ada menu lagi dan didalamnya lagi tepatnya didalam <li> Google ada menu lagi. Ini kita nanti akan membuat drop down menu dengan 2 level kedalaman.Nah sekarang langkah selanjutnya, kita ubah list yang biasa itu menjadi menu yang menarik dengan CSS. Seperti ini kode CSS nya, langsung saya tulis semua nanti baru saya terangin:
Buat sebuah halaman dengan nama "Style.CSS" , lalu copy-kan seluruh kode CSS dibawah ini kedalamnya. .
#place-nav {
width:960px;
height:35px;
margin:63px 0 0 0;
}
#nav {
height:35px;
}
#nav li {
height:35px;
float:left;
display:inline;
margin:0 5px;
position:relative;
font-family: Arial, verdana, serif;
z-index:1000;
}
#nav li a {
float:left;
display:inline;
height:25px;
padding:10px 8px 0 8px;
font-size:12px;
color:#9e9e9e;
font-weight:bold;
text-transform:uppercase;
text-shadow:0 0 3px #c7c7c7;
}
#nav li:hover a {
text-decoration:none;
color:#505050;
}
#place-nav ul ul {
position:absolute;
z-index:1200;
display:none;
width:186px;
margin: 0;
top: 35px;
left:0;
background:#1d87ca;
padding:0 0 2px 0;
}
#place-nav ul li ul li {
display: inline;
float: left;
width:186px;
height:auto;
border-bottom:1px solid #085d93;
float: left;
padding: 0;
position:relative;
margin:0;
}
#place-nav ul ul ul {
position:absolute;
z-index:1300;
display:none;
width:186px;
margin: 0;
top: 0;
left:183px;
background:#1c83ce;
border-left:1px solid #1479c3;
padding:0;
}
#place-nav ul li ul li ul li {
display: inline;
float: left;
padding: 0;
}
#place-nav #nav li:hover ul li a, #place-nav #nav li:hover ul li a:link, #place-nav #nav li:hover ul li a:visited {
color:#fff;
font-size:12px;
width:170px;
height:auto;
text-transform:none;
border:none;
background: none;
padding:9px 8px;
text-shadow:none;
margin:0;
font-weight:lighter;
}
#place-nav #nav li:hover ul li a:hover, #place-nav #nav li ul li a:hover {
text-decoration:none;
color:#fff;
background:#0f74bd;
}
div#place-nav li:hover ul ul,
div#place-nav li li:hover ul ul
{display:none;} div#place-nav li:hover ul,
div#place-nav li li:hover ul
{display:block;}
width:960px;
height:35px;
margin:63px 0 0 0;
}
#nav {
height:35px;
}
#nav li {
height:35px;
float:left;
display:inline;
margin:0 5px;
position:relative;
font-family: Arial, verdana, serif;
z-index:1000;
}
#nav li a {
float:left;
display:inline;
height:25px;
padding:10px 8px 0 8px;
font-size:12px;
color:#9e9e9e;
font-weight:bold;
text-transform:uppercase;
text-shadow:0 0 3px #c7c7c7;
}
#nav li:hover a {
text-decoration:none;
color:#505050;
}
#place-nav ul ul {
position:absolute;
z-index:1200;
display:none;
width:186px;
margin: 0;
top: 35px;
left:0;
background:#1d87ca;
padding:0 0 2px 0;
}
#place-nav ul li ul li {
display: inline;
float: left;
width:186px;
height:auto;
border-bottom:1px solid #085d93;
float: left;
padding: 0;
position:relative;
margin:0;
}
#place-nav ul ul ul {
position:absolute;
z-index:1300;
display:none;
width:186px;
margin: 0;
top: 0;
left:183px;
background:#1c83ce;
border-left:1px solid #1479c3;
padding:0;
}
#place-nav ul li ul li ul li {
display: inline;
float: left;
padding: 0;
}
#place-nav #nav li:hover ul li a, #place-nav #nav li:hover ul li a:link, #place-nav #nav li:hover ul li a:visited {
color:#fff;
font-size:12px;
width:170px;
height:auto;
text-transform:none;
border:none;
background: none;
padding:9px 8px;
text-shadow:none;
margin:0;
font-weight:lighter;
}
#place-nav #nav li:hover ul li a:hover, #place-nav #nav li ul li a:hover {
text-decoration:none;
color:#fff;
background:#0f74bd;
}
div#place-nav li:hover ul ul,
div#place-nav li li:hover ul ul
{display:none;} div#place-nav li:hover ul,
div#place-nav li li:hover ul
{display:block;}
Jika sudah , sekarang coba anda jalankan pada browser file Header.HTML tadi , lalu lihat hasilnya.
So, sekarang saya akan terangkan bagian-bagian yang terpenting, pertama adalah #nav li disini kita kasih position:relative;, kenapa? karena drop down kita #place-nav ul ul memilki position:absolute;. Sehingga kita harus mendeklarasikan kontainernya agar posisinya pas dibawah tiap menu <li>. Jika kita tidak memberi position:relative; maka browser akan menganggap kontainer nya adalah <body> sehingga drop downnya akan muncul dipojok kiri atas browser.
Berikutnya adalah #nav li:hover a loh kok bukan #nav a:hover li kenapa <li> nya yang dihover? Yap, karena drop down kita berada didalam <li> dan bukan didalam <a> maka apabila kita ingin jejaknya tetap ada ya kita hover di <li> nya. Saya tambahkan z-index:1000 buat jaga-jaga karena biasanya dibawah menu itu biasanya terdapat slideshow javascript dan kebanyakan kasus terutama IE7 posisi dropdown dibawah slideshow, karena itu saya kasih z-index yang agak tinggi biar posisi diatasnya.
Dan karena IE6 hanya kenal hover untuk tag <a> maka kalau anda masih cinta IE6 dan masih ingin mendukungnya mending ke laut aja maka gunakan csshover.htc Peter Nederlof agar bisa jalan di IE6/ .
Oke berikutnya #place-nav ul ul nah ini merupakan drop downnya, karena itu kita beri position:absolute; agar muncul tepat dibawah tiap #nav a:hover li. Jangan lupa untuk kita hilangkan dulu, karena drop downnya baru muncul kalau kita hover jadi awalnya disembunyiin dulu dengan display:none;. Kita atur posisinya agar tepat dibawah menu dengan top:35px; dan left:0;. Pastikan untuk jarak atasnya tidak ada ruang kosong 1 pixel pun karena jika ada ketika mouse kita melewati ruang kosong tersebut maka mouse kita sudah diluar <li> sehingga dropdown akan langsung hilang. Jadi pastikan nilai top lebih kecil atau sama dengan nilai height <li> diatasnya.
Berikutnya #place-nav ul ul ul ini merupakan drop down level ke 2 jadi ya sama kayak sebelumnya, tapi karena dorp down level kedua posisinya agak kekanan dari drop down level 1, maka nilai left kita perbesar tapi juga jangan ada jarak 1 pixel pun.
Nah yang terakhir dan terpenting adalah :
div#place-nav li:hover ul ul,
div#place-nav li li:hover ul ul
{display:none;}
div#place-nav li:hover ul,
div#place-nav li li:hover ul
{display:block;}
div#place-nav li li:hover ul ul
{display:none;}
div#place-nav li:hover ul,
div#place-nav li li:hover ul
{display:block;}
Ini merupakan kode css untuk memunculkan drop down dan menghilangkannya. Seperti yang Anda lihat div#place-nav li:hover ul, div#place-nav li li:hover ul ini berarti jika kita menghover <li> maka <ul> berikutnya akan muncul display:block dan <ul> dalamnya (level ke 2) tidak muncul display:none; baru ketika kita hover <li> level ke dua maka drop down level ke dua akan muncul.
Selamat mencoba, dan jangan lupa share dan komennya yah.
Terimakasih.
