Trick and tips: Simple Menu Responsive With Logo And Search Box

Menu With Social Media | Menu With Search Box

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>

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...

Trick and tips

Laman

Thursday, November 24, 2016

Simple Menu Responsive With Logo And Search Box

1. Simple Menu Responsive With Logo And Search Box

2. Simple Menu Responsive With Logo And Social Media

No comments:

Post a Comment

Welcome In Creating Website

Contoh Sliding Login Dengan JQuery

Tutorial Blog

Member Login

Not a member yet? Sign Up!