Cara Membuat Responsive Bootstrap Dropdown Menu

By
membuat responsive dropdown menu dengan bootstrap
Gambar di atas merupakan contoh dari hasil membuat responsive dropdown menu dengan bootstrap. Penambahan kata responsive hanya penegasan dan memperjelas bahwa menu yang akan dibuat responsive, karena bootstrap itu sendiri sebenarnya sudah responsive. Untuk membuat menu dropdown dengan bootstrap pertama siapkan ketiga file berikut yang terdiri dari javascript dan css :

 <!-- www.bungdus.com -->  
 <link href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css' rel='stylesheet'/>  
 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>  
 <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'/>  
 <!-- www.bungdus.com -->  

simpan file di atas ke dalam stuktur html tepat di atas kode </head>. Jika menggunakan blogspot maka input melalui menu template lalu edit HTML.

script bootstrap menu navigasi

Langkah selanjutnya adalah membuat menu. Copy kode yang ada di bawah berikut dan simpan di dalam HTML di bagian menu akan diletakkan. Jika menggunakan blogger dapat melalui template lalu edit HTML dan lompati widget ke bagian header, jika ingin melatakkan di bawah header maka pasang kode dibawah header begitu juga sebaliknya jika ingin di atas header maka pasang kode di atas header.

html bootstrap menu navigasi

Karena masing-masing template memiliki struktur yang berbeda, atau untuk lebih mudah bisa juga melalui widget. Masuk ke layout / tata letak, tambahkan gadget pada bagian header, lalu cari HTML/Javascript dan tambahkan, lalu copy dan paste kode di bawah berikut.

 <!--mulai menu www.bungdus.com-->  
  <nav class="navbar navbar-inverse">  
  <div class="container-fluid">  
   <div class="navbar-header">  
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">  
     <span class="icon-bar"></span>  
     <span class="icon-bar"></span>  
     <span class="icon-bar"></span>  
    </button>  
    <a class="navbar-brand" href="#">WebSiteName</a>  
   </div>  
   <div class="collapse navbar-collapse" id="myNavbar">  
    <ul class="nav navbar-nav">  
     <li class="active"><a href="#">Home</a></li>  
     <li><a href="#">Page 1</a></li>  
     <li><a href="#">Page 2</a></li>  
     <li><a href="#">Page 3</a></li>  
    </ul>  
    <ul class="nav navbar-nav navbar-right">  
     <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>  
     <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>  
    </ul>  
   </div>  
  </div>  
 </nav>  
 <!--akhir menu www.bungdus.com-->  

Selanjutnya ganti atau sesuaikan list menu di atas dengan kategori, tag, atau label yang ingin kita tampilkan. Setelah di save, kembali ke template dan pastikan template seluler menggunakan template custom atau khusus.
pengaturan template seluler khusus atau custom

Selanjutnya lakukan test responsive website atau blog, untuk melihat apakah menu bootstrap yang dipasang berhasil dengan baik.
Demikian cara membuat responsive dropdown menu navigasi menggunakan bootstrap, jangan lupa klik tombol berbagi dan follow kami untuk mendapatkan update lainya.

3 comments:

Terbaru