Cara membuat menu Drop Down Versi Mobile, HP dan Versi Komputer

Menu Drop Down ini bisa digunakan dan bisa tampil untuk versi mobile, HP dan versi web (dekstop/pc/laptop).

Contoh gambar

Untuk mengaturnya kembali atau membuat menu sendiri diperlukan beberapa kode CSS dan langkah-langkah dibawah ini :

1. Sign in di blogger
2. Klik Opsi lainnya
3. Klik Templete
4. klik Edit HTML
5. Centang tulisan Expand Widget Templates
6. Cari kode ]]></b:skin>  (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
7. Copy paste kode CSS dibawah ini dan letakan diatas kode ]]></b:skin>  


/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuhorizontal{
background: #222222  repeat-x;
width:100%;
margin:0 auto;
padding:0 auto
}
#menuhorizontal1{
position:static;
width:100%;
height:30px;
margin:0 auto
}
.clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%}
#submenubarhorizontal,#submenubarhorizontal ul{
list-style:none;
font-family:Arial, serif;
margin:0;
padding:0
}
#submenubarhorizontal a{
display:block;
text-decoration:none;
font-size:11px;
font-weight:700;
text-transform:uppercase;
color: #ff9900;
border-right:1px solid #222222;
padding:12px 10px 8px
}
#submenubarhorizontal
a.trigger{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7sKlZ1ctefYLy7N24ZY8aXKJKHr4F2pXqxrJOod0SW8WAexg0TFETTDT7DyWxjPZXfzb5wiJoFbx_DUA1vrifg-yxLQn3P_xfYDYV0eV-j45_22ulqGgGfgOvbFSggbGKF-xoq2nQCHI/s1600/arrow_white.gif);
background-repeat:no-repeat;
background-position:right center;
padding:12px 24px 8px 10px
}
#submenubarhorizontal li{
float:left;
position:static;
width:auto
}
#submenubarhorizontal li ul,
#submenubarhorizontal ul li{
width:170px
}
#submenubarhorizontal ul li a{
text-align:left;
color:#fff;
font-size:12px;
font-weight:400;
text-transform:none;
font-family:Arial;border:none;padding:5px 10px
}
#submenubarhorizontal li ul{z-index:100;position:absolute;
display:none;
background:#C50A0A;padding-bottom:5px;
-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);
-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)
}
#submenubarhorizontal li:hover ul,
#submenubarhorizontal li.hvr ul{display:block}
#submenubarhorizontal li:hover ul a,
#submenubarhorizontal li.hvr ul a{color:#edfdfd;
background-color:transparent;
text-decoration:none
}
#submenubarhorizontal li ul li.hr{border-bottom:1px solid #444;
border-top:1px solid #000;
display:block;font-size:1px;
height:0;line-height:0;
margin:4px 0
}
#submenubarhorizontal ul a:hover{
background-color:#ff9900!important;
color:#fff!important;text-decoration:none
}


8. Kemudian cari kode


1. <header> : untuk menu di atas header blog
2. </header>: untuk menu di bawah header blog


9. Copy dan pastekan kode dibawah ini dan letakkan diatas kode <header> untuk menu diatas header dan atau diatas kode </header> untuk menu dibawah header


<div id='menuhorizontal'>
<div id='menuhorizontal1'>
<ul id='submenubarhorizontal'>
<li><a href=' nama-alamat-blog.html ' target='new'>Home</a></li>
<li><a class='trigger'>nama menu 1</a>
<ul><li class='hr'/>
<li> <a href=' nama-alamat-blog.html ' target= ' new '>sub nama menu 1</a></li>
<li class='hr'/>
<li> <a href=' nama-alamat-blog.html ' target= ' new '> sub nama menu 1</a></li>
<li class='hr'/>
<li> <a href=' nama-alamat-blog.html ' target=' new '> sub nama menu 1</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html  ' target=' new '> sub nama menu 1</a></li>
</ul></li>
<li><a href=' nama-alamat-blog.html  ' target=' new '>nama menu </a></li>
<li><a href=' nama-alamat-blog.html ' target=' new '>nama menu</a></li>
<li><a class='trigger'>nama menu 2</a>
<ul><li class='hr'/>
<li><a href='nama-alamat-blog.html ' target=' new '>sub nama menu 2</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target='_blank '> sub nama menu 2</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target='  new '> sub nama menu 2</a></li>
</ul></li>
<li><a class='trigger'>nama menu 3</a>
<ul><li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target=' new  '> sub nama menu 3</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target='new'> sub nama menu 3</a></li>
</ul></li>
<li><a class='trigger'>nama menu 4</a>
<ul><li class='hr'/>
<li><a href= ' nama-alamat-blog.html '>Sub nama menu 4</a></li>
<li class='hr'/>
<li><a href= ' nama-alamat-blog.html '  target='new '> Sub nama menu 4</a></li>
<li class='hr'/>
<li><a href='  nama-alamat-blog.html ' target='new '> Sub nama menu 4</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html  ' target='new '> Sub nama menu 4</a></li>
</ul></li>
<li><a href=' nama-alamat-blog.html ' target='new '> nama menu </a></li>
</ul>

</ul>
<br class='clearit'/></div>
<div style='clear:both;'/></div>


Keterangan


1. Kode berwarna merah adalah warna background utama
2. Kode warna coklat adalah warna teks utama
3. Kode berwarna biru adalah lebar menu
4. Kode warna hijau adalah garis pembatas menu
5. Kode warna biru langit adalah warna background sub menu
6. Nama alamat blog adalah Url tujuan, ganti dengan Url pada blognya kawan

Demikianlah postingan saya kali ini tentang cara membuat menu dropdown diatas header atau dibawah header, semoga bermanfaat.

Baca juga artikel menarik lainnya :