Pada kesempatan kali ini aku akan membuatkan , bagaimana cara menciptakan Menu Navigation Dropdown , dan pastinya responsive
Sesuai dengan judul , pada sajian navigasi kali ini mempunyai dropdown atau sajian turunan yang mempunyai banyak pilihan dalam satu tag menu, eksklusif saja ketutorialnya .
Cara Membuat Menu Navigation Dropdown
1. Buka Blogger > Tema > Edit HTML .
2. Cari CSS dan HTML Menu navigasi pada blog sahabat , kemudian hapus dan ganti dengan isyarat sajian navigasi kali ini , untuk lebih detailnya,kelangkah selanjutnya.
3. Letakan CSS dibawah ini sempurna diatas kode ]]></b:skin>
/* Menu Nav Dropdown dibentuk oleh arlethdesign ibarat sajian 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. Langkah selanjutnya,tambahkan dan letakan HTML berikut diatas outer-wrapper atau dibawah kode <body>
<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 == "") {this.value = "Cari Disini...";}" onfocus="if (this.value == "Cari Disini...") {this.value = ""}" type="text" value="Cari Disini..."/> </form> </div> </div> </nav> 5. Jika sudah simpulan . save tema dan lihat hasilnya
Untuk kali ini cukup hingga sini saja,sampai jumpa di tutorial selanjutnya ^^;
Sumber http://idalponse.blogspot.com
EmoticonEmoticon