Notification texts go here Contact Us Buy Now!
Home
Blogger
responsive

Menu Navigation bar Blogger Respensive 

<nav id="nav" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement" role="navigation">
  <a style="display: none;" class="menu-slide" href="#"><i class="fa fa-list"></i> Menu</a>
  <ul class="nav kang-teja">
    <li class=""><a class="active" href="/"><span itemprop="name"><i class="fa fa-home"></i> Home</span></a></li>
    <li class=""><a class="parent" href="#" itemprop="url"><span itemprop="name">Web Tools</span></a>
      <ul>
        <li class=""><a href="#" itemprop="url"><span itemprop="name">Ad Converter</span></a></li>
        <li class=""><a href="#" itemprop="url"><span itemprop="name">Color Picker</span></a></li>
        <li class=""><a href="#" itemprop="url"><span itemprop="name">CSS Filter</span></a></li>
        <li class=""><a href="#" itemprop="url"><span itemprop="name">CSS Minifier</span></a></li>
        <li class=""><a href="#" itemprop="url"><span itemprop="name">CSS Triangle</span></a></li>
        <li class=""><a href="#" itemprop="url"><span itemprop="name">Fontawesome</span></a></li>
        <li class=""><a href="#" itemprop="url"><span itemprop="name">Kamus HTML</span></a></li>
      </ul>
    </li>
    <li class=""><a href="https://mastamvan.blogspot.com/search/label/CSS?&amp;max-results=6" itemprop="url"><span itemprop="name">CSS</span></a></li>
    <li class=""><a href="https://mastamvan.blogspot.com/search/label/HTML?&amp;max-results=6" itemprop="url"><span itemprop="name">HTML</span></a></li>
    <li><a href="https://mastamvan.blogspot.com/search/label/Seo?&amp;max-results=6" itemprop="url"><span itemprop="name">SEO</span></a></li>
    <li><a href="https://mastamvan.blogspot.com/search/label/Templates?&amp;max-results=6" itemprop="url"><span itemprop="name">Template</span></a></li>
    <li><a href="#" itemprop="url"><span itemprop="name">Tips Blogger</span></a></li>
    <li><a href="#" itemprop="url"><span itemprop="name">Widget</span></a></li>
  </ul>
  <form action="https://mastamvan.blogspot.com/p/search-post-mas-tamvan.html" id="search-form">
    <input name="cx" value="partner-pub-016346400151212832090:egwuycyircu" type="hidden"/>
    <input name="cof" value="FORID:10" type="hidden"/>
    <input name="ie" value="ISO-8859-1" type="hidden"/>
    <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='';" value="Search..." type="text"/>
          </td>
          <td class="search-button">
            <input id="search-button" value="" type="submit"/>
          </td>
        </tr>
      </tbody>
    </table>
  </form>
