Kumpulan Menu Dropdown Menu Sederhana Menu Responsif Di Blogger

Berikut ini Kumpulan Menu Dropdown Menu Sederhana Menu Responsif Di Blogger

Letakkan kode CSS dibawah ini tepat di atas kode </head>

<style type="text/css">

.nav-menu{background: rgba(38,50,56,1);width:100%;}

nav {width:100%;padding:0;}nav:after {content: "";display: table;clear: both;}

nav ul {float:left;padding: 0;margin: 0;list-style: none;position: relative;}

nav ul li {margin: 0px;display: inline-block;float: left;}

nav a, nav a:hover, nav a:visited {display: block;padding: 0 20px;color: #FFF;font-size: 18px;line-height: 60px;text-decoration: none;}

nav a:hover {background-color: rgba(84,110,122,1);}nav label span{float:right;}

.toggle, [id^=drop] {display: none;}nav input[type=checkbox]{display: none;}

/*** Media Queries ***/

@media all and (max-width : 768px) {

nav {margin: 0;}.toggle + a,.menu {display: none;}

.toggle {display: block;background-color:#333;padding: 0 20px;color: #FFF;font-size: 18px;line-height: 60px;text-decoration: none;border: none;cursor:pointer;}

.toggle:hover {background-color: #000000;}[id^=drop]:checked + ul {display: block;width: 100%;}

nav ul li {display: block;width: 100%;}

</style>

Kemudian letakkan kode html struktur menunya cari kode dalam templat </header>, kemudian letakkan kode html di bawah ini tepat diatas kode </header>atau dibawahnya

<div class="nav-menu">

<nav>

<label class="toggle" for="drop">Menu <span>&#9776;</span></label>

<input id="drop" type="checkbox">

<ul class="menu">

<li><a href="/">Home</a></li>

<li><a href="#">Nama Menu 1</a></li>

<li><a href="#">Nama Menu 2</a></li>

<li><a href="#">Nama Menu 3</a></li>

<li><a href="#">Nama Menu 4</a></li>

<li><a href="#">Nama Menu 5</a></li>

</ul>

</nav>

</div>

Silahkan di sesuaikan sendiri untuk warnanya ,edit di kode CSS kode warna contohnya #000000 ,untuk tools warna bisa di sini Color_Picker silahkan disesuaikan sendiri ,jika bingung atau belom jelas silahkan bertanya di kolom komentar