Navigation #1 for Blogger Blogspot

<h2 class='post-title entry-title' itemprop='headline'>
ThichNet - Demo For Navigation Menu
</h2>
<div class='post-body entry-content' id='post-body-6668791756184841016' itemprop='articleBody'>
  <style type='text/css'>
.header1 {
    border: 1px red solid;
    padding: 10px;
    margin-bottom: 10px;
    min-height: 40px;
    font-weight: bold;
    text-align: center;
    font-size: 200%;
}
a {    font-size: 20px;text-decoration:none;}

/* 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:580px){
.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;overflow: hidden;}
.menu-trigger {
     line-height: 35px;}
svg#i-chevron-bottom-mobile {margin-top: -7px;margin-right: 40px;}
.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;}}
</style>

<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>
<div class="header1">
HEADER HERE
</div>
<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='https://thichnet.blogspot.com/'><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=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' type='text' value='Search...'/><input id='search-button' type='submit' value='🔍'/></td></tr>
</tbody></table>
</form>
</nav>
<br \>

// 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<580){$(".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>=580){$(".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>
<div style='clear: both;'>
</div>
<div style='text-align:center;margin-top:100px;'>
<a href='https://www.thichnet.com/2017/11/navigation-menu-dep-blogspot.html' target='_blank'>Click here for tutorial</a></div>
</div>

Testcode Online

Code Editor

Navigation #1 for Blogger Blogspot