Membuat Menu Navigasi Pelangi Yang Responsive

Ketika saya berkunjung ke blog terselubung ada hal yang menarik perhatian saya. Bukan artikel yang disajikannya, melainkan menu navigasi yang warna-warni itu. Sebenarnya sudah lama saya ingin meniru menu navigasi tersebut, namun baru kini saya bisa kesampaian untuk menyelesaikannya.

• DEMO

Untuk membuat menu navigasi seperti tampak di demo. Sebenarnya sedikit rumit. Mungkin karena banyak kode perintah yang mesti kita gunakan. Menu navigasi hasil saya itu telah dibuat responsive dan Insya Allah telah valid CSS3. Jadi ini cocok juga buat blog kamu yang menggunakan template responsive serta valid CSS3.

Berikut ini kode lengkapnya:

/* Bagian Utama Pada Menu Navigasi Pelangi */ 
.daerah-menu {height: 20px;overflow: hidden;width: 100%;
text-align: center; font-family: Helvetica Neue, Arial, Helvetica, sans-serif; border-bottom: 3px solid #FE2E2E; background: #B40404; margin:0px; padding:8px 0;clear:both;}
.daerah-menu a:link, .daerah-menu a:hover, .daerah-menu a:visited {text-decoration:none;}
.daerah-menu ul{padding:4px; margin:-2px 0; line-height:1.2;}
.daerah-menu ul li{padding:4px; margin:0 -1px 0 -2px; display:inline;}
.daerah-menu li a{padding:15px 5px 15px 5px; color: #fff;margin:0 -5px 0 -5px;}
.daerah-menu li a:hover{color: #fff;background-color: #B40404;}

/* Ini Adalah Kunci Utama Yang Membuat Menu Navigasi Itu Menjadi Pelangi (warna-warni) */ 
.daerah-menu ul li:nth-child(1) {background-color: none; padding:5px;}
.daerah-menu ul li:nth-child(2) {background-color :red; padding:15px 5px 15px 5px;}
.daerah-menu ul li:nth-child(3) {background-color: #2E9AFE; padding: 15px 5px 15px 5px;}
.daerah-menu ul li:nth-child(4) {background-color: #5FB404; padding: 15px 5px 15px 5px;}
.daerah-menu ul li:nth-child(5) {background-color: #9A2EFE; padding: 15px 5px 15px 5px;}
.daerah-menu ul li:nth-child(6) {background-color: #D7DF01; padding: 15px 5px 15px 5px;}
.daerah-menu ul li:nth-child(7) {background-color: #084B8A; padding: 15px 5px 15px 5px;}
.daerah-menu ul li:nth-child(8) {background-color: #FE2E9A; padding: 15px 5px 15px 5px;}
.daerah-menu ul li:nth-child(9) {background-color: #088A4B; padding: 15px 5px 15px 5px;}
.daerah-menu ul li:nth-child(10) {background-color: #FF8000; padding: 15px 5px 15px 5px;}
.daerah-menu ul li:nth-child(11) {background-color: #9A2EFE; padding: 15px 5px 15px 5px;}

/* Ini Untuk Membuat Menu Tersebut Menjadi Responsive */ 
@media screen and (max-width:700px){ 
.daerah-menu ul li{display:block;}
.daerah-menu ul{padding:0px; margin:0 0 -10px;}
.daerah-menu li a:hover{color: black;background:none;}
.daerah-menu {height: auto;}

.daerah-menu ul li:nth-child(1),.daerah-menu ul li:nth-child(2),.daerah-menu ul li:nth-child(3),.daerah-menu ul li:nth-child(4),.daerah-menu ul li:nth-child(5),.daerah-menu ul li:nth-child(6),.daerah-menu ul li:nth-child(7),.daerah-menu ul li:nth-child(8),.daerah-menu ul li:nth-child(9),.daerah-menu ul li:nth-child(10),.daerah-menu ul li:nth-child(11) {padding:5px;}
}

Note: Silahkan copy kode diatas dan letakkan di atas ]]></b:skin> atau </style> (buat yang sudah valid CSS3).

Jika teman-teman ingin merubah ukuran tinggi (height) kotak menu navigasi tersebut sesuai keinginan. Maka perlu juga melakukan perubahan lainnya atau pengaturan lainnya, yakni: padding, margin, serta ukuran tulisannya. Sesuaikan dengan tampilan menu navigasi tersebut.
Pemberian penomoran seperti diatas merupakan hal yang penting. Jadi jangan dihapus. Jika mempunyai jumlah menu yang lebih dari 11 silahkan tambahkan sendiri dan beri kode warna sendiri sesuai keinginan kamu.

Selanjutnya adalah meletakkan menu navigasi tersebut. Silahkan copy dan pastekan kode dibawah, lalu letakkan di gatget baru kamu.

<div class='daerah-menu'>
<ul>
<li><a href='#'><img alt='HOME' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVgGJ-At_bbDNRm1SDnXfjaVwEBLklnWjS6mKe6tcrjt91NI2tNi9C8tdkF-T5icBYUV9CunYa1s_kHUMg0vrwyhnY6B8FR-usuNHwDf0rjxoWU111Lnb8TD3DIyhV6ei8wefOemcLXA/s1600/Beranda.png' width='20px'/></a></li>
  <li><a href='#'>UMUM</a></li>
  <li><a href='#'>SEJARAH</a></li>
  <li><a href='#'>MISTERI</a></li>
  <li><a href='#'>UNIK</a></li>
  <li><a href='#'>LELUCON</a></li>
  <li><a href='#'>HIBURAN</a></li>
  <li><a href='#'>OLAH RAGA</a></li>
  <li><a href='#'>GAYA HIDUP</a></li>
  <li><a href='#'>TIPS</a></li>
  <li><a href='#'>WISATA</a></li>
</ul>
</div>

Note: Silahkan ganti tulisan bewarna merah diatas sesuai daftar menu dan link yang kamu gunakan.

Begitulah langkah-langkahnya membuat menu navigasi seperti blog terselubung. Saya juga telah memperbarui tampilan menu tersebut (update: 18 Oktober 2013) sehingga agak terlihat bagus dari sebelumnya.