Cara Membuat Menubar Drop Down Simple

Cara Membuat Menubar Drop Down Simple

Cara Membuat Menubar Drop Down Simple, Sobat blogger menubar adalah sebuah navigasi horisontal yang biasa kita lihat pada template, yang gunanya untuk memudahkan pengunjung menavigasi sebuah halaman atau memudahkan mencari artikel yang di ringkas pada label yang di simpan pada menubar tersebut, pada kesempatan kali ini saya akan membuatkan sebuah tutorial membuat menubar horisontal simple dengan multi drop down menu, untuk cara penerapan menubar ini juga sangat mudah sekali, bagi yang bisa hehe, tp tenang  saja saya akan berikan panduannya agar bisa dipahami dengan mudah :)

Cara Membuat Menubar Drop Down Simple

Gambar di atas adalah contoh menubar yang akan buat tutorialnya, oke sekarang bagi anda yang ingin membuat menubar dengan multi drop down tersebut, silahkan ikuti tutorialnya.

Cara Membuat Menubar Drop Down Simple

1. Buka akun blogger anda.
2. Pilih menu template > klik edit HTML
3. Lalu letakan kode CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style>

 #menutop ul,
#menutop li,
#menutop span,
#menutop a {
  margin: 0;
  padding: 0;
  position: relative;
}
#menutop {
  height: 49px;
  background: #D5D5D5;
  border-bottom: 4px solid #59c5ff;
  width: auto;
}
#menutop:after,
#menutop ul:after {
  content: '';
  display: block;
  clear: both;
}
#menutop a {
  background: #D5D5D5;
  color: #000;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#menutop ul {
  list-style: none;
}
#menutop > ul,#menutop > ul > li {
  float: left;
}
#menutop > ul > li > a {
  color: #000;
  font-size: 12px;
}
#menutop > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #59c5ff;
  margin-left: -10px;
}
#menutop > ul > li.active:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #59c5ff;
  margin-left: -10px;
}
#menutop > ul > li.active > a,#menutop > ul > li:hover > a {
  background: #ececec;
}
#menutop .menu-sub {
  z-index: 1;
}
#menutop .menu-sub:hover > ul {
  display: block;
}
#menutop .menu-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#menutop .menu-sub ul li {
  margin-bottom: 0px;
}
#menutop .menu-sub ul li a {
  background: #59c5ff;
  border-bottom: 1px solid #8cd7ff;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
  color: #ffffff;
}
#menutop .menu-sub ul li:hover a {
  background: #26b3ff;
}
#menutop .menu-sub .menu-sub:hover > ul {
  display: block;
}
#menutop .menu-sub .menu-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#menutop .menu-sub .menu-sub ul li a {
  background: #26b3ff;
  border-bottom: 1px solid #8cd7ff;
}
#menutop .menu-sub .menu-sub ul li a:hover {
  background: #0daaff;
}

4. Selanjutnya letakan kode HTML di bawah ini tepat di bawah kode </header>

 <div id='menutop'>
<ul>
   <li class='active'><a href='/' target='_blank'><span>Home</span></a></li>
   <li class='menu-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='menu-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='menu-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
       <li class='menu-sub'><a href='#'><span>More Menu</span></a>
      <ul>
         <li class='menu-sub'><a href='#'><span>More Menu 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Menu 1</span></a></li>
               <li class='last'><a href='#'><span>Sub Menu 2</span></a></li>
            </ul>
         </li>
         <li class='menu-sub'><a href='#'><span>More Menu 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>
</div> 

5. Klik save template.

Selesai, oke sobat blogger, sekian di tutorial cara membuat menubar drop down pada blog, semoga bermanfaat. :)
Bagikan Ke
12 Komentar untuk "Cara Membuat Menubar Drop Down Simple"

untuk mengganti more menu itu apakah disesuaikan dengan nama laman?

Cara membuat gambar seperti itu gimana ya? hehehe

kode yg No.4 ko gx ketemu ya...???"

jika sudah ada menubar dari template apakan bisa di tambah lagi

http://klikngaglik.blogspot.com/

Halo, tolong tanya, saya coba buat sub menu seperti di atas. Pada bagian Product saya isi product 1-10, di blog saya mau tampil, tapi pada saat saya klik product 4 layarnya sudah cepat tertutup, sehingga tidak sempat klik product 4-10. bagaimana caranya supaya bisa tetap terbuka sub menu product 1-10 kebawah?. trims

This comment has been removed by the author. - Hapus

Thanks Gan Atas Infonya, http://monixtuma.com/