Setelah sebelumnya membahas tentang Membuat Menu Sederhana Menyamping pada Part 1 Belajar membuat menu, artikel ini akan mengupas lebih dalam tentang pembuatan menu.
Drop down disini berarti submenu / cabang dari menu akan terlihat jatuh dari menu utamanya, dan disini kita akan membuat percabangan kedua atau lebih dari submenunya.
Langsung saja berikut ini beberapa kegiatan kita dalam belajar membuat menu tersebut.
- Pertama-tama sediakan peralatan / tool yang diperlukan, seperti text editor untuk memodifikasi kode nya dan web browser (Contoh : Firefox, Chrome, Opera) untuk melihat hasil dari menu yang kita buat.
- Untuk text editor bisa menggunakan Notepad++, bisa di download secara gratis disini
- Setelah tool yang diperlukan sudah terinstal sekarang kita akan membuat file HTML dan CSS nya, buka Notepad++ > klik file > new, lebih lengkapnya baca Pengenalan HTML & CSS.
- Jika ingin mudah gunakan tool HTML & CSS Editor blog ini.
- Kemudian copy kode dibawah ini kedalam file html atau kolom html pada editor.
<ul class='menudropdown'>
<li><a href='http://alamatyangdituju.com/'>Home</a></li>
<li><a href='#'>Artikel</a><!-- "#" ganti dengan alamat yang dituju -->
<ul class='sbmenu'>
<li><a href='#'>Sub Artikel 1</a></li>
<li><a href='#'>Sub Artikel 2</a></li>
<li><a href='#'>Sub Artikel 3</a></li>
</ul>
</li>
<li>
<a href='#'>Tutorial</a>
<ul class='sbmenu'>
<li><a href='#'>Komputer</a>
<ul class='sbmenu2'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Windows</a></li>
</ul>
</li>
<li><a href='#'>Web Design</a>
<ul class='sbmenu2'>
<li><a href='#'>HTML&CSS</a>
<ul class='sbmenu3'>
<li><a href='#'>HTML</a></li>
<li><a href='#'>CSS</a></li>
</ul>
</li>
<li><a href='#'>JQUERY</a></li>
</ul>
</li>
</ul>
</li>
</ul>
- Selanjutnya Salin CSS dibawah ini ke file CSS atau kolom CSS kode editor.
.menudropdown{
font-family: calibri;/*Jenis font Calibri*/
width: 100%;/* Agar lebar menu penuh mengikuti elemen pembungkusnya */
margin:0;padding:0; /* Mengatur margin dan padding ke 0, karena UL memiliki margin dan padding bawaan(Default) */
background:#259;
float: left;
}
.menudropdown li{
display: inline-block;/* Mengatur daftar list / li melintang atau menyamping horizontal */
position:relative;
float: left;
}
.menudropdown a{
display: block;
float: left;
color: #fff;
background: #47b;
text-decoration: none;/* Menghilangkan garis bawah(Underline) <a> */
padding: 5px; /* Mengatur padding semua sisi 5px */
border:1px solid #000;
font-size:18px;
transition: 0.2s ease;/* Membuat efek perubahan hover dan kembali selama 0.2 detik */
}
.menudropdown a:hover{ /* Efek hover atau perubahan <a> atau alamat yang dituju apabila kursor mouse diarahkan ke <a> */
background: #fff;/* Perubahan warna background */
color: #000;/* Perubahan warna tulisan <a> */
}
.sbmenu{
margin: 0px;
padding:0px;
top: 0;/* Meletakkan posisi Submenu ke paling atas dari elemen induknya (Li sebelumnya) */
position:absolute;
visibility:hidden;/* Submenu1 tidak ditampilkan atau di hidden pada awalnya */
opacity: 0; /* Opacity mengatur transparency / tingkat ketransparanan suatu elemen, disini submenu di atur pada nilai 0 */
transition: 0.2s ease;/* Memberikan efek transisi/ efek perubahan pada saat kursor diarahkan(Hover) ataupun kembali selama 0.2 detik */
}
.menudropdown li:hover .sbmenu{ /* Hover disini memberikan pengaruh terhadap Submenu1 pada saat kursor mengarah ke <li> yang memiliki Submenu1 */
visibility: visible;/* Menampilkan Submenu1 mengubah display:none menjadi display: block */
opacity: 1;/* Opacity bernilai 1 atau penuh (Tidak transparan)*/
top: 100%;/* Meletakkan posisi Submenu ke paling bawah dari elemen induknya (Li sebelumnya) */
}
.sbmenu li{display: block;/* Membuat list submenu membujur kebawah */
background: blue;
}
.sbmenu a{
width: 100px;/* Mengatur lebar <a> submenu sebesar 100 pixel */
}
.sbmenu2,.sbmenu3{/* CSS properti dari Submenu2 dan Submenu3 */
margin: 0px;
padding:0px;
position:absolute;
left:100%;/* Memindahkan posisi dari Submenu 2 atau 3 ke posisi paling kanan dari submenu sebelumnya */
display: none;/* Tidak menampilkan Submenu 2 atau 3*/
}
.sbmenu li:hover .sbmenu2, .sbmenu2 li:hover .sbmenu3{/* Hover disini memberikan pengaruh terhadap Submenu2 dan Submenu3 pada saat kursor mengarah ke <li> yang memiliki Submenu 2 dan 3 */
display: block;/* Menampilkan Submenu 2 atau 3*/
}
- Save file HTML dan CSS, atau lihat pada tampilan editor maka tampilannya akan seperti dibawah ini.
Nah, Demikianlah tutorial atau belajar membuat menu menyamping dengan Submenu Drop Down bercabang ini Saya buat, semoga ini dapat bermanfaat. Jika ada kesalahan atau kekurangan pada artikel ini Saya mohon maaf, Terima Kasih telah berkunjung.
Tidak ada komentar:
Posting Komentar