Cara Membuat Menu Dropdown Sederhana Untuk Pemula

Cara Membuat Menu Dropdown Sederhana Untuk Pemula Cara Membuat Menu Dropdown Sederhana Untuk Pemula - gimana sih , cara membuat menu dropdown ? kok saya sering lihat di bagian menu navigasi kok pada keren-keren !!!.tenang, kali ini Tech Ku akan membahas cara membuat menu dropdown .

Menu dropdown digunakan saat anda mempunyai sebuah menu namun didalam menu tersebut terdapat sebuah opsi lain yang masih mempunyai kaitan dengan menu atau induk diatasnya.

Contoh menu Dropdown

menu dropdown sendiri, menggunakan JavaScript atau JQuery. namun, disini saya menggunakan JQuery. yang mana JQuery merupakan library atau sebuah bahasa hasil perkembangan dari JavaScript. oke ,langsung kita bahas saja,bagaimana sih cara membuat menu dropdown ?

buat kerangka HTML Dasar.saya akan berikan contoh : <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="css/style.css" rel="stylesheet"> </head> <body> </body> </html>
lalu,hubungkan script anda dengan library JQuery dengan cara paste kode dibawah ini ,diantara tag head <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Buatlah isi dari tag Body dengan komponen dropdown,saya akan beri contoh untuk belajar,yaitu,dengan copy dan paste kode di bawah ini di antara tag body pada html <div class="menu"> <div id="item"> Menu</div> <div id="submenu"> <a href="#">Katalog</a> <a href="#">FAQ</a> <a href="#">Contact</a> </div> </div>
lalu,buatlah style dari kode css. seauai selera anda... saya akan beri contoh : <style> #item { background-color: slateblue; border: 3px #000000 solid; padding: 16px; font-size: 16px; cursor: pointer; } #item:hover, #item:focus { background-color: cadetblue; } #submenu { background-color: #008000; border: 1px black solid; display: none; position: absolute; width: auto; } #submenu a { color: white; padding: 12px 16px; text-decoration: none; font-family: Verdana; display: block; } #submenu a:hover { background-color: chartreuse; } .menu { position: relative; display: inline-block; } </style>
yang terakhir copy paste kode/script JQuery dibawah ini dan letakkan persis diatas tag </body> <script> $(document).ready(function() { $('#item').click(function() { $('#submenu').slideToggle(2000); }) }) </script>

Tutorial ini hanya ditujukan bagi orang yang paham bahasa pemrograman WEB, namun bingung cara mengimplementasikan kode-kode yang ia hafal/kuasai.jika anda tertarik ingin belajar bahasa pemrograman WEB,anda bisa cari situs belajar bahasa pemrograman gratis diinternet,atau bisa juga di Petualang Tekno.Jadi, dapat disimpulkan bahwa Tech Ku merupakan situs yang membahas bagaimana mengimplementasikan kode-kode program yang dirasa susah untuk diterapkan.
Jika anda bingung ,jangan sungkan untuk bertanya.Jika anda merasa postingan ini bermanfaat ,anda bisa share,dan jika tak ingin ketinggalan update informasi dari Tech anda bisa Subscribe.

Share Artikel ini agar bermanfaat bagi orang lain
Sekian mengenai Cara Membuat Menu Dropdown Sederhana Untuk Pemula kurang lebihnya mohon dimaafkan dan semoga bermanfaat.
Jika kalian masih bingung bisa berkomentar dibawah.

Tech-Ku

Tuesday, 15 May 2018

Cara Membuat Menu Dropdown Sederhana Untuk Pemula

Updates

Tech-Ku

Tuesday, 15 May 2018

Cara Membuat Menu Dropdown Sederhana Untuk Pemula

Related

Updates