Bagaimana Cara Membuat Menu Dropdown Sederhana

Hallo kawan, dropdown menu memang sering digunakan oleh blogger untuk diletakkan di navigasi blog. Dropdown ini berguna agar menu pada pilihan dinavigasi mempunyai "Anak" sehingga menu dinavigasi bisa lebih banyak dan juga hemat tempat. Lalu bagaimana cara membuat menu dropdown di template blogger.

Berikut ini kami menyediakn referensi membuat menu dropdown yang bisa ditempatkan di template kawan, berikut point-point yang ada pada artikel ini.

Cara Membuat Menu Dropdown Navigasi

Adapun beberapa point-point cara membuat menu dropdown navigasi ini sebagai berikut.

Membuat file HTML
Konsep CSS dropdown menu
Penerapan kode CSS ke HTML
Melembutkan dropdown menu

Mari kita bahas masing-masing point-point di atas satu persatu agar lebih di mengerti.

Membuat file HTML

Hal yang pertama kita harus membuat sebuah file dengan nama file index.html atau anda bisa memakai website yang akan buatkan navigasi dropdown-nya. Silahkan copy kode berikut dan paste ke file index.html.

Kode index.html

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Membuat Dropdown menu navigasi - www.pemulabelajar.com</title>
</head>
<body>
<div class="navigasi">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Drop 1</a>
      <ul>
        <li><a href="#">Menu list 1</a></li>
        <li><a href="#">Menu list 2</a></li>
      </ul>
      </li>
    </ul>
  </nav>
</div>
</body>
</html>

Coba simpan dan jalankan script tersebut.

Konsep CSS dropdown menu

Setelah anda jalankan dari script di atas maka akan ada bullets di sisi kiri dari tulisan, selanjutnya langkah yang harus kita lakukan adalah menghilangkan bullets dan menjadikannya berjejer horizontal.
Buatlah sebuah file css dengan nama styles.css dan kita buat konsep mengubah code <ul> dan <li> berikut beberapa penjelasan dari script css.

Mengubah link pada navigasi

Kita ubah link pada navigasi agar tidak ada underline atau garis bawah pada link di navigasi.

hilangkan underline

nav a:hover {
text-decoration: none;
}

Hapus Bullets

hapus bullets

nav ul {
list-style: none;
}

Buat navigasi horizontal

nav ul li {
float: left;
padding: 5px 20px;
}

Background saat cursor menyentuh menu

nav ul li:hover {
background-color: #2980b9;
}

Hilangkan menu anak bullets

nav ul li ul {
    display: none;
    list-style: none;
    margin-left: -20px;
}

Buat menu anak bullets vertikal

nav ul li ul li {
    float: none;
    padding: 5px 20px;
    margin-left: -40px;
}

Ubah background anak bullets saat cursor menyentuh

nav ul li ul li:hover {
background-color: #2980b9;
}

Tampilkan anak bullets saat cursor menyentuh menu utama

nav ul li:hover > ul {
    display: block;
    position: absolute;
    background: #ddd;
}

Ubah warna link saat cursor menyentuh

nav ul li:hover > a {
color: #fff;
}

Kode lengkap

Berikut kode lengkap dari penjelasan css diatas.

Kode lengkap

nav a:hover {
    text-decoration: none;
}
nav ul {
    list-style: none;
}
nav ul li {
    float: left;
    padding: 5px 20px;
}
nav ul li:hover {
    background-color: #2980b9;
}
nav ul li ul {
    display: none;
    list-style: none;
    margin-left: -20px;
}
nav ul li ul li {
    float: none;
    padding: 5px 20px;
    margin-left: -40px;
}
nav ul li ul li:hover {
    background-color: #2980b9;
}
nav ul li:hover > ul {
    display: block;
    position: absolute;
    background: #ddd;
}
nav ul li:hover > a {
    color: #fff;
}

Penerapan kode CSS ke HTML

Untuk penerapan kode css ke html maksudnya disini adalah kita memanggil file styles.css untuk bisa mengisi tampilan di index.html. Berikut kodenya dan letakkan di atas kode </head> jika sudah ada anda tidak perlu meletakkannya lagi.

Melembutkan dropdown menu

