Cara Membuat Menu Navigasi Responsive

 Jariwisdzgn.com - Kali ini saya akan membahas cara membuat menu Navigasi Responsive + Kotak pencarian. Menu navigasi sangat di butuhkan untuk sobat yang ingin mendaftar di Google Adsense , karena jika sobat belum mempunyai menu navigasi , maka permintaan sobat akan di tolak oleh google adsense. Langsung saja saya praktekin cara - cara untuk membuat Menu navigasi responsive.

Pertama - Login akun google sobat ,  masuk ke tema , lalu klik "Edit HTML"

Kedua - Cari Kode </head> , agar lebih mudah untuk mencari sobat cari menggunakan CTRL + F .

Ketiga - Salin kode di bawah ini di atas kode </head> .

<script src='http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'/>
<script>
$(document).ready(function(){
$(&quot;#toggle&quot;).click(function(){
$(&quot;#croscoll ul&quot;).toggleClass(&quot;displaying&quot;);
});
$(&quot;#toggleMenu&quot;).click(function(){
$(&quot;#menu ul&quot;).toggleClass(&quot;displaying&quot;);
});
});
</script>

Keempat - Cari kode ]]></b:skin> , agar lebih mudah untuk mencari sobat cari menggunakan CTRL + F.

Kelima - Salin kode di bawah ini di atas kode ]]></b:skin>

/* Menu Navigasi By Jariwis Design */
#toggleMenu {
    display:none;
}
#toggleMenu {
    background:#ff6600;
    color:#fff;
    padding:10px 12px;
    font-size:12px;
    cursor:pointer;
}
#menu{
    background:#ff6600;
}
#menu-box {
    max-width: 1000px;
    height: auto;
    padding: 0 0;
    margin: 0 auto;
    overflow: hidden;
}
#menu ul li a{
    color:#eee;
}
#menu ul li ul li a:hover{
    color:#fff;
    background:transparant;
}
#menu ul li:hover a{
    color:#fff;
    background:transparant;
}
#menu{
    overflow:hidden;
    clear:both;
}
#menu ul{
    list-style:none;
    padding:0;
    margin:0;
}
#menu ul li{
    display:block;
    float:left;
    margin:0 12px;
    padding:10px 0;
}
#menu ul li a{
    display:block;
    font-family:'Oswald',sans-serif;
    font-size:12px;
    transition:all 0s ease-in-out;
    text-transform:none;
}
#menu ul li ul li{
    float:none;
    border-top:1px solid #ddd;
}
#menu ul li ul li a{
    font-size:12px;
}
#menu ul li ul{
    visibility:hidden;
    position:absolute;
    z-index:9999;
}
#menu ul li:hover ul{
    visibility:visible;
    color:#fff;
    background:none;
}
@media only screen and (max-width:670px){
    #toggle,#toggleMenu {
        display:block;
        clear:both;
    }
    #toggleMenu{
        float:left;
    }
    .displaying{
        display:inherit!important;
    }
    #menu ul li{
        float:none;
        border-top: 1px solid #ddd;
    }
    #menu ul li ul{
        position:inherit;
        visibility:visible;
        background:#fff;
    }
    #menu ul li ul li a{
        padding:10px 0 10px 45px;
    }
    #menu ul li:hover a{
        color:#fff;
        background:inherit;
    }
    #menu ul{
        display:none;
        float:none;
        clear:both;
    }
}
/* Kotak Pencarian By Jariwis Design */
#search-form {
    float:right;
    margin:5px 12px;
    border: 1px solid #ddd;
    border-radius: 3px;
    width:210px;
}
#search-form table {
    background:#fff;
    width:100%;
    margin: 0 0;
}
#search-form td.search-box {
    padding-right: 0;
}
#search-form input#search-box[type="text"] {
    background:$(input.background.color);
    font-size: 11px;
    float:left;
    height:24px;
    line-height:24px;
    margin:0 0;
    padding:0 8px;
    max-width:100px;
    color:$(input.color);
    border:none;
}
#search-form input#search-button[type="submit"] {
    font-family:FontAwesome;
    font-size: 11px;
    float:right;
    background:$(button.background.color);
    color:$(button.color);
    height:24px;
    line-height:24px;
    margin:0 0;
    padding:0 10px;
    border: none;
}
#search-form input#search-button[type="submit"]:hover{
    background:none;
    cursor:pointer;
}
#search-form input#search-box[type="text"]:focus {
    background:none;
    border:none;
}
@media only screen and (max-width:320px){
    #search-form input#search-box[type="text"] {
        width:100%;
    }
}

Keenam - Cari kode <header> , agar lebih mudah untuk mencari  sobat cari menggunakan CTRL + F.

Ketujuh - Salin kode di bawah ini tepat di bawah kode <header>

<!-- Desktop Navigation Menu Start -->
<nav id='menu'>
<div id='menu-box'>
<label id='toggleMenu'><i class='fa fa-ellipsis-v fa-lg'/></label>
<ul>
<li><a href='#' title='About'>About</a></li>
<li><a href='#' title='Contact'>Contact</a></li>
<li><a href='#' title='Sitemap'>Sitemap</a></li>
<li><a href='#' title='Disclaimer'>Disclaimer</a></li>
<li><a href='#' title='Privacy'>Privacy</a></li>
<li><a href='#' title='Terms of Service'>TOS</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...'/></td>
<td class='search-button'><input id='search-button' type='submit' value=''/></td></tr></tbody></table></form>
</div>
</nav>
<!-- Secondary Navigation Menu End -->

Terimakasih telah membaca artikel di Jariwis Design , Semoga artikel yang saya buat bermanfaat untuk kalian semua.

Share this post