Responsive Menu với ô tìm kiếm cho Blogger (Arlina style)

Responsive Menu với ô tìm kiếm cho Blogger (Arlina style)

Bạn có thể xem Demo hình ảnh bên dưới hoặc tại đây

Trước khi thực hiện, sao lưu lại template và phải đảm bảo là template của bạn đã có thư viện Jquery và font Awesome

Desktop navigation Menu

Mobile navigation Menu

CSS Code

Thêm đoạn CSS sau vào trước thẻ ]]></b:skin> hoặc </style>:

/* CSS Main Menu */
menu,nav{display:block;}*{margin:0;padding:0;}html{display:block;}ol,ul{list-style:none;}table{border-collapse:collapse;border-spacing:0;}
a:link,a:visited:hover{color:#3cc091;text-decoration:none;outline:none;transition:all 0.25s;}
input{font-size:100%;line-height:normal;vertical-align:baseline;}
a.menu-slide{display:none;padding:0 15px;height:46px;line-height:46px;color:#222;border-right:1px solid rgba(0,0,0,0.2);text-transform:uppercase;font-weight:400}
a.menu-slide:hover {color:#444;}
#nav {font-size:14px;font-weight:700;background:#374760;height:56px;line-height:56px;margin:0 auto;}
.arlina-mainmenu {background:#374760;list-style:none;margin:0;float:left;}
.arlina-mainmenu:before,.arlina-mainmenu:after {content: " ";display:table;}
.arlina-mainmenu:after {clear:both;}
.arlina-mainmenu ul {list-style:none;margin:0;width:11em;}
.arlina-mainmenu a {display:block;padding:0 15px;}
.arlina-mainmenu li {position:relative;margin:0;}
.arlina-mainmenu > li {float:left;}
.arlina-mainmenu > li > a {display:block;height:56px;line-height:56px;color:#fff;overflow:hidden;transition:initial}
.arlina-mainmenu > li > a.active {background:#3cc091;color:#fff;}
.arlina-mainmenu > li:hover > a {background:#3cc091;color:#fff;}
.arlina-mainmenu > li:hover > a.active {background:#37b185;}
.arlina-mainmenu li ul {background:#fafafa;display:block;position:absolute;top:50%;left:0;z-index:10;visibility:hidden;opacity:0;transition:all .3s}
.arlina-mainmenu li li ul {left:100%;top:-1px;}
.arlina-mainmenu > li.hover > ul {visibility:visible;opacity:1;top:100%;}
.arlina-mainmenu li li.hover ul {visibility:visible;opacity:10;}
.arlina-mainmenu li li a {display:block;color:#768187;position:relative;z-index:100;height:42px;line-height:42px;font-weight:400;transition:initial}
.arlina-mainmenu li li a:hover {background:#3cc091;color:#fff;}
.arlina-mainmenu li li li a {background:#fff;z-index:20;color:#333;}
.arlina-mainmenu li .parent:after {content: "\f0d7";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px;color:#858d8f;}
.arlina-mainmenu li:hover .parent:after{color:#fff;}
.arlina-mainmenu li ul li .parent:after {content: "\f0da";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px;color:#768187;float:right;}
.arlina-mainmenu li ul li .parent:hover:after {color:#fff;}
#search-form {background:#374760;float:right;margin:0;width:210px;}
#search-form table {width:100%;margin:0;}
#search-form td.search-box {padding-right:30px;}
#search-form input#search-box[type="text"] {background:#fff;height:36px;line-height:36px;margin:5px 0 5px 10px;padding:0 10px;width:99%;border:none;}
#search-form input#search-button[type="submit"] {font-family:FontAwesome;background:#3cc091;color:#fff;height:36px;line-height:36px;margin:5px 10px 5px -2px;padding:0 15px;border:none;outline:none;transition:all 0.25s;}
#search-form input#search-button[type="submit"]:hover{background:#37b185;cursor:pointer;}
#search-form input#search-box[type="text"]:focus {background:#fdfdfd;outline:none;}
/* CSS Global Responsive */
@media screen and (max-width:960px) {
#search-form{width:100%;padding:5px 0}
#search-form td.search-box {padding-right:0;width:100%;}
#search-form input#search-box[type="text"] {background:#fff;}
#search-form input#search-box[type="text"]:focus {background:#fefefe;outline:none;}}
@media only screen and (max-width:768px){
#nav {background:#f5f5f5;}
.nav {float:none;width:100%;max-width:100%}
.active {display:block;}
.arlina-mainmenu > li > a.active {background:#374760;border-top:3px solid #3cc091;}
.arlina-mainmenu > li > a.active:hover {background:#3cc091;}
#search-form {margin:0;}
.nav > li {float:none;overflow:hidden;}
.nav ul {display:block;width:100%;float:none;}
.arlina-mainmenu li ul {background:#f6f6f6;box-shadow:none;}
.arlina-mainmenu li ul li a{background:#f0f0f0;}
.arlina-mainmenu > li > a{height:40px;line-height:40px}
.arlina-mainmenu li li a:hover {background:#3cc091;color:#fff;}
.nav > li.hover > ul , .nav li li.hover ul {position:static;}
.arlina-mainmenu li .parent:after,.arlina-mainmenu li ul li .parent:after {content: "\f0d7";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px;float:right;color:#949ea0;}
.arlina-mainmenu li:active .parent:after,.arlina-mainmenu li ul li:active .parent:after {color:#c5cbd0;}
#search-form td.search-box {padding:0 10px!important;}
#search-form td.search-button {padding:0 10px;width:1%;}
#search-form input#search-box[type="text"] {margin:0;background:#fff;}
#search-form input#search-button[type="submit"] {margin:0 0 0 -6px;}
#search-form input#search-box[type="text"]:focus {background:#fdfdfd;outline:none;}}
@media only screen and (min-width:768px){
#menu {display:block;}}
@media only screen and (max-width:640px){
.responsive-menu,#nav{background:#fff;margin:0;height:46px;line-height:46px;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.2)}}

HTML code

Thêm đoạn HTML sau vào bên trên thẻ <header> hoặc bên dưới </header>, phụ thuộc vào template bạn đang sử dụng:

<nav id='nav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<a class='menu-slide' href='#'><i class='fa fa-list'></i> Menu</a>
<ul class='nav arlina-mainmenu'>
<li><a class='active' href='/'><span itemprop='name'><i class='fa fa-home'></i> Home</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Web Tools</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Ad Converter</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Color Picker</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>CSS Filter</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>CSS Minifier</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>CSS Triangle</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Facebook ID</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>CSS</span></a></li><li><a href='#' itemprop='url'><span itemprop='name'>JavaScript</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>SEO</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Template</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Tips Blogger</span></a></li>
</ul>
<form action='/search' id='search-form' method='get' target='_top'>
<table>
<tbody>
<tr>
<td class='search-box'>
<input id='search-box' name='q'  type='text' placeholder='Search...'/>
</td>
<td class='search-button'>
<input id='search-button' type='submit' />
</td>
</tr>
</tbody>
</table>
</form>
</nav>

Javascript

Thêm đoạn Script sau vào trước thẻ đóng </body>

<script type='text/javascript'>
//<![CDATA[  
var ww=document.body.clientWidth;$(document).ready(function(){$(".nav li a").each(function(){if($(this).next().length>0){$(this).addClass("parent")}});$(".menu-slide").click(function(e){e.preventDefault();$(this).toggleClass("active");$(".nav").toggle()});adjustMenu()});$(window).bind("resize orientationchange",function(){ww=document.body.clientWidth;adjustMenu()});var adjustMenu=function(){if(ww<768){$(".menu-slide").css("display","inline-block");if(!$(".menu-slide").hasClass("active")){$(".nav").hide()}else{$(".nav").show()}$(".nav li").unbind("mouseenter mouseleave");$(".nav li a.parent").unbind("click").bind("click",function(e){e.preventDefault();$(this).parent("li").toggleClass("hover")})}else if(ww>=768){$(".menu-slide").css("display","none");$(".nav").show();$(".nav li").removeClass("hover");$(".nav li a").unbind("click");$(".nav li").unbind("mouseenter mouseleave").bind("mouseenter mouseleave",function(){$(this).toggleClass("hover")})}}
$(document).ready(function() {
var aboveHeight = $('header').outerHeight();
$(window).scroll(function(){
if ($(window).scrollTop() > aboveHeight){
$('sticknav').addClass('fixed').css('top','0').next().css('padding-top','60px');
} else {
$('sticknav').removeClass('fixed').next().css('padding-top','0');
}
});
});
//]]>
</script>