Jika anda sudah berhasil membuat dropdown menu navigasi maka anda tentu akan melihat hovernya (saat cursor menyentuh) agak sedikit kaku tidak ada kelembutan dari css tersebut. Sekarang kita coba untuk mengubah css hovernya menjadi lebih lembut. berikut scriptnya dan letakan di styles.css pada nav ul li:hover dan nav ul li ul li:hover.

  -webkit-transition: all 0.8s ease-out;
  -moz-transition: all 0.8s ease-out;
  -ms-transition: all 0.8s ease-out;
  -o-transition: all 0.8s ease-out;
  transition: all 0.8s ease-out;

Jika anda kesulitan dalam penempatannya anda bisa menggantinya dengan script berikut.

nav ul li:hover {
    background-color: #2980b9;
  -webkit-transition: all 0.8s ease-out;
  -moz-transition: all 0.8s ease-out;
  -ms-transition: all 0.8s ease-out;
  -o-transition: all 0.8s ease-out;
  transition: all 0.8s ease-out;
}

nav ul li ul li:hover {
    background-color: #2980b9;
  -webkit-transition: all 0.8s ease-out;
  -moz-transition: all 0.8s ease-out;
  -ms-transition: all 0.8s ease-out;
  -o-transition: all 0.8s ease-out;
  transition: all 0.8s ease-out;
}

Dan lihatlah ada sedikit ke-lembutan pada menu navigasi dropdown-nya. Untuk script lengkapnya anda bisa lihat di bawah ini.

Kode lengkap index.html

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Membuat Dropdown menu navigasi - www.pemulabelajar.com</title>
  <link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<div class="navigasi">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Drop 1</a>
      <ul>
        <li><a href="#">Menu list 1</a></li>
        <li><a href="#">Menu list 2</a></li>
      </ul>
      </li>
    </ul>
  </nav>
</div>
</body>
</html>

Kode lengkap styles.css

nav a:hover {
    text-decoration: none;
}
nav ul {
    list-style: none;
}
nav ul li {
    float: left;
    padding: 5px 20px;
}
nav ul li:hover {
    background-color: #2980b9;
  -webkit-transition: all 0.8s ease-out;
  -moz-transition: all 0.8s ease-out;
  -ms-transition: all 0.8s ease-out;
  -o-transition: all 0.8s ease-out;
  transition: all 0.8s ease-out;
}
nav ul li ul {
    display: none;
    list-style: none;
    margin-left: -20px;
}
nav ul li ul li {
    float: none;
    padding: 5px 20px;
    margin-left: -40px;
}
nav ul li ul li:hover {
    background-color: #2980b9;
  -webkit-transition: all 0.8s ease-out;
  -moz-transition: all 0.8s ease-out;
  -ms-transition: all 0.8s ease-out;
  -o-transition: all 0.8s ease-out;
  transition: all 0.8s ease-out;
}
nav ul li:hover > ul {
    display: block;
    position: absolute;
    background: #ddd;
}
nav ul li:hover > a {
    color: #fff;
}

Semoga artikel toturial CSS tentang Tutorial CSS - Membuat Dropdown Menu Navigasi dapat bermanfaat bagi anda yang sedang belajar tutorial web dan dapat mengembangkan lagi website / blog anda. Jika terdapat kekurangan saya minta maaf dan jika anda ada sedikit pertanyaan anda bisa menanyakannya di kolom komentar, anda juga dapat membagikan artikel ini keteman-teman anda dengan cara meng-klik button pada menu bagikan dibawah. Salam dan Terima kasih :)

Belajar Power Design - Cara Membuat Project Menjadi Gambar

Cara Membuat Project Menjadi Gambar - Artikel ini akan membahas sedikit tentang Power Design dan Bagaimana merubah project power design menjadi sebuah gambar . Masalah ini sering dialami oleh pemula khususnya saya yang bingung bagaimana merubah sebuah project power design menjadi berupa gambar agar mudah dimuat ke sebuah karya tulis. Baca juga : Membuat Teks Rotasi Dengan Photoshop Apa itu Power Design ? Power design adalah sebuah paket program desain tools yang digunakan untuk membuat Visualisasi, dokumentasi dan mendesain suatu sistem perangkat lunak. Paket ini meliputi Process analyst Model (PAM), Data architect tools, Aplication modeler tools, dan Metawork tools. Power Design ini juga sering digunakan menjadi software untuk membuat Diagram Flow Diagram atau DFD . Bagaimana Merubah Project Menjadi Gambar ? Untuk merubah sebuah project pada power design menjadi sebuah gambar cukup mudah. Secara singkatnya kawan cukup memilih semua object yang akan dijadikan sebuah gambar, s...

Baca selengkapnya

Pemula Belajar

Cari Blog Ini