Simple Menu Responsive With Logo And Search Box

Simple Menu Responsive With Logo And Search Box

Bola Hero Gawai

Simple Menu Responsive With Logo And Search Box

Simple Menu Responsive With Logo And Search Box

Ada beberapa sahabat Kompi Ajaib yang menanyakan cara membuat menu yang sedang digunakan di Kompi ajaib yang menyertakan logo blog dan profil sosial media.

Untuk itu, hari ini saya akan bagikan cara membuat menunya. Sebut saja menu ini adalah simple menu responsive karena memang menu ini sangat simple dan tidak menggunakan jquery sehingga sangat ringan jika digunakan.

Menu ini disarankan untuk digunakan sebagai page menu yang disimpan di paling atas dari blog untuk link kontak, privasi, daftar isi dan lainnya, dan di menu ini juga Anda bisa menambahkan logo blog. Saya membuat 2 jenis menu dengan tambahn yang berbeda yaitu dengan link profil sosmed dan kotak pencarian blog. Untuk tampilan menu pada layar besar dan kecil bisa dilihat pada gambar di atas.

Live Demo:

1. Simple Menu Responsive With Logo And Search Box



Copy kode CSS di bawah ini dan letakkan di atas kode ]]></b:skin> atau </style>


.page_menu_wrapper{width:100%;max-width:1100px;margin:0 auto}
.clear{clear:both}
.page-menu ul li{list-style:none;display:inline-block;transition:all 400ms ease-in-out}
.page-menu{float:left;width:auto;height:auto;padding:0!important;margin:0 5px;font-size:100%;font-weight:400}
.page-menu ul{margin:0 auto!important;padding:0!important;line-height:3em}
.page-menu ul li a:hover{color:#e8554e!important}
.page-menu ul li a{color:#666!important;padding:0 20px 0 0;text-decoration:none}
.page-menu ul li a img{vertical-align:middle!important}
.search-box{width:300px;height:27px;float:right;padding:0;margin:8px 8px 1px 0;position:relative}
#search-form,#searchform,.search-button{border:none;line-height:27px}
#searchform{position:relative;border:1px solid #ddd}
#search-form{color:gray;width:100%;padding:0 10px 0 30px;height:27px;line-height:27px;font-size:14px;margin:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.search-button{width:30px;padding:0;text-align:center;margin:0;top:0;left:0;font-size:16px;color:#888;background:0 0;position:absolute;border-radius:0;text-shadow:none;box-shadow:none}
#search-form:focus,#search-form:hover,.search-button:focus,.search-button:hover{border:none;outline:0;color:#000}
@media screen and (max-width:800px){.page-menu,.search-box{width:100%;margin:0}
.page-menu ul li{width:33.3%;float:left}
.page-menu ul li:first-child{width:100%;float:none;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin-top:10px}
.page-menu ul li,.search-box{text-align:center}
.page-menu ul li a{margin:0 auto;padding:0}
#search-box,.page_menu_wrapper{padding-bottom:10px}
#search-box{width:96%;float:left;padding-right:0;margin:0 2%}
.search-box{margin-top:10px}
#searchform{margin:0 10px}
}
@media screen and (max-width:480px){.page-menu ul{line-height:2em}
}
@media screen and (max-width:240px){.page-menu ul li{width:50%}
}

Silahkan sesuaikan max-width:1100px dengan max-width blog Anda.

Kemudian copy kode HTML di bawah ini dan simpan di bawah kode <body


<div class="page_menu_wrapper">
<nav class='page-menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
 <ul>
   <li><a href='/' itemprop='url' expr:title='data:blog.title'><img alt='logo blog' class='image-logo' height='30' src='URL LOGO BLOG' expr:title='data:blog.title' width='171'/></a></li>
   <li><a href='#' itemprop='url' title='About'><span itemprop='name'>About</span></a></li>
   <li><a href='#' itemprop='url' title='Contact'><span itemprop='name'>Contact</span></a></li>
   <li><a href='#' itemprop='url' title='Privacy'><span itemprop='name'>Privacy</span></a></li>
   <li><a href='#' itemprop='url' title='Sitemap'><span itemprop='name'>Sitemap</span></a></li>
   <li><a href='#' itemprop='url' title='Pasang Iklan'><span itemprop='name'>Iklan</span></a></li>
   <li><a href='#' itemprop='url' title='Review Job'><span itemprop='name'>Review Job</span></a></li>
    </ul>  
    <div class='clear'></div>
</nav>
<div class='search-box'>
<form action='/search' id='searchform' method='get'>
<input id='search-form' name='q' placeholder='Search here and hit enter' type='text'/>
    <span class='search-button'><i class='fa fa-search'></i></span>
</form>
  </div>
    <div class='clear'></div>
</div>

Silahkan buat logo blog dengan tinggi 30px dan lebarnya sesuaikan kemudian silahkan ganti URL LOGO BLOG dengan url logo blog Anda dan sesuaikan width dengan lebar logo blog Anda.

Dan sesuaikan About, Contact, dan lainnya sesuai keinginan Anda dan ganti setiap kode # dengan url page yang ingin ditampilkan.

2. Simple Menu Responsive With Logo And Social Media



Copy kode CSS di bawah ini dan letakkan di atas kode ]]></b:skin> atau </style>


