Cara Membuat Menu Bar Responsive Scroll Dropdown

komputerdia.com - Masih "ngulik" tentang macam-macam menu bar pada blogger, kali ini saya akan membagikan cara bagaimana membuat menu bar atau menu navigasi dropdown responsive dengan tambahan efek scroll tanpa harus menekan dan menggulir mouse.

Menu bar yang satu ini memang bisa dikategorikan ke dalam menu bar yang elegan, pasalnya penggunaan efek pada dropdown sudah tidak perlu memerlukan suatu tindakan yang harus kalian lakukan seperti menggulir atau menekan kursor mouse.

Baca Juga :

Cara Membuat Menu Bar Responsive Scroll Dropdown

Langkah - Langkah Membuat Menubar Scroll Dropdown
  • Masuk ke akun blogger kalian
  • Pilih menu template atau theme, kemudian cari kode ]]></b:skin>.
  • Letakan kode dibawah ini diatas kode ]]></b:skin> .
nav{
  width: 750px;
  margin: 1em auto;
}

ul{
  margin: 0px;
  padding: 0px;
  list-style: none;
}

ul.dropdown{ 
  position: relative; 
  width: 100%; 
}

ul.dropdown li{ 
  font-weight: bold; 
  float: left; 
  width: 180px; 
  position: relative;
  background: #ecf0f1;
}

ul.dropdown a:hover{ 
  color: #000; 
}

ul.dropdown li a { 
  display: block; 
  padding: 20px 8px;
  color: #34495e; 
  position: relative; 
  z-index: 2000; 
  text-align: center;
  text-decoration: none;
  font-weight: 300;
}

ul.dropdown li a:hover,
ul.dropdown li a.hover{ 
  background: #3498db;
  position: relative;
  color: #fff;
}


ul.dropdown ul{ 
 display: none;
 position: absolute; 
  top: 0; 
  left: 0; 
  width: 180px; 
  z-index: 1000;
}

ul.dropdown ul li { 
  font-weight: normal; 
  background: #f6f6f6; 
  color: #000; 
  border-bottom: 1px solid #ccc; 
}

ul.dropdown ul li a{ 
  display: block; 
  color: #34495e !important;
  background: #eee !important;
} 

ul.dropdown ul li a:hover{
  display: block; 
  background: #3498db !important;
  color: #fff !important;
} 

.drop > a{
  position: relative;
}

.drop > a:after{
  content:"";
  position: absolute;
  right: 10px;
  top: 40%;
  border-left: 5px solid transparent;
  border-top: 5px solid #333;
  border-right: 5px solid transparent;
  z-index: 999;
}

.drop > a:hover:after{
  content:"";
   border-left: 5px solid transparent;
  border-top: 5px solid #fff;
  border-right: 5px solid transparent;
}
  • Langkah seterusnya, kalian cari kode </head>, dan letakkan kode berikut ditas kode </head> .
<script src="https://rawgit.com/mastamvan/backup/master/menudropscroll.js" type="text/javascript"></script>
  • Selanjutnya kalian cari kode </body>, dan tempelkan kode dibawah ini tepat diatas kode </body> .
<script src="https://rawgit.com/mastamvan/backup/master/menudropscroll2.js" type="text/javascript"></script>
  • Tekan tombol simpan, untuk meyimpan setelan yang telah kalian buat.
  • Langkah terakhir silahkan kalian masuk ke menu tata letak atau layout, pilih tambahkan gadget atau add widget , dan klik pada menu Html/JavaScript .
  • Setelah itu kalian akan melihat tampilan seperti gambar dibawah ini
Cara Membuat Menu Bar Responsive Scroll Dropdown
  • Pada bagian judul biarkan saja kosong, dan pada bagian konten silahkan kalian copy kode dibawah ini dan tempelkan pada kotak konten tersebut
