MENU DROPDOWN BERTINGKAT DENGAN JQUERY TOGGLE

Pengkodean Script Jquery yang sangat simple membuat saya menemukan cara membuat navigasi dropdown yang menggunakan submenu. Sebelumnya saya mencoba mengandalkan Script CSS untuk membuat tampilan menu dropdown, alhasil tampilan navigasi jadi berantakan, ada yang tertimpa dengan menu di bawahnya, ada link yang tidak aktif, dan sebagainya. Yang pasti saya tidak menemukan flow chart (aliran logika) di sini. Hanya mengutak atik kode CSS lalu coba coba semua atribut, tetap saja tidak menemukan yang saya mau. Bagi pengguna CSS yang sudah mahir mungkin itu hal yang mudah baginya, tapi saya perhatikan script yang dihasilkan terlalu panjang dan susah dimengerti bagi pemula. Kalau untuk belajar ya dari dasar dulu, dari yang sederhana agar mudah dipahami.

Langkah membuat navigasi bertingkat dengan submenu adalah :

1. Membuat list menu dropdown bertingkat dengan HTML

2. Memberi nama id pada tombol dan memberi id pada properti yang akan ditampilkan dan dihilangkan (show/hide).

Dengan catatan, setiap id dalam satu halaman web harus unik, tidak boleh ganda atau nama sama. Jika terjadi demikian maka Jquery tidak akan bekerja sama sekali.

3. Pada id yang akan di hide untuk tampilan sebelum klik disisipkan script display: none

4. Pada bagian kepala HTML sisipkan pustaka dari Jquery <head> ... </head>

5. Di bawah menu sisipkan script perintah Jquery toggle.

Tampilan :

Kode :

  

<head>



<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  </head>

  <body>
  <input id="tombol" type="button" value="MENU" /> 
  <ul id="navfull" style="display: none;">
    <li> Home</li>
    <li id="tombolmapel"> Kategori </li>
           <ul id="mapel" style="display: none;">
             <li>  Komputer  </li>
             <li> Biologi  </li>
             <li> Olahraga  </li>
            </ul>
    <li id="tombolkontak"> Kontak </li>
             <ul id="kontak" style="display: none;">
               <li> Whatshapp </li>
               <li>  Email </li>
               </ul>
    </ul>
  
   <script> 
$( "#tombol" ).click(function() { 
  $( "#navfull" ).toggle(); }); 

$( "#tombolmapel" ).click(function() { 
  $( "#mapel" ).toggle(); }); 
       
$( "#tombolkontak" ).click(function() { 
  $( "#kontak" ).toggle(); }); 
</script> 
    
    </body>

Itulah contoh sederhana navigasi dropdown vertikal bertingkat. Untuk mempercantik tampilan tinggal beri CSS. Demo tampilan silakan lihat navigasi blog shekumbank.blogspot.com , kira-kira seperti contoh di bawah.

Kode CSS :

<head>
<meta charset="UTF-8">
<title> Contoh CSS Navigasi Dropdown Bertingkat </title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<style type='text/css'>

.nav{
    border:1px solid #ccc;
    border-width:1px 0;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
}
.nav li{
    display:block;
    background-color: black; 
    padding: 0px; 
    height: 40px;
    border-bottom: solid 1px white
}
  
.nav li:hover { 
background-color: turquoise; 
}
  
.nav a{
    display:inline-block;
    padding:10px;
    font-weight: bold; 
    color: white; 
    text-decoration: none;
}

/* sub navigasi */ 
  
.subnav { margin: 0; padding: 0; } 
.subnav li{ 
  background-color: white;
  border:1px solid #ccc;
  }
.subnav a{ color: black; }


  /* tampilan di desktop */

  @media (min-width:768px){
.nav li {
  display: inline-block;
  border-right: solid 1px white;
  height: 40px;
 }
 }
</style>

</head> 


<body> 
<ul class='nav'>
  <li> ... </li>
  <li> ... </li>
         <ul class='subnav'>
           <li> ... </li>
           <li> ... </li>
           </ul>
  </ul>
</body>

Blog shekumbank.blogspot.com

MENU DROPDOWN BERTINGKAT DENGAN JQUERY TOGGLE

Komentar

Posting Komentar