Cara Membuat Menu Navigasi Dropdown Keren Versi Dark Kage

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 
Previous
Next Post »

11 comments

Write comments
25 December 2013 at 13:45 delete

Mantap gan penampilannya kayaknya nih

Reply
avatar
Inferter
AUTHOR
28 December 2013 at 09:53 delete

boleh di coba...


join kembali ya. http://denicreations.blogspot.com/

Reply
avatar
Inferter
AUTHOR
29 December 2013 at 17:19 delete

Keren gan , jangan lupa follback gan http://denicreations.blogspot.com/ :thumbup

Reply
avatar
10 February 2014 at 05:59 delete

bagus nih... numpang di coba...

Reply
avatar
7 February 2015 at 08:39 delete

terimakasih banyak sob, sangat membantu sekali tutorialnya....

Reply
avatar

[D]ark [K]age

Berkomentarlah Dengan Ramah Dan Sopan
Berkomentarlah Sesuai Postingan
Jangan Komen Spam
Link Aktif Dianggap Spam
Janganlah Berkomentar Menggunakan Anonymous
Blog Ini Sudah Disetting Menjadi Dofollow
Semua Link Download Yg Ada Password, Passwordnya Dark-Kage

Author : Dark Kage EmoticonEmoticon