Menu Navigation Dropdown
Arlethdesign - Artikel kali ini aku akan membagikan tutorial cara menciptakan Menu Navigation Dropdown simple terbaru. Menu nav ini aku ambil dari template blogger Oploverz yang sebelumnya sudah aku share.
Sesuai dengan judul nya sajian nav ini mempunyai dropdown atau sajian turunan yang mempunyai lebih banyak pilihan dalam 1 tag menu. Ok kita mulai saja tutorial kali ini.
Menu Navigation Dropdown
- Buka Blogger > Tema > Edit HTML
- Cari CSS & HTML sajian nav blog kamu, kemudian hapus atau ganti
- langkah berikutnya ialah menambahkan CSS ke dalam <style> ... </style>
- Lalu Tambah & letakkan HTML berikut di atas outer-wrapper atau dibawah <body>
- Jika sudah save tema.
/* Menu Nav - Dropdown Simple =============================== */ #--menu{background:#222;position:relative;height:50px;box-shadow:inset 0 -7px 10px -7px #000} #--menu .ul-menu{float:left;margin:0;padding:0;border-left:1px solid #111;border-right:1px solid #333} #--menu .ul-menu .current-menu-item a{background:#444;color:#FFF} #--menu .ul-menu li{list-style:none;margin:0;float:left;border-right:1px solid #111;border-left:1px solid #333} #--menu .ul-menu li a{float:left;position:relative;color:#eee;padding:0 15px;font-size:14px;line-height:48px;font-family:'Open Sans',sans-serif} #--menu ul li ul#--drop li{display:block;float:none} #--menu .ul-menu li:hover ul{opacity:1;visibility:visible;z-index:99;background:#171717;top:45px;box-shadow:rgba(0,0,0,.12) 0 1px 3px,rgba(0,0,0,.22) 0 1px 2px} ul#--drop{position:absolute;top:30px;width:115px;opacity:0;margin:auto;padding:0;visibility:hidden} #--menu .ul-menu li ul a{float:none;display:block} #--menu .ul-menu li a:hover{text-decoration:none;color:#fff;background:#444} .ul-menubawah{height:40px;line-height:40px;background:#444;color:#eee;padding:0 15px;font-family:'Open Sans',sans-serif;font-size:12px} .search{float:right} #search{margin:2px auto;padding:6px} input.search_input{border:1px solid #333;width:200px;color:#DDD;border-radius:4px;padding:9px 10px;background:#111} /* Responsive */ @media screen and (max-width:640px){#--menu{overflow:hidden;float:none;width:100%;height:auto}#--menu .ul-menu li{float:left;width:50%;border-right:0;border-left:0}#--menu .ul-menu{float:none;border-left:0;border-right:0}#--menu .ul-menu li a{display:block;float:none;color:#DDD;text-align:center;padding:0}}<div id="--menu"> <div class="central"> <ul class="ul-menu" id="menu-menu"> <li class="current-menu-item" id="menu-item-0"><a href="/">Home</a></li> <li class="menu1" id="menu-item-1"><a href="#">Anime List</a></li> <li class="menu2" id="menu-item-2"><a href="#">Ost Anime</a></li> <li class="menu3" id="menu-item-3"><a href="#">Genres</a> <ul id="--drop"> <li><a href="#">Action</a></li> <li><a href="#">Action</a></li> <li><a href="#">Action</a></li> <li><a href="#">Action</a></li> <li><a href="#">Action</a></li> </ul> </li> <li class="menu4" id="menu-item-4"><a href="#">Schedule</a></li> <li class="menu5" id="menu-item-5"><a href="#">Theme Anime</a></li> <li class="menu6" id="menu-item-6"><a href="#">Partner</a></li> <li class="menu7" id="menu-item-7"><a href="#">How to DL</a></li> </ul> <div class="search"> <form action="/search" id="search"><input class="search_input" name="q" onblur="if (this.value == "") {this.value = "Cari Disini...";}" onfocus="if (this.value == "Cari Disini...") {this.value = ""}" type="text" value="Cari Disini..."/></form> </div> </div> </div>