Cara Membuat Drop Down Menu CSS

Cara membuat drop down menu css terkadang dalam menilai sebuah web atau blog dikatakan terlihat menarik secara visual jika desainya terkesan dinamis, bergerak, dan dengan kumpulan warna yang berbeda namun sesuai, baik dalam desain layout, header, menu navigasi, content, sidebar, dan footer. Salah satu contohnya adalah desain menu navigasi drop down, untuk membuat desain drop down menu tidak dapat dilakukan hanya dengan menggunkan HTML akan tetapi harus dipadukan dengan CSS. Kemudian bagaimana cara membuat drop down menu dengan CSS dan HTML?

Berikut contoh study kasus All in one blog pembuatan drop down menu navigasi yang hanya menggunakan html tanpa css, perhatikan script di bawah ini:

<!DOCTYPE html>
<html>
<body>
    <div>
        <ul>
            <li><a href='/'><span>Home</span></a></li>
            <li><a href='/'><span>Products</span></a>
                <ul>
                 <li><a href='#'><span>Product 1</span></a></li>
                 <li><a href='#'><span>Product 2</span></a></li>
                 <li><a href='#'><span>Product 3</span></a>
                    <ul>
                       <li><a href='#'><span>Sub Product</span></a></li>
                       <li><a href='#'><span>Sub Product</span></a></li>
                       <li><a href='#'><span>Sub Product</span></a></li>
                       <li><a href='#'><span>Sub Product</span></a></li>
                    </ul>
                 </li>
                </ul>
           </li>
           <li><a href='/'><span>Articles</span></a></li>
           <li><a href='/'><span>Tutorials</span></a></li>
           <li><a href='/'><span>SEO</span></a></li>
        </ul>
    </div>
</body>
</html>

Coba Anda salin script di atas dan simpan dalam sebuah folder dengan nama file index.html, kemudian jalankan file tersebut menggunkan web browser. Mungkin menurut Anda hasilnya terlihat kurang menarik dan biasa saja, secara visual menunjukan drop down menu tetapi tidak disertai dengan style. Seperti gambar di bawah ini:

cara membuat drop down menu css

Agar menu navigasi di atas dapat terlihat menarik dengan drop down menu yang berjalan dengan baik, maka html harus dipadukan dengan css. Bagaimana caranya ?
Berikut langkah – langkah cara membuat drop down menu CSS, jika ingin memadukan dengan box shadow Anda dapat mempelajarinya pada postingan cara membuat efek bayangan dengan CSS.

Tulis script HTML untuk membentuk menu navigasi, contohnya seperti script berikut:

<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' type='text/css' href='styles.css' />
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
</head>
<body>
<div id='cssmenu'>
<ul>
   <li class='active'><a href='http://www.rajaputramedia.com/'><span>Home</span></a></li>
   <li class='has-sub'><a href='http://www.rajaputramedia.com/'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a></li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a></li>
         <li class='has-sub'><a href='#'><span>Product 3</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li class='last'><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='http://www.rajaputramedia.com/'><span>Articles</span></a></li>
   <li><a href='http://www.rajaputramedia.com/'><span>Tutorials</span></a></li>
   <li class='last'><a href='http://www.rajaputramedia.com/'><span>SEO</span></a></li>
</ul>
</div>
</body>
</html>

Setelah menulis script html di atas, simpan dalam sebuah folder latihan dengan nama file index.html.

Kemudian tulis script css di bawah ini untuk membentuk style dan drop down menu.

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
  margin:20px 10px 0px 10px;
  height: 40px;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: #fefefe;
  background: -moz-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #eee9f0));
  background: -webkit-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
  background: -o-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
  background: -ms-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
  background: linear-gradient(top, #fefefe 0%, #eee9f0 100%);
  border-bottom: 2px solid #ffa800;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  background: #fefefe;
  background: -moz-linear-gradient(top, #fefefe 0%, #ececec 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #ececec));
  background: -webkit-linear-gradient(top, #fefefe 0%, #ececec 100%);
  background: -o-linear-gradient(top, #fefefe 0%, #ececec 100%);
  background: -ms-linear-gradient(top, #fefefe 0%, #ececec 100%);
  background: linear-gradient(top, #fefefe 0%, #ececec 100%);
  color: #000;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 40px;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li > a {
  color: #000;
  font-size: 12px;
}
#cssmenu > 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 #ffa800;
  margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#cssmenu > 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 #ffa800;
  margin-left: -10px;
}
#cssmenu > ul > li.active > a {
  -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
  background: #ececec;
  background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));
  background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
}
#cssmenu > ul > li:hover > a {
  background: #ececec;
  background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));
  background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #ffa800;
  border-bottom: 1px solid #fff;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
  color: #ffffff;
}
#cssmenu .has-sub ul li:hover a {
  background: #cc8500;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #cc8500;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #b37400;
}

Simpan dalam folder yang sama dengan file index.html, yaitu folder latihan. Simpan dengan nama file styles.css

Setelah terbentuk 2 (dua) file di atas yaitu index.html dan styles.css, dan pastikan tersimpan dalam satu folder yaitu folder dengan nama "latihan", jalankan file index.html menggunakan web browser, lihat tampilan yang di hasilkan. Menu navigasi terlihat menarik, style, dan dengan drop down menu css yang berjalan dengan baik, seperti gambar di bawah ini:

cara membuat drop down menu css

Menu navigasi terlihat lebih menarik kan ?

Demikian tutorial bagaimana cara membuat drop down menu css, agar menu navigasi terlihat lebih menarik dan terkesan dinamis. Jika masih kurang memahami tutorial ini, Anda dapat memberikan pertanyaan melalui form komentar. Semoga dapat membantu

Cara Membuat Drop Down Menu CSS

Belum ada Komentar untuk "Cara Membuat Drop Down Menu CSS"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel