Menu Drop Down dengan Css v.0.1
Disini saya menggunakan metode pemanggilan external style sheet. Apa yang dimaksud metode ini? metode ini adalah dimana penulisan kode css disimpan di file pribadi dengan ektensi *.css.
Dan berikut cara pemanggilannya.Pasang kode dibawah ini diantara <head> dan </head>.
Pemanggilan file css
Selanjutnya pasang kode-kode HTML dibawah ini dan letakkan dimana anda ingin menaruh menu dropdown tersebut.<link href="gayaTutorMenu.css" rel="stylesheet" type="text/css"/>
Kode HTML menu dropdown
Buat file css dengan nama gayaTutorMenu. Dan berikut kode cssnya. Anda bisa mengganti nama file cssnya dengan sarat pemanggilan external style sheet tadi juga diganti sesuai nama file css dropdown.<div id="exam_menu"> <div id="tutorMenuDropDown"> Beranda </div> <div id="tutorMenuDropDown">link <div class="dropTMDD"> <a href="http://mmlpro21.blogspot.com/"><div>blog mmlpro21</div></a> <a href="http://animepeople.twomini.com/"><div>animepeople</div></a> <a href="http://owlscript.zz.mu/"><div>owlscript</div></a> </div> </div> <div id="tutorMenuDropDown">About <div class="dropTMDD"> <div>mmlpro21</div> <div>free all</div> </div> </div> </div>
gayaTutorMenu.css
Pembahasan :#exam_menu{
background: #555555;
border: 1px solid #555555;
color:#fff;
width:500px;
font-family: sans-serif;
}
#exam_menu #tutorMenuDropDown{
display: inline-table;
padding: 5px;
font-weight: bold;
}
#exam_menu #tutorMenuDropDown:hover{
background: #fff;
cursor: pointer;
color:#555555;
}
#tutorMenuDropDown .dropTMDD{
display: none;
background:#fff;
border-right:2px solid #555555;
border-bottom:2px solid #555555;
border-left:2px solid #555555;
margin-top: 5px;
margin-left:-7px;
}
#tutorMenuDropDown .dropTMDD a{text-decoration: none;}
#tutorMenuDropDown:hover .dropTMDD{
z-index:30;
display: block;
position: absolute;
-webkit-border-radius:0px 0px 7px 7px;
-o-border-radius:0px 0px 7px 7px;
-moz-border-radius:0px 0px 7px 7px;
-ms-border-radius:0px 0px 7px 7px;
border-radius:0px 0px 7px 7px;
padding-bottom:5px;
}
#tutorMenuDropDown .dropTMDD div{
padding:5px;
font-weight: normal;
min-width: 120px;
transition: 1s;
}
#tutorMenuDropDown .dropTMDD div:hover{
background: #ccc;
cursor: pointer;
}
A : Mengapa menu jika kita sorotkan oleh mouse dapat muncul menu dibawahnya?
B : itu karena dikode cssnya selector diberi hover.
A : Lantas kenapa menu dropdown dibawahnya bisa muncul dan hilang?
B : Pada selector menu drop akan hilang atau hidden jika kita memberikan propertis display dan valuenya none. Dan kita perintahkan jika disorot diselectornya propertis display dengan value none diganti dengan value block.
Amati contoh dibawah ini :
sorot disini
Ini dia menu dropdown.
Kode HTML
<div id="contohDropdownv01">sorot disini <div>Ini dia menu dropdown.</div> </div>
Kode CSS
Lihat selector #contohDropdownv01 div. Arti dari kode ini adalah tag Div yang berada di dalam tag berselector #contohDropdownv01 akan mengeksekusi perintah background:#ccc;border:1px solid black;display: none;position: absolute;
#contohDropdownv01{
cursor: pointer;
border: 1px solid black;
width:100px;
}
#contohDropdownv01:hover div{
display: block;
cursor: pointer;
}
#contohDropdownv01 div{
background:#ccc;
border:1px solid black;
display: none;
position: absolute;
}
- background:#ccc; = warna background pada menu drop.
- border:1px solid black; = garis batas pada menu drop.
- display: none; = kode ini yang membuat menu drop hilang jika tidak tersorot oleh cursor.
- position: absolute; = berposisi absolute.
Lihat pada selector #contohDropdownv01:hover div. Arti dari kode tersebut adalah jika tag yang mengandung selector #contohDropdownv01 disorot maka tag div didalam tag berselector #contohDropdownv01 akan mengeksekusi perintah display: block;cursor: pointer;
- display: block; = kode ini yang membuat menu drop akan muncul.(tidak terhiden lagi oleh display none.)
- cursor: pointer; = mengganti tampilan cursor menjadi bentuk tangan yang menunjuk.
Demikian pembahasan dari saya tentang menu dropdown css, kurang lebihnya mohon maaf. Bagi yang ingin mengunduh filenya, anda bisa klik download dibawah ini.
O iya dimohon jangan copy paste diblog anda, kalau ingin copy mohon diberi referensi.
Tidak ada komentar:
Posting Komentar