Beranda
Blogger
Coding

Membuat Menu Dropdown Keren Dengan CSS

Mudahnya membuat Menu Dropdown website dengan pure CSS Only
Membuat Menu Dropdown

Hallo. Menu navigasi merupakan sebuah kewajiban yang harus ada dalam sebuah website. Dengan menu pengunjung dapat tahu konten apa saja yang disajikan, atau memberikan navigasi dari dan ke berbagai artikel halaman website.

Menu navigasi pada blog contohnya, jika blog tanpa menu navigasi, pengunjung akan kesulitan untuk berpindah ke halaman artikel, atau dengan menu juga kalian bisa membuat kategori artikel pada sebuah website. Menu navigasi ini biasanya berisi informasi kategori konten artikel pada sebuah website.

Letak menu navigasi biasanya disimpan dibagian paling atas sebuah website, atau tidak jarang menempatkan menu di sidebar website juga bisa. Namun intinya adalah letak menu navigasi haruslah mudah dilihat oleh pengunjung.

Karena itu tampilan menu navigasi yang menarik dan mencolok sangat baik digunakan pada sebuah website.

1. Style Menu Navigasi Dropdown Horizontal

Style navigasi ada bermacam-macam, contohnya style navbar fixed, navbar link, navbar dropdown, navbar vertical dan navbar horizontal. Jenis navigasi pada blog misalnya biasanya menggunakan gabungan horizontal, dan dropdown untuk tampilan layar PC, sedangkan untuk layar mobile digunakan tampilan vertical, atau humberger.

Untuk kali ini aku memberi tutorial membuat menu horizonntal dengan dropdown. Sedangkan sisanya aku akan buat lain kali.

A. Navigasi Dropdown

Menu dropdown ini bisa dipakai untuk tampilan PC ataupun mobile yang mana cukup mudah membuat menu dropdown. Disini akan diberikan beberapa cara emmbuat menu dropdown baik dengan CSS3, jquery, bootstrap atau javascript.

Menu dropdown sendiri artinya menu yang jatuh kebawah, menu ini biasanya dipasangkan dengan CSS pseudo-class. Menu ini sangat baik digunakan pada mobile yang mana spacenya tidak membuat tampilan yang jelek.

Sebelum membuat navigasi dropdown, ada baiknya kita membuat contoh dropdown terlebih dahulu. Berikut ini source kodenya.


  
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dropdown Text Kencsripts</title>
    <style>
      .dropkens {
        position: relative;
        display: inline-block;
      }

      .kens-drop {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        padding: 12px 16px;
        z-index: 1;
      }

      .dropkens:hover .kens-drop {
        display: block;
      }
    </style>
  </head>
  <bbody>

    <div class="dropkens">
      <span>KLIK INI</span>
      <div class="kens-drop">
        <p>Ciluk Bakekok!!!</p>
      </div>
    </div> 
  </bbody>
  </html>

Penjelasan Singkat cara kerja dropdown

1. Perhatikan class CSS .kens-drop dengan atribut CSS display:none;, dengan pengaturan CSS ini akan membuat isi dari class .kens-drop menjadi tersembunyi.

2. Perhatikan class CSS .dropkens:hover .kens-drop dengan nilai atribute CSS display:block;, artinya saat kedaan hover pada class .dropkens, class CSS .kens-drop akan muncul dengan atribut display:block;.

Untuk lebih baik memahami cara kerja dropdown HTML CSS, kalian gunakan inspeksi element pada browser PC atau lihat demo berikut ini.

Demo

a. Menu Dropdown dengan CSS3

CSS merupakan kode yang digunakan untuk menghias sebuah markup HTML. Namun sejatinya CSS lebih dari itu, kalian bisa membuat navigasi dropdown dengan CSS3.

Berikut ini source kode dropdown HTML dan CSS.


  
  <!DOCTYPE html>
  <html>
  <title>Web K-e-n-s-c-r-i-p-t-s Dropdown</title>
  <head>
      <style>
          #menu-kun{
              margin: 40px auto;
              padding: 0px; 
              width: 100%;
          }

          #menu-kun li{    
              float: left; 
              width: 25%;    
              padding: 15px 0px;    
              background-color: darkgoldenrod;    
              text-align: center;    
              color: white;    
              position: relative;    
              list-style: none; 
          } 

          #menu-kun li a{
              color: white;
              text-decoration: none;
          }

          #menu-kun ul li{    
              float: left; 
              width: 100%;    
              padding: 10px 30px;
              background-color: darkseagreen;    
              text-align: center;    
              color: white;    
              position: relative;    
              list-style: none; 
          } 

          #menu-kun li:hover{
              background-color: darkred; 
              cursor: pointer; 
          } 

          #menu-kun ul{
              position: absolute;
              padding: 0px;
              top: 100%; 
              left: 0px;
              display: none; 
          } 

          #menu-kun li:hover ul{
              display: block; 
          }
      </style>
  </head>
  <body>
      <ul id="menu-kun">        
          <li><a href="#">News</a></li>        
          <li>Games            
              <ul>                
                  <li><a href="#">Android</a></li>                
                  <li><a href="#">Komputer</a></li>
              </ul>
          </li>        
          <li><a href="#">Tech</a></li>
          <li><a href="#">Internet</a></li>
      </ul> 
  </body>
  </html>

