M
enu Navigasi responsive (Mobile Friendly) ini saya intip dari Blog johnywussresponsif.blogspot.co.id dan menu Navigasi ini juga sudah terpasang di bawah header Blog ini. Navigasi Menu ini memang 100% responsive dan mobil Friendly. Sudah saya tes dengan beberapa browser, tablet phone dan smartphone dengan berbagai resolusi berbeda dan hasilnya benar-benar Responsive.
Thank buat johnywussresponsif.blogspot.co.id, sekalian ijin comot dan share Menu Navigasi responsive (Mobile Friendly) ini di Blog ini.
Bagi Anda yang berminat meminang Menu Navigasi responsive (Mobile Friendly) ini di Blog Anda, silakan ikuti tutorial ini:
1. Masuk ke Template >> Edit HTML
2. Cari (ctrl+f) kode ]]></b:skin>
3. Salin dan paste kode di bawah ini sebelum ]]></b:skin>
/*-----Responsive Down Menu ----*/
body {
margin: 0px;
}
#menu{background: #484848;color: #F2F2F2;height: 35px;border-bottom: 2px solid #DDD;}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:40px;width:1024px}
#menu li{float:left;display:inline;position:relative;font:bold 1em Arial;text-shadow: 1px 2px 4px #838383;}
#menu a{display: block;line-height: 35px;padding: 0 14px;text-decoration: none;color: #FFF;}
#menu li a:hover{color: #E4E4E4;-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out;background: #5FC6EB;}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:16px;position:absolute;left:35px}
#menu ul.menus{height: auto;overflow: hidden;width: 170px;background: #50B7DC;position: absolute;z-index: 99;display: none;}
#menu ul.menus li{display: block;width: 100%;font:normal 1em Arial;text-transform: none;text-shadow: none;border-bottom: 1px dotted #31AFDB;}
#menu ul.menus a{color: #FFF;line-height: 35px;}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{background: #5FC6EB;color: #FFF;-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out;}
@media screen and (max-width: 800px){
#menu{position:relative}
#menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menu ul.menus{width:100%;position:static;padding-left:20px}
#menu li{display:block;float:none;width:auto; font:normal 1em Arial;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}
}
4. Cari (ctrl+f) kode <body>
5. Salin dan paste kode di bawah ini setelah kode <body>.
<nav id='menu'>
<input type='checkbox'/>
<label>≡<span>Navigasi Menu</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>Kategori 1</a></li>
<li><a href='#'>Kategori 2</a></li>
<li><a href='#'>Kategori 3</a></li>
<li><a href='#'>Kategori 4</a></li>
<li><a href='#'>Drop Down Menu <font size='1'>▼</font></a>
<ul class='menus'>
<li><a href='#'>Drop 1</a></li>
<li><a href='#'>Drop 2</a></li>
<li><a href='#'>Drop 3</a></li>
</ul>
</li>
<li><a href='http://berbagitipsblogger.blogspot.com/' target='_blank'>Links</a></li>
</ul>
</nav>
Note :
=> Jika di tata Letak template Anda sudah ada ruang Add gadget di bawah header, lewati langkah no.4 dan no.5. Anda bisa memasukkan kode di atas
langsung di Tata Letak >> Add gadget >> HTML/JavaScript.
=> Ganti "#" dengan alamat URL Anda.
6. Terakhir klik Simpan.
Demikian Membuat Navigasi Menu Responsive (Mobile Friendly) di blog blogspot. Semoga bisa membantu. Terima kasih.
:iloveindonesia tes
ReplyDelete:c: tes
ReplyDelete