Navigation menu đẹp cho Blogspot

Updated on May 10, 2019 - Post a Comment
Navigation Menu được hầu hết các Blog sử dụng. Hôm nay mình chia sẻ 1 mẫu Menu đẹp:
- Có Top Menu
- Responsive
- Tích hợp ô tìm kiếm
DEMO

Hướng dẫn thêm Menu vào Blogspot:

1. Add CSS: 

/* CSS Top Menu Wrapper */
.simpletop-wrapper {background:#fff;position:relative;z-index:96;overflow:hidden;margin:0 auto;padding:10px;}
.top-wrappers {padding:0;position:static;max-width:1100px;margin:0 auto;}
/* CSS Top Navigation */
.top-gridnav {display:block;margin:0 auto;float:left;padding:0;width:100%;background:transparent;border:none;}
.top-gridnav ul {width:100%;padding:0;margin:0;text-align:left;}
.top-gridnav li {list-style-type:none;float:left;padding:0;margin:0;}
.top-gridnav li a {position:relative;font-size:14px;background-color:transparent;color:#000;display:block;margin:0;padding:8px 5px;line-height:100%;transition:color 0.3s;}
.top-gridnav ul li a:active, .top-gridnav ul li.highlight a {line-height:100%;text-decoration:none;}
.top-gridnav ul li a:hover {color:#FF6600;text-decoration:none;}
.top-gridnav li.sosmed {float:right;}
.top-gridnav li.sosmed a i{text-align:center;color:#FFF;transition:initial;}
.top-gridnav li.sosmed a:hover,.top-gridnav li.sosmed a:hover i{color:#FF6600;}
.top-gridnav a#pull {display:none;}
.top-gridnav li.sosmed.pinterest i {margin-right:5px;}
/* CSS Main Menu */
#menu {display:block;}
.menu-trigger {display:none;background:#3F51B5;padding:0 10px;line-height:45px;color:#fff!important;}
.menu-trigger:hover {background:#3F51B5;}
#nav{display:inline-block;width:100%;background:#00ad62;margin:0 auto;}
.simple-mainmenu {list-style:none;margin:0 0 0 0;float:left;}
.simple-mainmenu:before,.simple-mainmenu:after {content: " ";display:table;}
.simple-mainmenu:after {clear:both;}
.simple-mainmenu ul {list-style:none;margin:0 0 0 0;width:12em;}
.simple-mainmenu a {display:block;padding:0 15px;}
.simple-mainmenu li {position:relative;margin:0 0;}
.simple-mainmenu > li {float:left;}
.simple-mainmenu > li > a {display:block;line-height:45px;color:#fff;    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(0,0,0,.1);}
  .simple-mainmenu > li > a:hover{background:#029e5b}
  .simple-mainmenu > li > a.active{background:#029e5b}
.simple-mainmenu li ul {background:#333333;display:block;position:absolute;left:0;z-index:10;visibility:hidden;opacity:0;box-shadow:0 0 5px rgba(0,0,0,0.1);transition:initial;}
.simple-mainmenu li li ul {left:100%;top:-1px;}
.simple-mainmenu > li.hover > ul {visibility:visible;opacity:1;}
.simple-mainmenu li li.hover ul {visibility:visible;opacity:10;}
.simple-mainmenu li li a {display:block;color:#fff;position:relative;z-index:100;text-transform:none;line-height:35px;transition:initial;}
.simple-mainmenu li li a:hover {background:#00ad62;color:#fff;}
.simple-mainmenu li li li a {background:#313541;z-index:20;color:#fff;}
.simple-mainmenu li:hover .parent:after{color:rgba(255,255,255,1);}
.simple-mainmenu li ul li .parent:hover:after {color:rgba(255,255,255,1);}
#search-form{float:right;margin:0;max-width:250px}
#search-form table {width:100%;margin:0;}
td.search-box{position:relative;overflow:hidden;line-height:35px}
#search-form input#search-box[type="text"]{background:#243C6D;line-height:35px;margin:2px 10px;padding:0 10px;color:rgba(255,255,255,.7);border:0;border-radius:5px;transition:all .55s}
#search-form input#search-box[type="text"]:focus {background:rgba(255,255,255,1);color:#7f939d;outline:none;}
#search-form input#search-button[type="submit"]{position:absolute;font-size:18px;top:-15px;right:0;display:inline-block;background:transparent;color:rgba(255,255,255,1);;margin:0;padding:22px 25px;border:none;outline:none;transform:rotate(0deg);transition:all .55s}
#search-form input#search-button[type="submit"]:hover{color:#00ad62;cursor:pointer;}
svg#i-chevron-bottom-mobile { float: right; }
@media only screen and (max-width:768px){
.simpletop-wrapper {margin:0;    background: #CFD8DC;
    padding: 0 5px;}
.top-wrappers {margin:0;}
.simple-tooltip,.simple-tooltip:before, .simple-tooltip:after,.simple-tooltip:hover:before, .simple-tooltip:hover:after,.simple-tooltip:before,.simple-tooltip:after,.simple-tooltip-left:before,.simple-tooltip-left:after {display:none;}
.top-gridnav {display:block;width:100%;padding:0}
.top-gridnav ul {text-align:center;}
.top-gridnav ul {display:none;height:auto;}
.top-gridnav a#pull{display:inline-block;font-size:12px;font-weight:bold;position:relative;text-align:right;width:100%;color: #F44336;}
.top-gridnav li {display:block;width:50%;text-align:left;border-right:none;}
.top-gridnav li a {padding:15px 20px;display:block;}
.top-gridnav li a:hover, nav a:active {border:none;color:#00ad62;}
.top-gridnav ul li a:hover {color:#00ad62;}
.top-gridnav li.sosmed {float:left;}
.top-gridnav li.sosmed.twitter {border-left:0;}
.simple-mainmenu > li > a {
      line-height: 35px;}
.shnav {float:none;width:100%;max-width:100%}
.active {display:block;}
#nav {margin:0;border-bottom:0;border-top:0;float:left;}
.menu-trigger {
     line-height: 35px;}
svg#i-chevron-bottom-mobile {margin-top: -7px;}
.simple-mainmenu > li > a.active {border-top:4px solid #00ad62;}
.shnav li ul:before {display:none;}
.shnav > li {float:none;overflow:hidden;}
.shnav ul {display:block;width:100%;float:none;}
.simple-mainmenu li ul {background:#00ad62;box-shadow:none;}
.simple-mainmenu li ul li a{padding-left: 30px;background:#029e5b;border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(0,0,0,.1);}
.simple-mainmenu li li a:hover {background:#029e5b;}
.simple-mainmenu > li > a.active{padding:0 15px;}
.shnav > li.hover > ul , .shnav li li.hover ul {position:static;}
.simple-mainmenu li:active .parent:after,.simple-mainmenu li ul li:active .parent:after {background:#fff;}
#search-form {width:100%;margin:0!important;float:none}
#search-form table{width: 98%; margin:1%;background:#f6f6f6;border-radius:5px}
#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"] {width:100%;margin:0;background:#f6f6f6;color:#666;}
#search-form input#search-button[type="submit"]{margin:-2px 0 0 -6px;color:#7f939d}
  #search-form input#search-box[type="text"]:focus {background:#f6f6f6;outline:none;}}

2. Top Menu

Tìm code hiển thị Header trên Blog ( có thể  là <header hoặc <div  id='header-wrapper'>), ngay phía trên nó, thêm Code bên dưới:

<div class='simpletop-wrapper'>
<div class='top-wrappers'>
<nav class='top-gridnav'>
<ul>
<li><a href='/p/about.html' title='About'>About</a></li>
<li><a href='/p/sitemap.html' title='Sitemap'>Sitemap</a></li>
<li><a href='/p/contact.html' title='Contact'>Contact</a></li>
<li><a href='/p/faqs.html' title='FAQs'>FAQs</a></li>
</ul>
<a href='#' id='pull'><svg fill='none' height='15' id='i-menu' overflow='visible' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' viewBox='0 -6 32 32' width='15'><path d='M4 8 L28 8 M4 16 L28 16 M4 24 L28 24'/></svg> MENU</a>
</nav>
</div>
</div>

3. Navigation Menu

Sau thẻ đóng của Header, thêm Code bên dưới:
<nav id='nav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<a class='menu-trigger' href='#'><svg fill='none' height='20' id='i-menu' overflow='visible' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' viewBox='0 -6 32 32' width='20'><path d='M4 8 L28 8 M4 16 L28 16 M4 24 L28 24'/></svg> Menu</a>
<ul class='shnav simple-mainmenu'>
<li><a class='active' href='/'><span itemprop='name'>Home</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu </span><svg fill='none' height='9' id='i-chevron-bottom-mobile' overflow='visible' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='6' viewBox='-15 -65 32 32' width='9'><path d='M30 12 L16 24 2 12'/></svg></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>2</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Style</span></a>
</li>

<li><a href='/p/sdsd.html' itemprop='url'>Test</a></li>
</ul>
<form action='/search' id='search-form' method='get' style='display: inline;'><table><tbody><tr><td class='search-box'><input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Search...'/><input id='search-button' type='submit' value='🔍'/></td></tr></tbody></table></form>
</nav>

4. Script

Phía trên thẻ </body>, thêm code:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'/>
 <script type='text/javascript'>
//<![CDATA[

// Menu Top
$(document).ready(function(){var str=location.href.toLowerCase();$('.top-gridnav ul li a').each(function(){if(str.indexOf(this.href.toLowerCase())>-1){$("li.highlight").removeClass("highlight");$(this).parent().addClass("highlight")}})})
$(function(){var pull=$('#pull');menu=$('.top-gridnav ul');menuHeight=menu.height();$(pull).on('click',function(e){e.preventDefault();menu.slideToggle()});$(window).resize(function(){var w=$(window).width();if(w>320&&menu.is(':hidden')){menu.removeAttr('style')}})});
// Main Menu
var ww=document.body.clientWidth;$(document).ready(function(){$(".shnav li a").each(function(){if($(this).next().length>0){$(this).addClass("parent")}});$(".menu-trigger").click(function(e){e.preventDefault();$(this).toggleClass("active");$(".shnav").toggle()});adjustMenu()});$(window).bind("resize orientationchange",function(){ww=document.body.clientWidth;adjustMenu()});var adjustMenu=function(){if(ww<768){$(".menu-trigger").css("display","inline-block");if(!$(".menu-trigger").hasClass("active")){$(".shnav").hide()}else{$(".shnav").show()}$(".shnav li").unbind("mouseenter mouseleave");$(".shnav li a.parent").unbind("click").bind("click",function(e){e.preventDefault();$(this).parent("li").toggleClass("hover")})}else if(ww>=768){$(".menu-trigger").css("display","none");$(".shnav").show();$(".shnav li").removeClass("hover");$(".shnav li a").unbind("click");$(".shnav li").unbind("mouseenter mouseleave").bind("mouseenter mouseleave",function(){$(this).toggleClass("hover")})}}

//]]>
</script>
Tags:
Share this: pinterest