Menu navigasi pada umumnya berada dibawah Header judul situs web/blog. Menu navigasi memuat berbagai tautan yang merupakan berbagai tautan yang menjadi konten utama atau merupakan pengelompokan suatu tema pembahasan. Mengingat saat ini semua orang bisa mengakses suatu situs web/blog melalui perangkat mobile dan atau perangkat desktop dengan beragam ukuran layar maka keberadaan menu navigasi yang responsive terhadap perubahan layar menjadi hal yang menguntungkan pengunjung apalagi jika ditambah mesin penelusuran yang dengannya pengunjung hanya cukup memasukkan katakunci untuk melakukan pencarian.
Meski sebagai contoh penempatan menu navigasi responsive yang dilengkapi mesin penelusuran ini berada pada blog yang dihosting di Blogger namun juga dapat diterapkan pada laman situs web lainnya yang kemudian dimodifikasi sedemikian rupa sehingga dapat berfungsi dengan baik.
Bagi yang ingin memasang menu navigasi responsive yang dilengkapi mesin penelusuran pada blog yang dihosting di Blogger, maka akseslah dasbor blog Anda untuk menuju pada bagian Template. Kemudian lakukan pencadangan template untuk melanjutkan memasang baik kode skrip
CSS, kode javaskrip dan tag
HTML.
Pasanglah kode javaskrip berikut sebelum tag
HTML </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
//<![CDATA[
/*! http://tinynav.viljamis.com v1.2 by @viljamis */
(function(a,k,g){a.fn.tinyNav=function(l){var c=a.extend({active:"selected",header:"",indent:"-
",label:""},l);return this.each(function(){g++;var h=a(this),b="tinynav"+g,f=".l_"+b,e=a("<select/>").attr("id",b).addClass("tinynav
"+b);if(h.is("ul,ol")){""!==c.header&&e.append(a("<option/>").text(c.header));var
d="";h.addClass("l_"+b).find("a").each(function(){d+='<option value="'+a(this).attr("href")+'">';var
b;for(b=0;b<a(this).parents("ul, ol").length-1;b++)d+=c.indent;d+=a(this).text()+"</option>"});
e.append(d);c.header||e.find(":eq("+a(f+" li").index(a(f+" li."+c.active))+")").attr("selected",!0);e.change(function(){k.location.href=a(this).val()});a(f).after(e);c.label&&e.before(a("<label/>").attr("for",b).addClass("tinynav_label
"+b+"_label").append(c.label))}})}})(jQuery,this,0);
//]]>
</script>
<script>
// TinyNav.js
$(function () {
$('#menu').tinyNav();
});
</script>
Pasanglah kode skrip
CSS berikut sebelum tag </b:skin>
/* Menu Navigasi */
#nav {font:bold normal 11px Arial, sans-serif;background:#117AC9;border-top: 1px
solid #3690D4;border-bottom:1px solid #0F6DB3;margin:0 auto;padding:0
0;text-transform:uppercase;display:inline-block;width:100%;}
#nav ul#menu {float:left;margin:0px 0px 0px 18px;padding:0px 0px;height:34px;}
#nav li {margin:0px 0px;padding:0px
0px;float:left;display:inline;list-style:none;position:relative;}
#nav li > a {display:block;padding:0 10px;margin:3px
0;line-height:28px;text-decoration:none;color:#ffffff;}
#nav li li > a {display:block;padding:0 10px;margin:0
0;line-height:24px;text-decoration:none;color:#ffffff;}
#nav li:hover > a, #nav a:hover {background-color:#333333;}
#nav li ul {background:#555;margin:0
0;width:170px;height:auto;position:absolute;top:31px;left:0px;z-index:10;display:none;}
#nav li li {display:block;float:none;}
#nav li:hover > ul {display:block;}
#nav li ul ul {left:100%;top:0px;}
#search-form {float:right;margin:0 18px 0 0;font-weight:bold;}
#search-form input#search-box[type="text"] {background:#ffffff;float:left;box-shadow:
inset 2px 2px 0 rgba(75, 75, 75, 0.22);height:26px;line-height:26px;margin:4px
0;padding:0 10px;width:100px;color:#666666;border:none;}
#search-form input#search-button[type="submit"] {float:right;background:#ffffff;color:#ffffff;height:26px;line-height:26px;margin:4px
0;padding:0 7px;border:none;}
#search-form input#search-button[type="submit"]:hover{background:#222;cursor:pointer;}
#search-form input#search-box[type="text"]:focus {background:#eee;outline:none;}
.tinynav {background:#fff;display:none;margin:4px 0 4px
18px;padding:4px;border-top:2px solid #ddd;border-left:2px solid
#ddd;border-right:none;border-bottom:none;}
.tinynav option {padding:0 4px;}
@media only screen and (max-width:640px){
.tinynav {display: inline-block;}
#menu {display:none;}
}
@media only screen and (max-width:480px){
#nav ul#menu {margin:0px 0px 0px 10px;}
#search-form {margin:0 10px 0 0;}
.tinynav {margin:3px 0 3px 10px;}
}
@media screen and (max-width:320px){
#search-form input#search-box[type="text"] {width:80px;}
}
Pasanglah susunan
HTML berikut dibawah tag
HTML </header>
<!-- menu navigasi mulai -->
<nav id='nav'>
<ul id='menu'>
<li><a href='/'>Menu1</a></li>
<li><a href='#'>Menu2</a>
<ul>
<li><a href='#'>Menu2-1</a></li>
<li><a href='#'>Menu2-2</a></li>
</ul>
</li>
<li><a href='#'>Menu3</a>
<ul>
<li><a href='#'>Menu3-1</a></li>
<li><a href='#'>Menu3-2</a></li>
</ul>
</li>
<li><a href='#'>Menu4</a>
<ul>
<li><a href='#'>Menu4-1</a></li>
<li><a href='#'>Menu4-2</a></li>
</ul>
</li>
</ul>
<form action='/search' id='search-form' method='get'
style='display: inline;'><input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;'
onfocus='if(this.value==this.defaultValue)this.value='';' type='text'
value='Search...' vinput=''/> <input id='search-button' type='submit'
value='Go'/></form>
</nav>
<div class='clear'/>
<!-- menu navigasi selesai -->
Setelah selesai, tekan tombol Simpan template dan akseslah situs web/blog Anda untuk melihat hasilnya.
Semoga bermanfaat dan selamat mencoba
0 komentar:
Posting Komentar