Cara Membuat Menu Navigasi Simple Dropdown Di Blog

komputerdia.com - Diartikel kali ini, saya masih membahas tentang pembuatan menu bar atau menu navigasi pada blogger. Untuk mempersingkat waktu pembahasan silahkan kalian perhatikan langkah-langkah dibawah ini :

Baca Juga :

• Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog .
• Cara Membuat Menu Bar Responsive Blogger Tanpa Edit Html .
• Cara Lengkap Membuat Blog Terbaru Disertai Dengan Gambar .

Membuat Menu Navigasi Simple Dropdown

1. Menu Bar Simple Blue

• Langkah pertama silahkan kalian masuk ke akun blogger 
• Masuk ke menu Layout atau Tata Letak 
• Pilih menu Tambahkan Gadget atau Add Widget dan pilih menu Html/JavaScript , dan tempelkan kode dibawah ini tepat di kolom atau bagian konten
• Untuk bagian judul biarkan kosong
• Setelah kalian atur, silahkan tekan tombol simpan .

.navmenu {
  width: 100%;
  margin: 0px auto;
  display: block;
  position: relative;
  background-color: #1C90F3;
}

nav.navmenu ul {
  list-style: none;
  position: relative;
  width: 80%;
  box-sizing: border-box;
  background: #1C90F3;
  margin: 0px auto;
  padding: 0px;
}

nav.navmenu li {
  display: inline-block;
  position: relative
}

nav.navmenu li a {
  padding: 10px 15px;
  text-decoration: none;
  color: #FFF;
  display: block;
  box-sizing: border-box;
}

nav.navmenu li a:hover {
  background-color: #1789EA
}

<nav class='navmenu'>
  <ul>
  <li><a href="#"><b><i class="fa fa-home" aria-hidden="true"></i>&nbsp; Home</b></a></li>
  <li><a href="#"><b><i class="fa fa-sitemap" aria-hidden="true"></i>&nbsp;Networking</b></a></li>
  <li><a href="#"><b><i class="fa fa-windows" aria-hidden="true"></i>&nbsp;Windows</b></a></li>
  <li><a href="#"><b><i class="fa fa-android" aria-hidden="true"></i>&nbsp;Android</b></a></li>
  <li><a href="#"><b><i class="fa fa-linux" aria-hidden="true"></i>&nbsp;Linux</b></a></li>
  </ul>
</nav>

2. Menu Bar Simple Blue DropDown

• Langkah pertama silahkan kalian masuk ke akun blogger 
• Masuk ke menu Layout atau Tata Letak 
• Pilih menu Tambahkan Gadget atau Add Widget dan pilih menu Html/JavaScript , dan tempelkan kode dibawah ini tepat di kolom atau bagian konten
• Untuk bagian judul biarkan kosong
• Setelah kalian atur, silahkan tekan tombol simpan .

.navmenu {
  width: 100%;
  margin: 0px auto;
  display: block;
  position: relative;
  background-color: #1C90F3;
}

nav.navmenu ul {
  list-style: none;
  position: relative;
  width: 80%;
  box-sizing: border-box;
  background: #1C90F3;
  margin: 0px auto;
  padding: 0px;
}

nav.navmenu li {
  display: inline-block;
  position: relative
}

nav.navmenu li a {
  padding: 10px 15px;
  text-decoration: none;
  color: #FFF;
  display: block;
  box-sizing: border-box;
}

nav.navmenu li a:hover {
  background-color: #1789EA
}
nav.navmenu li.submenu ul.dropdown {
  display: none;
  padding: 0px;
  position: absolute;
}

nav.navmenu li.submenu:hover ul.dropdown {
  display: block;
  z-index:9
}

nav.navmenu li.submenu ul.dropdown li {
  display: block;
  width: 200px;
  background: #1C90F3
}

<nav class='navmenu'>
  <ul>
  <li><a href="#"><b><i class="fa fa-home" aria-hidden="true"></i>&nbsp; Home</b></a></li>
  <li><a href="#"><b><i class="fa fa-sitemap" aria-hidden="true"></i>&nbsp;Networking</b></a></li>
  <li><a href="#"><b><i class="fa fa-windows" aria-hidden="true"></i>&nbsp;Windows</b></a></li>
  <li class='submenu'><a href="#"><i class="fa fa-plus-square" aria-hidden="true"></i>&nbsp;<b>Menu Dropdown</b></a>
    <ul class='dropdown'>
        <li><a href="#"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i>&nbsp;<b> Dropdown 1</b></a></li>
        <li><a href="#"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i>&nbsp;<b>Dropdown 2</b></a></li>
        <li><a href="#"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i>&nbsp;<b>Dropdown 3</b></a></li>
    </ul>
</li>
  <li><a href="#"><b><i class="fa fa-android" aria-hidden="true"></i>&nbsp;Android</b></a></li>
  <li><a href="#"><b><i class="fa fa-linux" aria-hidden="true"></i>&nbsp;Linux</b></a></li>
  </ul>
</nav>

• Sekian, semoga artikel ini bisa bermanfaat untuk kalian semuanya
• Jika ada yang ditanyakan, silahkan masukkan komentar kalian di kolom komentar yang telah saya sediakan diakhir postingan ini

Sumber Referensi : https://mastamvan.blogspot.co.id/

Share this post