<nav>
<ul class="dropdown">
         <li class="drop"><a href="#">Really Tall Menu</a>
          <ul class="sub_menu">
       <li><a href="http://www.komputerdia.com/">Lorem</a></li>
       <li><a href="http://www.komputerdia.com/">Ipsum</a></li>
       <li><a href="http://www.komputerdia.com/">Dolor</a></li>
       <li><a href="http://www.komputerdia.com/">Lipsum</a></li>
       <li><a href="http://www.komputerdia.com/">Consectetur </a></li>
       <li><a href="http://www.komputerdia.com/">Duis</a></li>
       <li><a href="http://www.komputerdia.com/">Sed</a></li>
       <li><a href="http://www.komputerdia.com/">Natus</a></li>
       <li><a href="http://www.komputerdia.com/">Excepteur</a></li>
       <li><a href="http://www.komputerdia.com/">Voluptas</a></li>
       <li><a href="http://www.komputerdia.com/">Voluptate</a></li>
       <li><a href="http://www.komputerdia.com/">Malorum</a></li>
       <li><a href="http://www.komputerdia.com/">Bonorum</a></li>
       <li><a href="http://www.komputerdia.com/">Nemo</a></li>
       <li><a href="http://www.komputerdia.com/">Quisquam</a></li>
       <li><a href="http://www.komputerdia.com/">Adipisci </a></li>
       <li><a href="http://www.komputerdia.com/">Excepteur</a></li>
       <li><a href="http://www.komputerdia.com/">Consectetur </a></li>
       <li><a href="http://www.komputerdia.com/">Duis</a></li>
       <li><a href="http://www.komputerdia.com/">Voluptate</a></li>
       <li><a href="http://www.komputerdia.com/">Ipsum</a></li>
       <li><a href="http://www.komputerdia.com/">Dolor</a></li>
       <li><a href="http://www.komputerdia.com/">Lipsum</a></li>
          </ul>
         </li>
         <li class="drop"><a href="#">Kinda Tall Menu</a>
          <ul class="sub_menu">
           <li><a href="#">Lorem</a></li>
       <li><a href="http://www.komputerdia.com/">Ipsum</a></li>
       <li><a href="http://www.komputerdia.com/">Dolor</a></li>
       <li><a href="http://www.komputerdia.com/">Lipsum</a></li>
       <li><a href="http://www.komputerdia.com/">Consectetur </a></li>
       <li><a href="http://www.komputerdia.com/">Duis</a></li>
       <li><a href="http://www.komputerdia.com/">Sed</a></li>
       <li><a href="http://www.komputerdia.com/">Natus</a></li>
       <li><a href="http://www.komputerdia.com/">Excepteur</a></li>
       <li><a href="http://www.komputerdia.com/">Voluptas</a></li>
       <li><a href="http://www.komputerdia.com/">Voluptate</a></li>
       <li><a href="http://www.komputerdia.com/">Malorum</a></li>
       <li><a href="http://www.komputerdia.com/">Bonorum</a></li>
       <li><a href="http://www.komputerdia.com/">Nemo</a></li>
       <li><a href="http://www.komputerdia.com/">Quisquam</a></li>
       
          </ul>
         </li>
         <li class="drop"><a href="#">Average Menu</a>
          <ul class="sub_menu">
           <li><a href="#">Lorem</a></li>
       <li><a href="http://www.komputerdia.com/">Ipsum</a></li>
       <li><a href="http://www.komputerdia.com/">Dolor</a></li>
       <li><a href="http://www.komputerdia.com/">Lipsum</a></li>
       <li><a href="http://www.komputerdia.com/">Consectetur </a></li>
          </ul>
         </li>
         <li><a href="http://www.komputerdia.com/">No Menu</a>
         </li>
        </ul>
</nav> 
  • Silahkan kalian ganti kode yang berwarna Merah , dengan alamt url yang akan kalian tuju
  • Setelah semua pengaturan telah kalian atur, silahkan kalian tekan tombol simpan untuk mengakhiri langkah ini
  • Silahkan kalian lihat perubahan pada blog kalian .
  • Semoga bermanfaat untuk kalian semuanya
  • Jika kalian berhasil maka kalian akan melihat menu bar seperti pada contoh dibawah ini
Cara Membuat Menu Bar Responsive Scroll Dropdown


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

Berlangganan Artikel terbaru (free):

Post a Comment