Desain Simpel Menu Drop-down Hanya Dengan CSS

Bagi yang suka mendesain blog, ngutak ngatik blog atau modifikasi blognya, tips berikut mungkin boleh digunakan. Teknik membuat menu blog jenis drop-down hanya menggunakan CSS atau Cascading Style Sheet (CSS).

Oh iya, sudah membaca postinganku tentang : Cara Membuat Halaman Web Sederhana dengan Notepad? Nah, jika sudah, maka cara ini boleh juga diterapkan pada desain web sederhana yang telah Anda buat dari Notepad. Kita cukup menyesuaikan kembali posisi penempatan CSS dan koding HTML yang menampilkan menu drop-down ini.

Karena 100% CSS tanpa javascript ataupun kode skript yang lainnya, maka tampilannya sangat simpel dan sederhana, sehingga tidak membuat web atau blog menjadi lambat ketika diakses. Selain tidak loading akses, tips ini cocok digunakan untuk semua jenis browser.

Bagi anda yang ingin memasang tab menu di halaman utama blog, terutama di bagian header, disarankan untuk memasang menu drop-down jenis ini. Bagaimana cara untuk membuat menu drop-down nya?

1. Login ke blogger;
2. Setelah berada pada halaman dashboard, klik Layout;
3. Kemudian klik tab edit HTML (Disarankan kepada Anda sebelum mengubah kode template, silahkan di backup dulu. Klik link Download template sepenuhnya);
4. Copy kode di bawah ini, lalu paste di atas kode : ]]></b:skin>
   
   

   /* === CSS Style === */
   #menu {list-style-type:none; margin:5px; padding:0;} #menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; z-index:100;} #menu li dl {position:absolute; top:0; left:0;padding-bottom:5px;} #menu li a, #menu li a:visited {text-decoration:none;} #menu li dd {display:none;} #menu li a:hover {border:0;} #menu li:hover dd, #menu li a:hover dd {display:block;} #menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;} #menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;} #menu dl {width: 150px; margin: 0; padding: 0; background: #c9ba65;} #menu dt {margin:0; padding: 5px 5px 5px 20px; font-size: 1.1em; color: #fff; border-bottom:1px solid #fff; border-top:1px solid #fff;}  #menu .one {background: #827b6b; border-top:5px solid #dca;} #menu .two {background: #646e4c; border-top:5px solid #bb9;} #menu .three {background: #a4a88d; border-top:5px solid #eec;} #menu .four {background: #a29f68; border-top:5px solid #f8f8b8;}  #menu .one dt {background: #b2ab9b;} #menu .two dt {background: #949e7c;} #menu .three dt {background: #d4d8bd;} #menu .four dt {background: #e2dfa8;}  #menu dd {margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;} #menu .one dd {border-bottom:1px solid #aaa;} #menu .two dd {border-bottom:1px solid #e8e8e8;} #menu .three dd {border-bottom:1px solid #eee;} #menu .four dd {border-bottom:1px solid #999;} #menu dd.last {border-bottom:1px solid #fff;}  #menu dt a, #menu dt a:visited {display:block; color:#444;}  #menu dd a, #menu dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 20px; width:125px;}  #menu .one dd a {background:#949e7c; color:#eee;} #menu .two dd a {background:#d4d8bd; color:#346;} #menu .three dd a {background:#e2dfa8; color:#654;} #menu .four dd a {background:#b2ab9b; color:#ff8;}  #menu .one dd a:hover {background: #b2ab9b; color:#345;} #menu .two dd a:hover {background: #949e7c; color:#543;} #menu .three dd a:hover {background: #d4d8bd; color:#123;} #menu .four dd a:hover {background: #e2dfa8; color:#534;}
   

5. Silahkan lihat ke bagian bawah lagi, lalu temukan kode seperti ini :
   
   

   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='your blog title (Header)' type='Header'/> </b:section>
   

   
   
6. Ubahlah kode yang berwarna merah, sehingga kodenya menjadi seperti ini :
   
   

   <b:section class='header' id='header' maxwidgets='2' showaddelement='yes'> <b:widget id='Header1' locked='false' title='your blog title (Header)' type='Header'/> </b:section>
   

   
   
7. Klik tombol Simpan Template.

Langkah pertama telah selesai, Selanjutnya langkah kedua untuk menampilkan menu drop-down di web atau blog.

1. Klik pada tab elemen Halaman yang berada di bagian atas. Perhatikan gambar berikut :
   
   
   



2. Klik pada Tambahkan sebuah Elemen halaman yang berada di atas elemen header. Perhatikan gambar berikut ini:
   
   
   



3. Setelah halaman pop up muncul, klik tombol Tambahkan ke blog untuk HTML/JavaScript;
4. Copy kemudian paste kode di bawah ini pada elemen HTML/JavaScript;
   
   

   <ul id="menu">
   <!-- drop down menu start -->
   <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
   <dl class="one"> <!-- Alter the links with your own -->
   <dt><a href="#">MENU 1</a></dt> 
   <dd><a href="#" title="title here">MENU 1.1</a></dd>
   <dd><a href="#" title="title here">MENU 1.2</a></dd>
   <dd><a href="#" title="title here">MENU 1.3</a></dd>
   <dd><a href="#" title="title here">MENU 1.4</a></dd>
   <dd class="last"><a href="#" title="title here">MENU 1.5</a></dd> </dl>
   <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li>
   <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
   <dl class="two">
   <dt><a href="#">MENU 2</a></dt>
   <dd><a href="#" title="title here">MENU 2.1</a></dd>
   <dd><a href="#" title="title here">MENU 2.2</a></dd>
   <dd><a href="#" title="title here">MENU 2.3</a></dd>
   <dd><a href="#" title="title here">MENU 2.4</a></dd>
   <dd class="last"><a href="#" title="title here">MENU 2.5</a></dd>
   </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]-->  </li>
   
   <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
   <dl class="three">
   <dt><a href="#">MENU 3</a></dt> 
   <dd><a href="#" title="title here">MENU 3.1</a></dd>
   <dd><a href="#" title="title here">MENU 3.2</a></dd>
   <dd><a href="#" title="title here">MENU 3.3</a></dd>
   <dd><a href="#" title="title here">MENU 3.4</a></dd>
   <dd class="last"><a href="#" title="title here">MENU 3.5</a></dd>
   </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li>
   <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
   <dl class="four">
   <dt><a href="#">MENU 4</a></dt>
   <dd><a href="#" title="title here">MENU 4.1</a></dd>
   <dd><a href="#" title="title here">MENU 4.2</a></dd>
   <dd><a href="#" title="title here">MENU 4.3</a></dd>
   <dd><a href="#" title="title here">MENU 4.4</a></dd>
   <dd class="last"><a href="#" title="title here">MENU 4.5</a></dd>
   </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]-->  </li> </ul>
   <!-- end of drop down menu -->
   

   
   
   
5. Klik tombol Simpan Template
6. Selesai. Silahkan lihat hasilnya.

Hasilnya, bisa dilihat pada tombol demo di bawah :



Catatan : untuk beberapa jenis template, cara ini tidak menghasilkan tampilan yang bagus, namun bisa disesuikan model dan tampilan menu melalui pengaturan di CSS. Semoga bermanfaat.


Source Code : Kolom Tutorial Blogspot Kang Rohman.