Membuat Menu Drop Down Menggunakan CSS

Tiga Ilmu Membuat Menu Drop Down Menggunakan CSS

Dalam sebuah website banyak sekali yang bertanya tentang cara untuk membuat menu drop down menggunakan CSS untuk mengatur tampilan blog atau website menjadi lebih menarik dan elegan, Umumnya memasang menu drop down secara horizontal (atas/bawah) ataupun vertical (kanan/kiri) yang diletakkan di bawah header atau body sesuai dengan keinginan sang pemilik blog atau website.

Kali ini saya akan memberikan cara membuat menu drop down horizontal menggunakan CSS secara sederhana saja dan diletakkan dalam satu lembar script html. ikuti saja langkah-langkah di bawah ini untuk memasang menu drop down horizontal tersebut :

Gunakan editor html yang anda punya atau anda kuasai. Namun kali ini saya akan menggunakan notepad bawaan windows. Setelah notepad terbuka mulailah simpan file dengan nama latihan-menu-drop.html. Kemudian ganti pada box, save as type menjadi All files.
Masukkan koding dibawah ini.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
cssmenu ul {
  margin: 0;
  padding: 7px 6px 0;
  background: #7d7d7d url(overlay.png) repeat-x 0 -110px;
  line-height: 100%;
  border-radius: 1em;
  font: normal 0.5333333333333333em Arial, Helvetica, sans-serif;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  width: auto;
}
#cssmenu li {
  margin: 0 5px;
  padding: 0 0 8px;
  float: left;
  position: relative;
  list-style: none;
}
#cssmenu a,
#cssmenu a:link {
  font-weight: bold;
  font-size: 13px;
  color: #e7e5e5;
  text-decoration: none;
  display: block;
  padding: 8px 20px;
  margin: 0;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#cssmenu a:hover {
  background: #000;
  color: #fff;
}
#cssmenu .active a,
#cssmenu li:hover > a {
 background: #979797 url(overlay.png) repeat-x 0 -40px;
 background: #666666 url(overlay.png) repeat-x 0 -40px;
 color: #FFF;
 border-top: solid 1px  #f8f8f8;
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
 text-shadow: 0 1px 0 #ffffff;
}
#cssmenu ul ul li:hover a,
#cssmenu li:hover li a {
  background: none;
  border: none;
  color: #666;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}
#cssmenu ul ul a:hover {
  background: #7d7d7d url(overlay.png) repeat-x 0 -100px !important;
  color: #fff !important;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#cssmenu li:hover > ul {
  display: block;
}
#cssmenu ul ul {
  display: none;
  margin: 0;
  padding: 0;
  width: 185px;
  position: absolute;
  top: 40px;
  left: 0;
  background: url(overlay.png) repeat-x 0 0;
  border: solid 1px #b4b4b4;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
#cssmenu ul ul li {
  float: none;
  margin: 0;
  padding: 3px;
}
#cssmenu ul ul a,
#cssmenu ul ul a:link {
  font-weight: normal;
  font-size: 12px;
}
#cssmenu ul:after {
  content: '.';
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
* html #cssmenu ul {
  height: 1%;
}
</style>
<title>Untitled Document</title>
</head>

<body>
<div id='cssmenu'>

<ul>
   <li class='active'><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>
</body>
</html>

Simpan kembali project anda.

Buka file latihan-menu-drop.html jika berhasil maka akan menampilkan seperti di bawah ini :

Dan akhirnya, tampilan menu anda menarik dan elegan seperti website profesional. hehehehehe.

Demikian Membuat Menu Drop Down Menggunakan CSS saya akan bahas mengenai script di atas dilain waktu. Terima kasih.

Selasa, 18 Februari 2014

Membuat Menu Drop Down Menggunakan CSS

Tidak ada komentar:

Posting Komentar