Widget Menu Navigasi Responsive

Cara Mudah dan Simpel memasang menu navigasi responsive di blog

Copy kode berikut pada widget HTML/Javascript
<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>
Klik Simpan, selesai..
Related Posts Plugin for WordPress, Blogger...
WIFADLAN

Widget Menu Navigasi Responsive

0 komentar:

Posting Komentar

KATEGORI

LINK-ORDER

STATISTIK

DAFTAR ISI

SEARCH
