Menu Navigation Dropdown

 

Menu Navigation Dropdown

Arlethdesign - Artikel kali ini saya akan membagikan tutorial cara membuat Menu Navigation Dropdown simple terbaru. Menu nav ini saya ambil dari template blogger Oploverz yang sebelumnya sudah saya share.


Menu Navigation Dropdown 2018

Sesuai dengan judul nya menu nav ini memiliki dropdown atau menu turunan yang memiliki lebih banyak pilihan dalam 1 tag menu. Ok kita mulai saja tutorial kali ini.



Menu Navigation Dropdown

  1. Buka Blogger > Tema > Edit HTML
  2. Cari CSS & HTML menu nav blog kamu, lalu hapus atau ganti
  3. langkah berikutnya yaitu menambahkan CSS ke dalam <b:skin> ... </b:skin>
    4. /* Menu Nav Dropdown Oploverz
 ============================= */
#--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}
@media screen and (max-width:728px){.navput{position:absolute;left:0;right:0;margin:0;-webkit-appearance:none;width:100%;outline:0;z-index:50}.menu .navput[type="checkbox"]{opacity:0}.navput,.navlab{height:50px;display:block;visibility:inherit!important;cursor:pointer;min-width:100px}.navlab{font-size:16px;outline:0;text-transform:uppercase;font-weight:700}#--menu .ul-menu{overflow:hidden;height:initial;float:none;margin:auto;opacity:0;visibility:hidden;display:none;width:100%}.navlab span{font-size:15px;color:#fff;padding:10px;line-height:50px}#--menu .navput:checked ~ ul{z-index:9;opacity:1;display:block;visibility:inherit!important;position:absolute;top:50px;overflow:hidden;background:rgba(0,0,0,.85)}#--menu ul li{width:100%;float:none;left:0%!important}#--menu .ul-menu li a{display:block;float:none;left:0%!important;color:#999;padding:0 10px;line-height:50px;text-decoration:none;transition:all .6s}.search{float:none;margin:auto;text-align:center;background:#333}.search #search{margin:auto}.navlab .fa{line-height:50px;float:right;padding:0 15px;color:#FFF}ul#--drop,#--menu .ul-menu li:hover ul{position:relative;background:#222;top:0;width:95%;left:0;opacity:1;margin:auto;max-height:105px;overflow:auto;border:none;padding:0 5px;visibility:visible;box-shadow:none}}

  4. Lalu Tambah & letakkan HTML berikut di atas outer-wrapper atau dibawah <body>
    5. <nav id="--menu" class='menu' itemscope='itemscope' itemtype='//schema.org/SiteNavigationElement' role='navigation'>
<div class='central'>
<input class='hidden navput' type='checkbox'/>
<label class='hidden navlab'>
<span>Menu</span>
<i class='fa fa-list'></i>
</label>
<ul class='ul-menu'>
<li><a href='#' itemprop='url'>Home</a></li>
<li><a href='#' itemprop='url'>Sitemap</a></li>
<li><a href='#' itemprop='url'>Disclaimer</a></li>
<li><a href='#' itemprop='url'>Contact Form</a></li>
<li><a href='#' itemprop='url'>Genre</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>
</ul>
<div class="search">
<form action="/search" id="search">
<input class="search_input" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Cari Disini...&quot;;}" onfocus="if (this.value == &quot;Cari Disini...&quot;) {this.value = &quot;&quot;}" type="text" value="Cari Disini..."/>
</form>
</div>
</div>
</nav>

  5. Jika sudah save tema.

Comments

Post a Comment

Popular posts from this blog

Recent Post Blogger By Label Filter Abjad

Image
  Recent Post Blogger By Label Filter Abjad Recent Post Blogger By Label Filter Abjad  - Recent post label dengan fitur mengurutkan judul/huruf depan dari postingan blog, Mulai dari Nomor, lalu ke huruf A sampai Z. Recent Post ini lebih mengutamakan Filter huruf depan dari sebuah judul post blog bukan mengurutkannya dengan tanggal di rilisnya postingan tersebut. Fitur ini berbeda dari recent post sebelumnya yaitu  Simple Recent Post By Label  yang mengandalkan tanggal rilis postnya dan jika dilihat mungkin acak-acakan judul postnya jadi bikin pusing atau tidak nyaman dipandang mata, maka dari itu Recent Post Label Filter Abjad jadi alternatifnya agar lebih minimalist dan rapih jika dilihat Recent Post Blogger By Label Filter Abjad Silahkan buka  Blogger > Tema > Edit HTML , lalu tambahkan CSS diatas  </style> /* Recent Post Label Filter Abjad - Arlethdesign ======================================= */ ul.grup-listanime{max-height:200px;overflow:...
Read more

Cara Mudah Membuat Template Blog Responsive & Mobile Friendly

Image
  Cara Mudah Membuat Template Blog Responsive & Mobile Friendly Halo, tutorial Kali ini saya akan membagikan  Cara Mudah Membuat Template Blog Responsive , artikel kali ini cukup mudah dan simpel untuk kalian praktekkan secara langsung, yuk langsung cek artikel dibawah ini. Apa itu Responsive & Mobile Friendly?, Responsive memiliki arti merespon, dan Mobile Friendly memiliki arti adaptive. Arti Lebih tepatnya tampilan blog akan merespon & menyesuaikan ukuran layar dimana blog itu dibuka baik itu handphone atau komputer. Kelebihan dari Responsive & Mobile Friendly yaitu memiliki fungsi untuk Meningkatkan SEO, Memudahkan Pengguna Smartphone, dan Disukai Pengunjung. Cara Mudah Membuat Template Blog Responsive & Mobile Friendly Buka  Blogger > Tema > Edit HTML Simpan HTML berikut dibawah  <head> , jika sudah ada tidak perlu ditambah. <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'...
Read more

Popular Post Samehada untuk Blogger

Image
  Popular Post Samehada untuk Blogger Tutorial kali ini yaitu Cara membuat Popular Post seperti Samehada untuk Blogger, diartikel ini saya akan membagikannya dengan singkat dan jelas, dan sangat mudah dipahami untuk pemula sekalipun. Untuk pratinjau atau preview tampilannya kalian bisa dipostingan sebelumnya yaitu  Bt-Samehada Clone 2020 Template Blogger . Popular Post Samehada untuk Blogger Pertama Buka Blogger > Tata letak > Add Widget Popular Post  (Jika sudah ada tidak perlu). Kemudian, Buka Tema > Edit HTML Simpan CSS berikut kedalam  <style> ... </style>  atau  <b:skin> ... </b:skin> /* Popular post blogger new style - arlethdesign */ #PopularPosts1 .widget-content.popular-posts{margin:auto} #PopularPosts1 ul li:nth-child(1n+2) .item-meta{font-size:11px;padding:6px 0 0;opacity:.7} #PopularPosts1 ul{padding:0;list-style:none;margin:auto;overflow:hidden} #PopularPosts1 ul li{margin:auto;padding:10px 0} #PopularPosts1 ul ...
Read more