Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Menu Dropdown Multilevel dengan Pure CSS. Menampilkan dropdown menu multilevel hanya dengan CSS dan HTML sangat sederhana dan mudah. Dalam membuat Menu Dropdown Multilevel dengan Pure CSS bisa juga menggunakan Query atau Javascript. Dalam tutorial ini, kita melakukannya untuk menu multi-level tanpa jQuery atau Javascript.
Kode HTML untuk Menu Multilevel
Kode HTML ini dengan daftar unordered yang bersarang digunakan untuk menampilkan menu dalam multilevel.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<!DOCTYPE html> <html> <head> <title>Menu Dropdown Multilevel dengan Pure CSS</title> </head> <body> <ul id="menu"> <li class="parent"><a href="#">Popular Toys</a> <ul class="child"> <li class="parent"><a href="#">Video Games <span class="expand">»</span></a> <ul class="child"> <li><a href="#">Car</a></li> <li><a href="#">Bike Race</a></li> <li><a href="#">Fishing</a></li> </ul> </li> <li><a href="#">Barbies</a></li> <li><a href="#">Teddy Bear</a></li> <li><a href="#">Golf Set</a></li> </ul> </li> <li class="parent"><a href="#">Recent Toys</a> <ul class="child"> <li><a href="#">Yoyo</a></li> <li><a href="#">Doctor Kit</a></li> <li class="parent"><a href="#">Fun Puzzle<span class="expand">»</span></a> <ul class="child"> <li><a href="#" nowrap>Cards</a></li> <li><a href="#" nowrap>Numbers</a></li> </ul> </li> <li><a href="#">Uno Cards</a></li> </ul> </li> <li class="parent"><a href="#">Toys Category</a> <ul class="child"> <li><a href="#">Battery Toys</a></li> <li class="parent"><a href="#">Remote Toys <span class="expand">»</span></a> <ul class="child"> <li><a href="#">Cars</a></li> <li><a href="#">Aeroplane</a></li> <li><a href="#">Helicopter</a></li> </ul> </li> <li><a href="#">Soft Toys</a> </li> <li><a href="#">Magnet Toys</a></li> </ul> </li> </ul> </body> </html> |
Menu Multilevel CSS
Awalnya, saya hanya menampilkan daftar item menu induk. Pada saat mouse di atas, item anak ditampilkan dengan menggunakan CSS: hover selector. saya mengendalikan posisi daftar menu anak berdasarkan item menu induk yang terkait menggunakan Stylesheet berikut.
|
1 2 3 4 5 6 7 8 9 10 11 |
.parent {display: block;position: relative;float: left;line-height: 30px;background-color: #4FA0D8;border-right:#CCC 1px solid;} .parent a{margin: 10px;color: #FFFFFF;text-decoration: none;} .parent:hover > ul {display:block;position:absolute;} .child {display: none;} .child li {background-color: #E4EFF7;line-height: 30px;border-bottom:#CCC 1px solid;border-right:#CCC 1px solid; width:100%;} .child li a{color: #000000;} ul{list-style: none;margin: 0;padding: 0px; min-width:10em;} ul ul ul{left: 100%;top: 0;margin-left:1px;} li:hover {background-color: #95B4CA;} .parent li:hover {background-color: #F0F0F0;} .expand{font-size:12px;float:right;margin-right:5px;} |
Berikut hasil dari koding di atas;
Oke itulah tadi pembahasan saya tentang Menu Dropdown Multilevel dengan Pure CSS, semoga bermanfaat.