.page_menu_wrapper{width:100%;max-width:1100px;margin:0 auto}
.clear{clear:both}
.page-menu ul li,.sos-profil ul{list-style:none}
.page-menu ul li{display:inline-block;transition:all 400ms ease-in-out}
.page-menu{float:left;width:auto;height:auto;padding:0!important;margin:0 5px;font-size:100%;font-weight:400}
.page-menu ul{margin:0 auto!important;padding:0!important;line-height:3em}
.page-menu ul li a:hover{color:#e8554e!important}
.page-menu ul li a{color:#666!important;padding:0 20px 0 0;text-decoration:none}
.page-menu ul li a img{vertical-align:middle!important}
.sos-profil{float:right;margin:0}
.sos-profil li{float:left;display:inline-block;margin-left:10px}
.sos-profil a{color:#666;font-weight:500}
.sos-profil a:hover{color:#e8554e!important}
@media screen and (max-width:800px){.page-menu,.sos-profil{width:100%;margin:0}
.page-menu ul li{width:33.3%;float:left}
.page-menu ul li:first-child{width:100%;float:none;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin-top:10px}
.page-menu ul li,.sos-profil{text-align:center}
.page-menu ul li a{margin:0 auto;padding:0}
.sos-profil ul{width:auto;display:inline-block;float:none;margin:0 auto;padding:0!important}
.sos-profil li{margin:0 10px}
.sos-profil{margin-top:10px}
.page_menu_wrapper{padding-bottom:10px}
}
@media screen and (max-width:480px){.page-menu ul{line-height:2em}
}
@media screen and (max-width:240px){.page-menu ul li{width:50%}
.sos-profil li{margin:0 5px}
}

Silahkan sesuaikan max-width:1100px dengan max-width blog Anda.

Kemudian copy kode HTML di bawah ini dan simpan di bawah kode <body


<div class="page_menu_wrapper">
<nav class='page-menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
 <ul>
   <li><a href='/' itemprop='url' expr:title='data:blog.title'><img alt='logo blog' class='image-logo' height='30' src='URL LOGO BLOG' expr:title='data:blog.title' width='171'/></a></li>
   <li><a href='#' itemprop='url' title='About'><span itemprop='name'>About</span></a></li>
   <li><a href='#' itemprop='url' title='Contact'><span itemprop='name'>Contact</span></a></li>
   <li><a href='#' itemprop='url' title='Privacy'><span itemprop='name'>Privacy</span></a></li>
   <li><a href='#' itemprop='url' title='Sitemap'><span itemprop='name'>Sitemap</span></a></li>
   <li><a href='#' itemprop='url' title='Pasang Iklan'><span itemprop='name'>Iklan</span></a></li>
   <li><a href='#' itemprop='url' title='Review Job'><span itemprop='name'>Review Job</span></a></li>
    </ul>  
    <div class='clear'></div>
</nav>
<div class='sos-profil'>
<ul>
  <li><a href='https://www.facebook.com/username' title='Facebook'><i class='fa fa-facebook fa-lg'></i></a></li>
    <li><a href='https://twitter.com/username' title='Twitter'><i class='fa fa-twitter fa-lg'></i></a></li>
  <li><a href='https://www.google.com/+username' title='Google+'><i class='fa fa-google-plus fa-lg'></i></a></li>
  <li><a href='//id.linkedin.com/in/username' title='LinkedIn'><i class='fa fa-linkedin fa-lg'></i></a></li>
  <li><a href='http://www.youtube.com/c/username' title='Youtube'><i class='fa fa-youtube fa-lg'></i></a></li>
  <li><a href='http://www.blogger.com/follow-blog.g?blogID=258304578432369xxxx' title='Follow Blog'><i class='fa fa-plus-square fa-lg'></i></a></li>
  </ul>
  </div>
    <div class='clear'></div>
</div>

Silahkan buat logo blog dengan tinggi 30px dan lebarnya sesuaikan kemudian silahkan ganti URL LOGO BLOG dengan url logo blog Anda dan sesuaikan width dengan lebar logo blog Anda.

Dan sesuaikan About, Contact, dan lainnya sesuai keinginan Anda dan ganti setiap kode # dengan url page yang ingin ditampilkan. Dan silahkan sesuaikan username setiap url profil sesial media Anda.

Namun karena ikon di menu ini menggunakan font awesome, jadi pastikan bahwa blog Anda sudah menggunakan font awesome.

Selamat mencoba...

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

3 Comments Add Comment

om biar melayang gimana?

Balas

Pak, cara gabungin kode di atas gimana ? Agar bisa seperti menu KompiAjaib ada serching dan sosial mendia. Mohon Pencerahan. Terima Kasih

Balas

Coba di sini http://www.kompiajaib.com/2016/02/show-hide-search-box-and-social-profil.html

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×