Simple Responsive Pure CSS Dropdown Menu On Click part 1
langkahnya
1. buat widget baru
2. kopas semua scrip berikut ke widget baru
3. save dan lihat hasilnya
scripnya
<!-- CSS --> <style type='text/css'> .nav-bar{background:#000;width:100%} .nav-bar__label{color:#fff;display:block;padding:10px 0;text-align:center;text-transform:uppercase;width:inherit} .nav-bar__label::after,.nav-bar__sub-label::after{content:" +"} .nav-bar__label,.nav-bar__sub-label{cursor:pointer} .nav-bar__list{background:#000;list-style:none;margin:0;padding:0;width:100%} .nav-bar__list,[id^="toggle"]{display:none} [id^="toggle"]:checked + .nav-bar__list{display:block} .menu_navigation{display:block} .nav-bar__link,.nav-bar__sub-label{color:#fff;display:block;padding:10px 20px;text-decoration:none;word-wrap:break-word} .menu_navigation .menu_navigation .nav-bar__link,.menu_navigation .menu_navigation .nav-bar__sub-label{padding:10px 10px 10px 30px} .nav-bar__link:hover,.nav-bar__link:active,.nav-bar__sub-label:hover{background:#666} @media all and (min-width:992px){.nav-bar > .nav-bar__label{display:none}.nav-bar > .nav-bar__list{display:block}.nav-bar > .nav-bar__list > .menu_navigation{display:inline-block;position:relative}.menu_navigation .nav-bar__list{position:absolute}.menu_navigation .menu_navigation .nav-bar__link,.menu_navigation .menu_navigation .nav-bar__sub-label{padding:10px 20px}} </style> <!-- HTML --> <nav class="nav-bar"> <label for="toggle" class="nav-bar__label">Menu</label> <input type="checkbox" id="toggle" class="nav-bar__toggle"/> <ul class="nav-bar__list"> <li class="menu_navigation"> <a href="#" class="nav-bar__link">Menu Item 1</a> </li> <li class="menu_navigation"> <a href="#" class="nav-bar__link">Menu Item 2</a> </li> <li class="menu_navigation"> <a href="#" class="nav-bar__link">Menu Item 3</a> </li> <li class="menu_navigation"> <label for="toggle-sub-1" class="nav-bar__sub-label">Sub Menu</label> <input type="checkbox" id="toggle-sub-1" class="nav-bar__toggle"/> <ul class="nav-bar__list"> <li class="menu_navigation"> <a href="#" class="nav-bar__link">Sub Menu 1</a> </li> <li class="menu_navigation"> <a href="#" class="nav-bar__link">Sub Menu 2</a> </li> <li class="menu_navigation"> <a href="#" class="nav-bar__link">Sub Menu 3</a> </li> </ul> </li> <li class="menu_navigation"> <a href="#" class="nav-bar__link">Menu Item 4</a>
hasilnya
