Tutorial Css / Html : Cara Menciptakan Hidangan Horizontal Bagus Dengan Html Dan Css
Baiklah sebelumnya, aku sebagai admin mengasumsikan bahwa Anda sudah paham HTML dan CSS, dan tentu saja sudah paham menghubungkan antara HTML file dengan CSS, kalau belum aku sarankan lihat postingan aku sebelum postingan ini.
Sebelum anda meneruskan membaca tutorial ini, aku sarankan anda paham mengenai dasar-dasar HTML dan dasar-dasar CSS terlebih dahulu.
1. Membuat instruksi HTML
Baik , mari kita mulai dengan instruksi HTML nya, serhubung kini jamannya HTML5 maka kita akan pakai HTML5, damai aja masih aku campur-campur dengan XHTML, nanti mengenai HTML5 akan aku bahas sendiri dilain waktu. Oke untuk strukturnya masih sama kita memakai tag <ul> dan <li>.
Berikut kodenya HTML nya .
Sekarang buat sebuah halaman dengan nama “Header.HTML” , kemudian copy-kan seluruh code HTML ini kedalamnya .
Berikut sedikit klarifikasi perihal instruksi diatas :
Jika kita perhatikan didalam <li> Social ada sajian lagi dan didalamnya lagi tepatnya didalam <li> Google ada sajian lagi. Ini kita nanti akan membuat drop down sajian dengan 2 level kedalaman.
Nah kini langkah selanjutnya, kita ubah list yang biasa itu menjadi sajian yang menarik dengan CSS. Seperti ini instruksi CSS nya, pribadi aku tulis semua nanti gres aku terangin:
Buat sebuah halaman dengan nama “Style.CSS” , kemudian copy-kan seluruh instruksi CSS dibawah ini kedalamnya. .
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 , kini coba anda jalankan pada browser file Header.HTML tadi , kemudian lihat hasilnya.
So, kini aku akan terangkan bagian-bagian yang terpenting, pertama yaitu #nav li disini kita kasih position:relative;, kenapa? alasannya yaitu drop down kita #place-nav ul ul memilki position:absolute;. Sehingga kita harus mendeklarasikan kontainernya biar posisinya pas dibawah tiap sajian <li>. Jika kita tidak memberi position:relative; maka browser akan menganggap kontainer nya yaitu <body> sehingga drop downnya akan muncul dipojok kiri atas browser.
Berikutnya yaitu #nav li:hover a loh kok bukan #nav a:hover li kenapa <li> nya yang dihover? Yap, alasannya yaitu 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 alasannya yaitu biasanya dibawah sajian itu biasanya terdapat slideshow javascript dan kebanyakan perkara terutama IE7 posisi dropdown dibawah slideshow, alasannya yaitu itu aku kasih z-index yang agak tinggi biar posisi diatasnya.
Dan alasannya yaitu IE6 hanya kenal hover untuk tag <a> maka kalau anda masih cinta IE6 dan masih ingin mendukungnya mending ke maritim aja maka gunakan csshover.htc Peter Nederlof biar sanggup jalan di IE6/ .
Oke berikutnya #place-nav ul ul nah ini merupakan drop downnya, alasannya yaitu itu kita beri position:absolute; biar muncul sempurna dibawah tiap #nav a:hover li. Jangan lupa untuk kita hilangkan dulu, alasannya yaitu drop downnya gres muncul kalau kita hover jadi awalnya disembunyiin dulu dengan display:none;. Kita atur posisinya biar sempurna dibawah sajian dengan top:35px; dan left:0;. Pastikan untuk jarak atasnya tidak ada ruang kosong 1 pixel pun alasannya yaitu jikalau ada saat mouse kita melewati ruang kosong tersebut maka mouse kita sudah diluar <li> sehingga dropdown akan pribadi hilang. Makara 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 alasannya yaitu 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 yaitu :
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 jikalau kita menghover <li> maka <ul> berikutnya akan muncul display:block dan <ul> dalamnya (level ke 2) tidak muncul display:none; baru saat kita hover <li> level ke dua maka drop down level ke dua akan muncul.
Selamat mencoba, dan jangan lupa share dan komentnya yah.
Terimakasih.
