Menu navigation dengan search box
Screenshot :
Nanti hasil nya akan seperti itu. Dan kalau gitu kita langsung saja menuju tutorial nya.
Pertama letakan kode di bawah ini di atas ]]><b:skin>
.clearfix:before,.clearfix:after{content:" ";display:table}
.clearfix:after{clear:both}
nav{text-transform:lowercase;height:40px;width:1024px;margin:0 auto;background:#1669aa;font-weight:700;position:relative}
nav ul{float:left;padding:0;margin:0 auto;width:600px;height:40px}
nav li{margin:0;display:inline;float:left}
nav a{color:#fff !important;display:inline-block;width:100px;text-align:center;text-decoration:none;line-height:40px;text-shadow:1px 1px 0 #1669aa}
nav li a{border-right:1px solid #1669aa;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
nav li:last-child a{border-right:0}
nav a:hover,nav a:active{background-color:#028fff!important;-webkit-transition:750ms background ease;-moz-transition:750ms background ease;-ms-transition:750ms background ease;-o-transition:750ms background ease;transition:750ms background ease}
nav a#pull{display:none}
#search input[type="text"]:hover,#search input[type="text"]:focus{outline:none;width:250px;padding-left:35px}
#search input[type="text"]{background-image:url("data:image/svg+xml;charset=utf8,%3csvg%20viewBox='0%200%2024%2024'%20width='24'%20height='24'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath%20style='fill:white'%20d='M9.5,3A6.5,6.5%200%200,1%2016,9.5C16,11.11%2015.41,12.59%2014.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41%2011.11,16%209.5,16A6.5,6.5%200%200,1%203,9.5A6.5,6.5%200%200,1%209.5,3M9.5,5C7,5%205,7%205,9.5C5,12%207,14%209.5,14C12,14%2014,12%2014,9.5C14,7%2012,5%209.5,5Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-color:#1669aa;background-repeat:no-repeat;background-position:6px 6px;width:0;font-size:13px;color:#e7e7e7;padding:10px 10px 10px 25px;transition:all 0.5s ease-in-out;margin:5px 0;z-index:9;position:absolute;border:none;border-radius:0;right:15px;bottom:-2px;font-style:italic;font-weight:normal}
Kedua letakan kode di bawah ini di bawah </header>
<nav class='clearfix'>
<ul class='clearfix'>
<li><a href='/'>Home</a></li>
<li><a href='#'>Panduan Blog</a></li>
<li><a href='#'>Tutorial desain</a></li>
<li><a href='#'>HTML</a></li>
<li><a href='#'>Daftar isi</a></li>
</ul>
<form action='/search' id='search' method='get'>
<input id='q' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Search here ....'/>
</form>
<a href='#' id='pull'>Menu<i class='fa fa-bars'/> </a>
</nav>
Ketiga letakan kode responsive ini di atas ]]><b:skin>
/* RESPONSIVE */
@media screen and (max-width:1024px) {
#outer-wrapper {width:100%;}
}
@media screen and (max-width: 992px){
#main-wrapper, #sidebar-wrapper {float:none;display:block;width:auto;padding:5%;}
#sidebar-wrapper .widget-content {margin:0 0 10px;padding:0;}
#sidebar-wrapper h2 {padding:10px 15px 10px 0;margin:0px 0px 10px;}
}
@media screen and (max-width:880px){
#header-wrapper,nav {width:100% !important}
#header h1 {font-size:170%;}
.post h3 {font-size:170%;}
}
@media screen and (max-width:768px){
.footer-right,.footer-left{text-align:center;float:none;line-height:1.5em;}
.footer-left{padding:0 0 15px 0}
.footer-right{padding:0;}
.footer-left a{margin-right:8px}
form#search{margin:0}
#search input[type="text"]:hover, #search input[type="text"]:focus{width:88%}
}
@media screen and (max-width:600px){
nav{height:auto}nav ul{width:100%;display:block;height:auto}nav li{width:50%;float:left;position:relative}
nav li a{border-bottom:1px solid #1669aa;border-right:1px solid #1669aa}nav a{text-align:left;width:100%;text-indent:25px}
.post-thumbnail-area{width:100%;height:auto;float:none;max-height:230px}
.post-footer{padding:10px 0 25px}
.post{height:auto}
.post-body-area{margin-left:-20px;padding-top:10px}
.comments .comments-content .datetime{display:none}
.comments .avatar-image-container{display:none}
.comments .comment-block, .comments .comments-content .comment-replies{margin-left:0 !important}
}
@media screen and (max-width:480px){
nav{border-bottom:0}nav ul{float:none !important;display:none;height:auto}nav a#pull{display:block;background-color:#1669aa;width:100%;position:relative}
form#search{margin:0}
#search input[type="text"]:hover, #search input[type="text"]:focus{width:80%}
}
@media screen and (max-width:320px){
nav li{display:block;float:none;width:100%}nav li a{border-bottom:1px solid #1669aa}
}
@media screen and (max-width:240px){
/* CSS styles */
}
Keterangan : Sesuaikan lebar/width nya dengan lebar/width template yang sedang anda gunakan. Dan ganti tanda # dengan link menu anda berikut dengan judul nya.
Lihat hasil nya di sini :
Demo
Postingan menu navigation dengan search box ini atas permintaan temen-temen Cara Gery yang request via email. Dan sekarang saya sudah postkan disini.
Selamat mencoba dan semoga bisa bermanfaat.