Assalam'ualaikum, kali ini Dark Kage akan ngeshare "Cara Membuat Menu Navigasi Dropdown Keren Versi Dark Kage". Oke sebelumnya bagi yang memasang banner Dark Kage hapus aja bannernya karena saya sudah menghapus, soalnya biar lebih simple blog ini tidak kebanyakan banner.....

Oke kembali lagi ketopik kita, untuk melihat contohnya klik dibawah

[Demo Menu]

Gimana kerenkan :v

Caranya

1. Buka dashboard
2. Klik template
3. Edit html
4. Cari ]]><b:skin/> untuk lebih mudah tekan Ctrl + F
5. Jika sudah ketemu, masukan kode dibawah ini dan taruh diatas ]]><b:skin/>

/* Menu Navigation Dark Kage
----------------------------------------------- */
  #DKmenu {
  border: none;
  border: 0px;
  margin: 0px;
  padding: 0px;
  font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  width: auto;
}
#DKmenu ul {
  background: #333333;
  height: 35px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#DKmenu li {
  float: left;
  padding: 0px;
}
#DKmenu li a {
  background: #333333 url('http://cssmenumaker.com/sites/default/files/menu/45/seperator.gif') bottom right no-repeat;
  display: block;
  font-weight: normal;
  line-height: 35px;
  margin: 0px;
  padding: 0px 25px;
  text-align: center;
  text-decoration: none;
}
#DKmenu > ul > li > a {
  color: #cccccc;
}
#DKmenu ul ul a {
  color: #cccccc;
}
#DKmenu li > a:hover,
#DKmenu ul li:hover > a {
  background: #7a0a0a url('http://cssmenumaker.com/sites/default/files/menu/45/hover.png') bottom center no-repeat;
  color: #FFFFFF;
  text-decoration: none;
}
#DKmenu li ul {
  background: #333333;
  display: none;
  height: auto;
  padding: 0px;
  margin: 0px;
  border: 0px;
  position: absolute;
  width: 225px;
  z-index: 200;
  /*top:1em;
/*left:0;*/
}
#DKmenu li:hover ul {
  display: block;
}
#DKmenu li li {
  background: url('http://cssmenumaker.com/sites/default/files/menu/45/sub_sep.gif') bottom left no-repeat;
  display: block;
  float: none;
  margin: 0px;
  padding: 0px;
  width: 225px;
}
#DKmenu li:hover li a {
  background: none;
}
#DKmenu li ul a {
  display: block;
  height: 35px;
  font-size: 12px;
  font-style: normal;
  margin: 0px;
  padding: 0px 10px 0px 15px;
  text-align: left;
}
#DKmenu li ul a:hover,
#DKmenu li ul li:hover > a {
  background: #7a0a0a url('http://cssmenumaker.com/sites/default/files/menu/45//hover_sub.png') center left no-repeat;
  border: 0px;
  color: #ffffff;
  text-decoration: none;
}
#DKmenu p {
  clear: left;
}

Eitsss belum selesai...
Untuk mengaktivkan menunya kamu harus masuk-in htmlnya,
caranya cari kode 'content-wrapper' , lalu taruh kode dibawah ini diatas 'content-wrapper'

<div id='DKmenu'>
<ul>
  <li><a href='/'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Widgets</span></a></li>
         <li><a href='#'><span>Menus</span></a></li>
         <li class='last'><a href='#'><span>Products</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Company</span></a>
      <ul>
         <li><a href='#'><span>About</span></a></li>
         <li class='last'><a href='#'><span>Location</span></a></li>
      </ul>
   </li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

Oke kalian bisa edit edit lagi menunya....
Semoga bermanfaat.....

Jika Mau Copas, Mohon Sertakan Sumber 

Share :

Facebook Google+ Twitter

Related Posts :