Tips Membuat Menu Dropdown Web Blog

Tips membuat menu drop down untuk website atau blogspot, sebenarnya sih tidak harus dropdown, menu juga tergantung kebutuhan sih. Untuk masalah menu biasanya sering berganti-ganti seiring perjalanan web blog agan, kadang tidak pakai dropdown kadang pakai juga. Nah, Pada artikel kali ini sengaja dibuat dropdown untuk mempermudah agan jika mau menggunakan kedua jenis menu tersebut, begini untuk kemudahan di kemudian hari daripada nyari lagi kan kesien :v , jika menggunakan script dari TnT kalau agan ingin menggunakan menu tanpa dropdown, nanti tinggal edit di bagian HTML saja,  karena dropdownnya sudah di handle di script CSS nya. 

Struktur menu dropdown dibuat dari HTML yang di stylize sedemikian rupa menggunakan CSS, kadang ditambah juga dengan Javascript agar lebih responsive. Coba perhatikan kode HTML dibawah ini:

Related Artikel - Tips Membuat Read More Otomatis Blogspot

<div id='navi'>
<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>

kode baris ketiga <li class='active'><a href='#'><span>Home</span></a></li> adalah menu tanpa dropdown sedangkan baris keempat sampai baris kesembilan adalah menu dengan dropdown, ini dibuktikan dengan adanya tag <ul> didalam  tag <li>, selebihnya diatur pada script CSS nya apakah mau dropdown kebawah, keatas, kesamping, termasuk designnya juga. class='active' dan tag <span></span> adalah optional tergantung kebutuhan saja. Nah, jika ingin menu tanpa dropdown, agan tinggal hapus tag <ul>...</ul> didalam tag <li>...</li>, tapi kalau ingin menu dengan dropdown agan tinggal tambahkan tag <ul>...</ul> didalam tag <li>...</li>.

Ok, Implementasinya sebagai berikut:

1. Pastikan menu diatas sudah cocok dengan yang agan butuhkan dan Pastikan juga sudah masuk ke akun blogspot, jika belum monggo login dulu. :)
2. Pilih menu "Layout"
3. Diarea Layout, dibawah (Header) pilih "Add a Gadget"
4. Akan muncu window baru Gadget, pilih HTML/Javascript
5. Paste kan kode HTML diatas di gadget tersebut, lalu klik Save
6. Kemudian pilih menu "Template"
7. Pilih "Edit HTML"
8. Gunakan CTRL+F, cari kode ]]></b:skin>
9. Kalo sudah ketemu, monggo copy script CSS dibawah ini, dan paste tepat diatas kode ]]></b:skin>
   
   
   #navi 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;
   }
   #navi li {
   margin: 0 5px;
   padding: 0 0 8px;
   float: left;
   position: relative;
   list-style: none;
   }
   #navi a,
   #navi 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);
   }
   #navi a:hover {
   background: #000;
   color: #fff;
   }
   #navi .active a,
   #navi li:hover > a {
   background: #979797 url(overlay.png) repeat-x 0 -40px;
   background: #666666 url(overlay.png) repeat-x 0 -40px;
   color: #444;
   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;
   }
   #navi ul ul li:hover a,
   #navi li:hover li a {
   background: none;
   border: none;
   color: #666;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   }
   #navi 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);
   }
   #navi li:hover > ul {
   display: block;
   }
   #navi 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);
   }
   #navi ul ul li {
   float: none;
   margin: 0;
   padding: 3px;
   }
   #navi ul ul a,
   #navi ul ul a:link {
   font-weight: normal;
   font-size: 12px;
   }
   #navi ul:after {
   content: '.';
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0;
   }
   * html #navi ul {
   height: 1%;
   }

Related Article - Tips Membuat Breadcrumb di Blogspot

Demikian tips membuat menu dropdown web blog kali ini, semoga bermanfaat. :)

Monggo, Berbagi Gratis, RaSah Mbayar: