Tutorial Bootstrap : Cara membuat dropdown menu

Pembuatan menu merupakan hal yang paling utama dalam pengaturan sebuah navigasi pada sebuah website. Penyajian menu yang menarik akan memperindah tampilan website tersebut (The menu creation is the most important thing in arranging a navigation on website. The presentation of interesting menu will beautify the appearance of website).

Pada edisi tutorial sebelumnya, kita telah membahas beberapa tutorial navigation bar tentang ( In previous tutorial, we have learned the tutorial navigation baru about):

• Merubah ukuran image navbar brand (Change image size of navbar brand)
• Merubah warna navigation bar (Change the color of navigation bar)

Dropdown menu pada bootstrap berada pada navigation bar. Pada tutorial ini, kita akan melihat perbedaan Dropdown menu pada Percobaan 1 dan Percobaan 2 (Dropdown menu on Bootstrap located on navigation bar. In this tutorial, we'll see the difference Dropdown menu on Experiment 1 and Experiment 2).

Percobaan 1 (Experiment 1)

Buatlah sebuah file yang diberinama index.html yang berisikan code seperti dibawah ini (Create a file index.html and copy script below ) :

<div class="navbar navbar-inverse">
 <div class="container">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
   </button>
   <a class="navbar-brand" href="index.html">
     <img src="assets/images/tk_logo5.png" alt="Techro HTML5 template"></a>
  </div>
  <div>
   <ul class="nav navbar-nav navbar-right">
    <li class="c1 active"><a href="index.html">Home</a></li>
    <li class="c2 dropdown">
     <a class="dropdown-toggle" data-toggle="dropdown">Programming<span class="caret"></span></a>
     <ul class="dropdown-menu">
      <li><a href="">Web Programming</a></li>
                        <li><a href="">Dekstop Programming</a></li>
                        <li><a href="">Android Programming</a></li>
     </ul>
    </li>
    <li><a href="">English</a></li>
    <li><a href="">Review</a></li>
    <li><a href="">Videos</a></li>
    <li><a href="">Gallery</a></li>
   </ul>
  </div>
 </div>
</div>
<!-- /.navbar -->

Untuk output dari index.html, silahkan klik live demo (To see the ouput, click live demo).

Live Demo    Download

Ketika anda mengclik pada menu Programming, akan muncul submenu. Namun bagaimana caranya agar ketika sorot ke menu Programming langsung keluar submenu, tanpa perlu kita mengclicknya. Silahkan lihat Percobaan 2 (When you click menu Programming, it will display submenu (But how is the way to make submenu dispay when user hover it, without click it. Please see the experiment 2).

Percobaaan 2 (Experiment 2)

Untuk percobaan 2 kita buat file index2.html yang berisikan source code seperti dibawah ini ( On experiment 2, create file index2.html which contain code below):

<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img src="assets/images/tk_logo5.png" alt="Techro HTML5 template"></a>
</div>
<div>
<ul class="nav navbar-nav navbar-right">
<li class="c1 active"><a href="index.html">Home</a></li>
<li class="c2 dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Programming<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="">Web Programming</a></li>
<li><a href="">Dekstop Programming</a></li>
<li><a href="">Android Programming</a></li>
</ul>
</li>
<li><a href="">English</a></li>
<li><a href="">Review</a></li>
<li><a href="">Videos</a></li>
<li><a href="">Gallery</a></li>
</ul>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(".dropdown").hover(            
function() {
$('.dropdown-menu', this).stop( true, true ).slideDown("fast");
$(this).toggleClass('open');        
},
function() {
$('.dropdown-menu', this).stop( true, true ).slideUp("fast");
$(this).toggleClass('open');       
}
);
});
</script>

Untuk output dari index2.html, silahkan klik live demo (To see the ouput, click live demo).

Live Demo  Download

Tweet

Subscribe to receive free email updates: