Hal ini saya lakukan hanya sebatas sarana belajar saja, dengan mengumpulkan Elemen CSS-nya, HTML-nya serta yang lain.
Hasil dari oprek kali ini sudah saya terapkan di blog ini, hasilnya berjalan.. namun masih ada sayang-nya.. bila diakses dari mobile, menu PULL untuk melihat isi menu navigasinya tidak bisa terbuka, entah letak kesalahannya ada dibagian mana, saya sendiri masih bingung mencari-cari.
Tapi bagi yang ingin mencoba menerapkan elemen ini ke template yang kamu miliki. maka syah-syah saja untuk dicoba.
hitung-hitung mungkin ada dari salah satu kalian yang ngerti untuk memperbaiki kekurangannya.
Elemen-elemen-nya ada dibawah ini :
1. Kode CSS
Kode CSS dibawah ini ditaruh diatas tag ]]</b:skin> dibawah ini kode CSS-nya:
/* CSS Outer Wrapper */
body#layout #outer-wrapper, body#layout .post-inner, body#layout .sidebar, body#layout .sidebar-two {padding:0 0 0 0;}
#outer-wrapper{background:#fefefe;max-width:970px;margin:0 auto;padding:0 20px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,0.05);}
/* CSS Top Menu Wrapper */
.arlinatop-wrapper{width:100%;max-width:930px;background:rgba(255,255,255,.99);z-index:99;position:fixed;overflow:hidden;margin:auto;border-bottom:1px solid #ddd;-webkit-transform:translateZ(0);transform:translateZ(0)}
.adtop-wrapper {padding:0;position:static;max-width:970px;margin:0 auto;}
.header-wrapper2 {margin:0 auto;padding:0}
.top-menunavi {display:block;margin:0 auto;float:left;padding:0;width:100%;background:transparent;border:none;}
.top-menunavi ul {width:100%;padding:0;margin:0;text-align:left;}
.top-menunavi li {display:block;list-style-type:none;float:left;padding:0;margin:0;}
.top-menunavi li a{position:relative;font-weight:400;background-color:transparent;color:#333;display:inline-block;margin:0;padding:20px 15px;transition:color .3s}
.top-menunavi ul li a:active, .top-menunavi ul li.highlight a {line-height:100%;}
.top-menunavi ul li a:hover {color:#888;}
.top-menunavi a#pull {display:none;}
.top-menunavi li.nomore,.top-menunavi li.nomore2{text-align:center;color:#333;float:right;}
.top-menunavi li.nomore:hover,.top-menunavi li.nomore2:hover{color:#888;}
.top-menunavi li i{font-weight:normal;color:#333;transition:color .3s;}
.top-menunavi ul li:hover i{color:#888;}
.top-menunavi li.nomore2{position:relative;transition:all .3s;}
li.nomore2:after{position:absolute;content:'1';right:3px;top:10px;background:#4db2ec;color:#fff;padding:0;width:15px;height:15px;line-height:15px;border:2px solid #fff;border-radius:4px;font-size:75%;transform:scale(1.0);transition:all .3s ease}
.top-menunavi ul li.nomore2:hover:after{transform:scale(0.9)}
.top-menunavi li.infoarlina{border:0;}
.top-menunavi li.infoarlina a{background:rgba(0,0,0,0.01);color:#1176c3;display:block;margin:16px 0;padding:3px 8px;border-radius:3px;font-size:94%;transition:all .3s ease;box-shadow:inset 0 0 0 1px #138be6;font-weight:400}
.top-menunavi li.infoarlina a:hover{background:#138be6;color:#fff;}
.header-wrapper2 {position:relative;z-index:999;}
.adtop-wrapper {padding:0 20px;position:relative;max-width:970px;margin:0 auto;}
.header-wrapper2,.adtop-wrapper {padding:0}
.arlinatop-wrapper {position:relative;overflow:hidden;margin:0;z-index:1;}
@media screen and (max-width:1066px) {
#outer-wrapper {margin:0 auto;}
.header-right {float:right;padding:0;overflow:hidden;margin:0;}
.header-right img {display:block;}}
@media screen and (max-width:960px) {
#outer-wrapper {margin:0 auto;border:none;box-shadow:none;}
header-wrapper2,.adtop-wrapper {padding:0}
@media only screen and (max-width:768px){
.arlinatop-wrapper {margin:20px auto 0 auto;border:0;}
.adtop-wrapper {margin:0;}
.top-menunavi{background:#3cc091;position:relative;display:block;padding:0;float:none;width:auto;}
.top-menunavi ul {text-align:center;}
.top-menunavi ul,.nav li ul:before{display:none;height:auto;overflow:hidden;border-bottom:1px solid rgba(0,0,0,0.1)}
.top-menunavi a#pull{color:#fff;display:inline-block;padding:12px;margin:0;border-right:1px solid rgba(0,0,0,0.1);position:relative}
.top-menunavi a#pull:before{content:'\f03a';font-family:FontAwesome;font-style:normal;font-weight:400;display:inline-block;margin:0 5px 0 0}
.top-menunavi li {display:block;width:100%;text-align:left;border-right:none;}
.top-menunavi li a{background:#f5f5f5;color:#222;padding:10px 20px;display:block}
.top-menunavi li a:hover, nav a:active {background:#f0f0f0;border:none;color:#222;}
.top-menunavi ul li a:hover {background:#f0f0f0;color:#333;}
.top-menunavi li.nomore,.top-menunavi li.nomore2{display:none}
.top-menunavi li.infoarlina {display:none;}}
@media only screen and (max-width:480px){
.arlinatop-wrapper{margin:10px auto 0 auto}
#outer-wrapper{margin:0 auto;padding:0 10px}2. Kode HTML
Taruh kode HTML dibawah ini setelah kode <div class='outer-wrapper'> atau diatas kode <div class='header-wrapper'>, atau sesuaikan saja dengan template masing-masing.
<div id='outer-wrapper'>
<div class='arlinatop-wrapper'>
<header class='header-wrapper2'>
<div class='adtop-wrapper'>
<nav class='top-menunavi'>
<ul>
<li class='infoarlina'><a class='popup-link' href='#popup'>Info</a></li>
<li><a href='#' title='About Us'>About</a></li>
<li><a href='#' title='Disclaimer'>Disclaimer</a></li>
<li><a href='#' title='Privacy policy'>Privacy</a></li>
<li><a href='#' title='Pasang Iklan'>Iklan</a></li>
<li><a href='#' title='Terms of Service'>TOS</a></li>
<li class='nomore2'>
<a href='#' target='_blank' title='Pesan template N Light'><i class='fa fa-bell'></i><span class='inv'></span></a>
</li>
<li class='nomore'>
<a href='#' target='_blank' title='Member'><i class='fa fa-user'></i><span class='inv'></span></a>
</li>
<li class='nomore'>
<a href='https://www.blogger.com/follow-blog.g?blogID=xxxxxxxxxx' rel='nofollow' target='_blank' title='Join this site'><i class='fa fa-sign-in'></i><span class='inv'></span></a>
</li>
<li class='nomore'>
<a href='#' target='_blank' title='Off Topic'><i class='fa fa-coffee'></i><span class='inv'></span></a>
</li>
<li class='nomore'>
<a href='#' target='_blank' title='Contact us'><i class='fa fa-envelope-o'></i><span class='inv'></span></a>
</li>
<li class='nomore'>
<a href='#' target='_blank' title='Our Sitemap'><i class='fa fa-list-alt'></i><span class='inv'></span></a>
</li>
</ul>
<a href='#' id='pull'>MENU</a>
</nav>
</div>
</header>
</div>
</div>3. Javascript (Belum Berfungsi, tidak dipasang juga tidak apa-apa)
Kode javascript dibawah ini adalah kode yang bertujuan untuk membuka menu top navigasi ketika dalam kondisi dibuka oleh mobile phone, karena bila diakses oleh mobile phone, tampilan navigasi-nya akan ikut mengecil menyesuaikan layar, tapi sayang... dengan memasang script ini, fungsi untuk membuka menu navigasi tersebut masih belum bisa terbuka. posisi pemasangannya seperti pada umumnya, dipasang diatas tag </body>. tapi ingat, pemasangan script ini tidak menghasilkan efek sama sekali. saya sendiri masih mencari letak kesalahan-nya.
<script type='text/javascript'>
//<![CDATA[
// Menu Top
$(document).ready(function(){var str=location.href.toLowerCase();$('.top-menunavi ul li a').each(function(){if(str.indexOf(this.href.toLowerCase())>-1){$("li.highlight").removeClass("highlight");$(this).parent().addClass("highlight")}})})
$(function(){var pull=$('#pull');menu=$('.top-menunavi ul');menuHeight=menu.height();$(pull).on('click',function(e){e.preventDefault();menu.slideToggle()});$(window).resize(function(){var w=$(window).width();if(w>320&&menu.is(':hidden')){menu.removeAttr('style')}})});
//]]>
</script>Setelah komplit melakukan langkah-langkah diatas, jangan lupa save. dan lihat hasilnya.. kalian akan mempunyai blog yang mempunyai top menu navigasi ala template yang dipakai oleh Arlina Design.
 |
| Contoh Top Menu Navigasinya |