Pensjelasan Untuk kode menu dropsdown diatas

1. float: left; membuat list menjadi horizontal

2. #menu-kun li:hover Adalah keadaan hover dari tag li

3. top: 100%; Membuat posisi dari <ul> tepat berada di bawah list dari <ul id="menu-kun">

4. display: none; Menghilangkan <ul> dari list <ul> games

5. display: block; Untuk menampilkan list <ul> yang di buat menghilang dengan display: none;

Baca Juga : Membuat tombol hover CSS3 Only

Demo 1

b. Menu Dropdown dengan struktur kode HTML berbeda.

Setelah memahami penjelasan dropdown menu diatas, selanjutnya ada cara lain membuat menu dropdown.

Baca :Membuat tombol 3D hanya CSS

Meskipun dengan stuktur kode HTML menu dropdown yang hampir mirip dengan diatas, namun penempatan CSS dan atributnya berbeda.

Berkit ini source kode HTML dan CSS serta demonya.



<!DOCTYPE html>
<html>
<title>Web K-e-n-s-c-r-i-p-t-s Dropdown</title>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: darkslategrey;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .ken-drop:hover .dropbtn {
    background-color: darkviolet;
}

li.ken-drop {
    display: inline-block;
}

.ken-contendrop {
    display: none;
    position: absolute;
    background-color: darkgoldenrod;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.ken-contendrop a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.ken-contendrop a:hover {background-color: #f1f1f1}

.ken-drop:hover .ken-contendrop {
    display: block;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="ken-drop">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="ken-contendrop">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
  <li><a href="#">LINK</a></li>
</ul>

</body>
</html>

Cara kerjanya masih sama seperti dropdown pertama.

Demo 2

c. Membuat Mega menu dropdown

Mega menu dropdown merupakan menu dengan ukuran besar. Biasanya menu ini dibuat untuk blog niche megazine, berita ataupun lainnya.

Dengan mega menu kalian bisa menempatkan konten artikel terpopuler kalian.

Berikut ini source kode mega menu dropdown.

Baca Juga : Text pelangi dengan CSS3 Only



<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
    }

    .kens-navbar {
      overflow: hidden;
      background-color: darkgoldenrod;
      font-family: Arial, Helvetica, sans-serif;
    }

    .kens-navbar a {
      float: left;
      font-size: 16px;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    .dropdown-kens {
      float: left;
      overflow: hidden;
    }

    .dropdown-kens .dropbtn {
      font-size: 16px;  
      border: none;
      outline: none;
      color: white;
      padding: 14px 16px;
      background-color: inherit;
      font: inherit;
      margin: 0;
    }

    .kens-navbar a:hover, .dropdown-kens:hover .dropbtn {
      background-color: darkslategrey;
    }

    .kens-drop {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      width: 100%;
      left: 0;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .kens-drop .header-kens {
      background: darkslategrey;
      padding: 16px;
      color: white;
    }

    .dropdown-kens:hover .kens-drop {
      display: block;
    }

    /* Membuat 3 kolom column-kensriptss dengan float mengikuti*/
    .column-kensripts {
      float: left;
      width: 33.33%;
      padding: 10px;
      background-color: darkkhaki;
      height: 250px;
    }

    .column-kensripts a {
      float: none;
      color: black;
      padding: 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }

    .column-kensripts a:hover {
      background-color: #3ea858;
    }

    /* Clear floats setelah column-kensriptss */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }

    /* Responsive layout */
    @media screen and (max-width: 600px) {
      .column-kensripts {
        width: 100%;
        height: auto;
      }
    }
  </style>
</head>
<body>

  <div class="kens-navbar">
    <a href="#home">Home</a>
    <a href="#news">News</a>
    <div class="dropdown-kens">
      <button class="dropbtn">Dropdown
        <i class="fa fa-caret-down"></i>
      </button>
      <div class="kens-drop">
        <div class="header-kens">
          <h2>Mega Menu</h2>
        </div>   
        <div class="row">
          <div class="column-kensripts">
            <h3>Category 1</h3>
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
          </div>
          <div class="column-kensripts">
            <h3>Category 2</h3>
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
          </div>
          <div class="column-kensripts">
            <h3>Category 3</h3>
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
          </div>
        </div>
      </div>
    </div> 
  </div>

</body>
</html>

Bagaiman kerenkan? Berikut ini untuk demonya.

Demo Mega menu

Itulah Beberapa menu dropdown Horizontal untuk blogger, kalian bisa mengcustom menu blogger dengan menu dropdown diatas, tetap Backup terlebih dahulu sebelum mengcustom menu blogger.

Sekian bye.

Kenny is my name, someone who is quite calm with a charming smile. Don't bother me if you don't want to see the devil. Don't act like you're innocent.

2 komentar

  1. Mantap
  2. Ohh jd seperti itu yaa gan?thanks ya
1. Dilarang komentar spam
2. Dilarang berkomentar dengan link aktif
3. Dilarang menghina agama, antar manusia, suku, bangsa, dan budaya
4. Dilarang komentar diluar pembahasan blog
5. Berkomentarlah dengan bijak
© ‧ Kenscripts. All rights reserved. Developed by Jago Desain