</nav>
<style type='text/css'>
/* CSS HTML5 */
menu,nav{display:block;}*{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}input,button,select,textarea{font-size:100%;line-height:normal;vertical-align:baseline;}
/* CSS Main Menu */
a.menu-slide{display:none;background:#374760;padding:0 15px;height:46px;line-height:46px;color:#fff;text-transform:uppercase}
a.menu-slide:hover {color:#fff;}
#nav {font-size:14px;font-weight:700;background:#374760;height:56px;line-height:56px;margin:0 auto;}
.kang-teja {background:#374760;list-style:none;margin:0;float:left;}
.kang-teja:before,.kang-teja:after {content: " ";display:table;}
.kang-teja:after {clear:both;}
.kang-teja ul {list-style:none;margin:0;width:11em;}
.kang-teja a {display:block;padding:0 15px;}
.kang-teja li {position:relative;margin:0;}
.kang-teja > li {float:left;}
.kang-teja > li > a {display:block;height:56px;line-height:56px;color:#fff;overflow:hidden;transition:initial}
.kang-teja > li > a.active {background:#3cc091;color:#fff;}
.kang-teja > li:hover > a {background:#3cc091;color:#fff;}
.kang-teja > li:hover > a.active {background:#37b185;}
.kang-teja li ul {background:#fafafa;display:block;position:absolute;top:50%;left:0;z-index:10;visibility:hidden;opacity:0;transition:all .3s}
.kang-teja li li ul {left:100%;top:-1px;}
.kang-teja > li.hover > ul {visibility:visible;opacity:1;top:100%;}
.kang-teja li li.hover ul {visibility:visible;opacity:10;}
.kang-teja li li a {display:block;color:#768187;position:relative;z-index:100;height:42px;line-height:42px;font-weight:400;transition:initial}
.kang-teja li li a:hover {background:#3cc091;color:#fff;}
.kang-teja li li li a {background:#fff;z-index:20;color:#333;}
.kang-teja li .parent:after {content: "\f0d7";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px;color:#858d8f;}
.kang-teja li:hover .parent:after{color:#fff;}
.kang-teja 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;}
.kang-teja 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 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 Menu Responsive */
@media screen and (max-width:960px){
  #search-form{width:100%;background:#263142;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 li ul:before{display:none;height:auto;overflow:hidden;border-bottom:1px solid rgba(0,0,0,0.1);}
  #nav{background:#374760}
  .nav{float:none;width:100%;max-width:100%;}
  .active{display:block;}
  .kang-teja > li > a.active{background:#263142;}
  .kang-teja > li > a.active:hover{background:#263142;}
  #search-form{margin:0;}
  .nav > li{float:none;overflow:hidden;}
  .nav ul{display:block;width:100%;float:none;}
  .kang-teja li ul{background:#f6f6f6;box-shadow:none;}
  .kang-teja li ul li a{background:#f0f0f0;}
  .kang-teja > li > a{background:#263142;height:40px;line-height:40px;}
  .kang-teja li li a:hover{background:#263142;color:#fff;}
  .nav > li.hover > ul,.nav li li.hover ul{position:static;}
  .kang-teja li .parent:after,.kang-teja 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;}
  .kang-teja li:active .parent:after,.kang-teja li ul li:active .parent:after{color:#c5cbd0;}
  #search-form td.search-box{padding:0 0 0 10px;}
  #search-form td.search-button{width:1%;}
  #search-form input#search-box[type="text"]{margin:0;background:#fff;}
  #search-form input#search-box[type="text"]:focus{background:#fdfdfd;outline:none;}
;}
@media only screen and (max-width:640px){
  #nav{background:#374760;margin:0;height:46px;line-height:46px;}
;}
</style>
<script type='text/javascript'>
//<![CDATA[
// Main Menu
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")})}}
//]]>
</script>

<nav id="nav" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement" role="navigation">
  <a style="display: none;" class="menu-slide" href="#"><i class="fa fa-list"></i> Menu</a>
  <ul class="nav kang-teja">
    <li class=""><a class="active" href="/"><span itemprop="name"><i class="fa fa-home"></i> Home</span></a></li>
    <li class=""><a class="parent" href="#" itemprop="url"><span itemprop="name">Web Tools</span></a>
      <ul>
        <li class=""><a href="#" itemprop="url"><span itemprop="name">Ad Converter</span></a></li>
        <li class=""><a href="#" itemprop="url"><span itemprop="name">Color Picker</span></a></li>
        <li class=""><a href="#" itemprop="url"><span itemprop="name">CSS Filter</span></a></li>
        <li class=""><a href="#" itemprop="url"><span itemprop="name">CSS Minifier</span></a></li>
        <li class=""><a href="#" itemprop="url"><span itemprop="name">CSS Triangle</span></a></li>
        <li class=""><a href="#" itemprop="url"><span itemprop="name">Fontawesome</span></a></li>
        <li class=""><a href="#" itemprop="url"><span itemprop="name">Kamus HTML</span></a></li>
      </ul>
    </li>
    <li class=""><a href="https://mastamvan.blogspot.com/search/label/CSS?&amp;max-results=6" itemprop="url"><span itemprop="name">CSS</span></a></li>
    <li class=""><a href="https://mastamvan.blogspot.com/search/label/HTML?&amp;max-results=6" itemprop="url"><span itemprop="name">HTML</span></a></li>
    <li><a href="https://mastamvan.blogspot.com/search/label/Seo?&amp;max-results=6" itemprop="url"><span itemprop="name">SEO</span></a></li>
    <li><a href="https://mastamvan.blogspot.com/search/label/Templates?&amp;max-results=6" itemprop="url"><span itemprop="name">Template</span></a></li>
    <li><a href="#" itemprop="url"><span itemprop="name">Tips Blogger</span></a></li>
    <li><a href="#" itemprop="url"><span itemprop="name">Widget</span></a></li>
  </ul>
  <form action="https://mastamvan.blogspot.com/p/search-post-mas-tamvan.html" id="search-form">
    <input name="cx" value="partner-pub-016346400151212832090:egwuycyircu" type="hidden"/>
    <input name="cof" value="FORID:10" type="hidden"/>
    <input name="ie" value="ISO-8859-1" type="hidden"/>
    <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='';" value="Search..." type="text"/>
          </td>
          <td class="search-button">
            <input id="search-button" value="" type="submit"/>
          </td>
        </tr>
      </tbody>
    </table>
  </form>
</nav>

<style type='text/css'>
/* CSS HTML5 */
menu,nav{display:block;}*{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}input,button,select,textarea{font-size:100%;line-height:normal;vertical-align:baseline;}
/* CSS Main Menu */
a.menu-slide{display:none;background:#374760;padding:0 15px;height:46px;line-height:46px;color:#fff;text-transform:uppercase}
a.menu-slide:hover {color:#fff;}
#nav {font-size:14px;font-weight:700;background:#374760;height:56px;line-height:56px;margin:0 auto;}
.kang-teja {background:#374760;list-style:none;margin:0;float:left;}
.kang-teja:before,.kang-teja:after {content: " ";display:table;}
.kang-teja:after {clear:both;}
.kang-teja ul {list-style:none;margin:0;width:11em;}
.kang-teja a {display:block;padding:0 15px;}
.kang-teja li {position:relative;margin:0;}
.kang-teja > li {float:left;}
.kang-teja > li > a {display:block;height:56px;line-height:56px;color:#fff;overflow:hidden;transition:initial}
.kang-teja > li > a.active {background:#3cc091;color:#fff;}
.kang-teja > li:hover > a {background:#3cc091;color:#fff;}
.kang-teja > li:hover > a.active {background:#37b185;}
.kang-teja li ul {background:#fafafa;display:block;position:absolute;top:50%;left:0;z-index:10;visibility:hidden;opacity:0;transition:all .3s}
.kang-teja li li ul {left:100%;top:-1px;}
.kang-teja > li.hover > ul {visibility:visible;opacity:1;top:100%;}
.kang-teja li li.hover ul {visibility:visible;opacity:10;}
.kang-teja li li a {display:block;color:#768187;position:relative;z-index:100;height:42px;line-height:42px;font-weight:400;transition:initial}
.kang-teja li li a:hover {background:#3cc091;color:#fff;}
.kang-teja li li li a {background:#fff;z-index:20;color:#333;}
.kang-teja li .parent:after {content: "\f0d7";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px;color:#858d8f;}
.kang-teja li:hover .parent:after{color:#fff;}
.kang-teja 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;}
.kang-teja 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 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 Menu Responsive */
@media screen and (max-width:960px){
  #search-form{width:100%;background:#263142;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 li ul:before{display:none;height:auto;overflow:hidden;border-bottom:1px solid rgba(0,0,0,0.1);}
  #nav{background:#374760}
  .nav{float:none;width:100%;max-width:100%;}
  .active{display:block;}
  .kang-teja > li > a.active{background:#263142;}
  .kang-teja > li > a.active:hover{background:#263142;}
  #search-form{margin:0;}
  .nav > li{float:none;overflow:hidden;}
  .nav ul{display:block;width:100%;float:none;}
  .kang-teja li ul{background:#f6f6f6;box-shadow:none;}
  .kang-teja li ul li a{background:#f0f0f0;}
  .kang-teja > li > a{background:#263142;height:40px;line-height:40px;}
  .kang-teja li li a:hover{background:#263142;color:#fff;}
  .nav > li.hover > ul,.nav li li.hover ul{position:static;}
  .kang-teja li .parent:after,.kang-teja 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;}
  .kang-teja li:active .parent:after,.kang-teja li ul li:active .parent:after{color:#c5cbd0;}
  #search-form td.search-box{padding:0 0 0 10px;}
  #search-form td.search-button{width:1%;}
  #search-form input#search-box[type="text"]{margin:0;background:#fff;}
  #search-form input#search-box[type="text"]:focus{background:#fdfdfd;outline:none;}
;}
@media only screen and (max-width:640px){
  #nav{background:#374760;margin:0;height:46px;line-height:46px;}
;}
</style>

<script type='text/javascript'>
//<![CDATA[
// Main Menu
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")})}}
//]]>
</script>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">

Getting Info...
#Blogger #responsive

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.