Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget Atas Posting

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 

Posting Komentar untuk "Kumpulan Menu Dropdown Menu Sederhana Menu Responsif Di Blogger"