√ Cara Memasang Responsive Menu Navigasi

Cara Memasang Responsive Menu Navigasi

6/22/2017

Cara Memasang Responsive Menu Navigasi - Tanpa menu navigasi, tampilan blog jadi kurang lengkap karena navigasi juga merupakan salah satu pendukung SEO Onpage.

Untuk itu di kesempatan kali ini admin akan membagian cara memasang menu navigasi dropdown responsive.

Menu ini saya ambil dari template invision dari mbak arlina.

Untuk yang ingin mencoba atau memasang nya silahkan simak tuorial berikut.

Pertama buka dashboard blogger > template > edit html

Kemudian pasang kode CSS berikut sebelum ]]></b:skin> atau </style>

Kode CSS

View

/* Main Navigation by www.naminakiky.com */
#inv-navigation{background:#fff;font-size:0;white-space:nowrap;letter-spacing:.5px;margin:0 auto}
#inv-navigation ul.menus{height:auto;overflow:hidden;position:absolute;z-index:99;display:none}
#inv-navigation a{display:block;padding:20px 12px;text-decoration:none;color:#fff;text-transform:uppercase}
#inv-navigation ul,#inv-navigation li{background:#4AA3DF;margin:0 auto;padding:0;list-style:none}
#inv-navigation li{display:inline-block;position:relative;font-size:13px;font-weight:700}
#inv-navigation li.indie a{background:rgba(0,0,0,0.06);padding:20px}
#inv-navigation li:hover.indie,#inv-navigation li:hover.indie a{background:rgba(0,0,0,.06)}
#inv-navigation input{display:none;margin:0;padding:0;width:80px;height:45px;opacity:0;cursor:pointer}
#inv-navigation label{display:none;width:55px;height:48px;line-height:48px;text-align:center}
#inv-navigation label span{font-size:16px;position:absolute;left:55px}
#inv-navigation ul.menus li{display:block;width:100%;text-transform:none;text-shadow:none}
#inv-navigation ul.menus a{color:#ec3838;line-height:55px}
#inv-navigation li a:hover{background:rgba(0,0,0,.06);color:#fff}
#inv-navigation ul.menus a:hover{background:rgba(0,0,0,.06);color:#fff}
#inv-navigation li ul{visibility:hidden;opacity:0;background:#fff;margin:0;width:150px;height:auto;position:absolute;top:100%;left:0;z-index:10;box-shadow:0 4px 15px -2px rgba(0,0,0,0.1)}
#inv-navigation li:hover ul.menus,#inv-navigation li:hover >
ul{visibility:visible;opacity:1}
#inv-navigation li li{display:block;float:none;font-size:13px;border-bottom:1px solid #f5f5f5}
#inv-navigation li li:last-child{border:0}
#inv-navigation li ul ul{left:100%;top:0}
#inv-navigation li li >
a{background:#fff;color:#999;display:block;padding:12px 15px;margin:0;text-decoration:none;text-transform:none;font-weight:400;box-shadow:inset 3px 0 0 transparent;transition:background .3s}
#inv-navigation li li:hover,#inv-navigation li li a:hover{background:#fafafa;color:#444;box-shadow:inset 3px 0 0 #ccc}
@media screen and (max-width:800px){#menu{display:block}#inv-navigation{font-size:initial;color:#888;position:relative;display:block;padding:20px;text-transform:uppercase;font-weight:700}#inv-navigation ul{background:#fff;position:absolute;top:100%;left:0;z-index:3;height:auto;display:none}#inv-navigation ul.menus{width:100%;position:static;padding-left:20px}#inv-navigation li{background:#fff;display:block;float:none;width:auto}#inv-navigation a,#inv-navigation li a:hover{color:#444}#inv-navigation li.indie a{background:#fff;padding:20px 12px}#inv-navigation input,#inv-navigation label{position:absolute;top:0;left:0;display:block}#inv-navigation input{z-index:4}#inv-navigation input:checked + label{color:#888}#inv-navigation input:checked ~ ul{display:block;width:100%}#inv-navigation li:hover >  ul{width:100%}#inv-navigation li li{border:0}#inv-navigation li li >  a{background:#f9f9f9;color:#888;transition:initial;font-weight:700}#inv-navigation li li:hover,#inv-navigation li li a:hover{background:#bbb;color:#fff;box-shadow:inset 3px 0 0 transparent}#inv-navigation li ul{background:rgba(0,0,0,.15);display:block;visibility:visible;opacity:1;padding:0;position:relative;width:100%;left:initial;box-shadow:none}#inv-navigation li:hover ul.menus,#inv-navigation li:hover >  ul{left:initial}}

Untuk kode HTML nya silahkan pasang sesuai keinginan, biasanya dibawah </header> (Untuk yang mengikuti tutorial membuat template sendiri taruh dibawah </header>)

Kode HTML

View

<nav id='inv-navigation' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
<div class='maxwrap'>
<input type='checkbox'>&#9776; Navigation</input>
<ul>
<li class='indie'><a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'><span itemprop='name'>Home</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Blog</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>About</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Contact</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Disclaimer</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Privacy Policy</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sitemap</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Terms of Service</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Bisnis Online</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Info Menarik</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Internet</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Kesehatan</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Kategori</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>About</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Contact</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Disclaimer</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Privacy Policy</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sitemap</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Terms of Service</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Error 404</span></a></li>
</ul>
</div>
</nav>

Demikian tutorial mengenai cara membuat menu navigasi responsive, Untuk style bisa sobat edit sesuai selera seperti warna dan sebagainya.

Untuk demo bisa sobat kunjungi blog berikut .

Result

Dan berikut kode menu dengan slide mobile menu

Kode CSS

View

/* Main Navigation with Slide Mobile by www.naminakiky.com */
#inv-navigation{margin:0 auto}
.nav-iumari{display:block;margin:15px auto;background:#03A9F4;box-shadow:0 2px 5px 0 rgba(0,0,0,0.26);border-radius:3px}
.nav-iumari ul{list-style-type:none;margin:0;padding:0;display:block}
.nav-iumari li{list-style-type:none;margin:0;padding:0;display:inline-block;position:relative;font-size:14;color:#def1f0}
.nav-iumari li a{padding:15px 20px;font-size:14;color:#def1f0;display:inline-block;outline:0;font-weight:400}
.nav-iumari li:hover ul.dropdown{display:block}
.nav-iumari li ul.dropdown{position:absolute;display:none;width:200px;background:#2980B9;box-shadow:0 2px 5px 0 rgba(0,0,0,0.26);padding-top:0}
.nav-iumari li ul.dropdown li{display:block;list-style-type:none}
.nav-iumari li ul.dropdown li a{padding:15px 20px;font-size:15px;color:#fff;display:block;font-weight:400}
.nav-iumari li ul.dropdown li:last-child a{border-bottom:none}
.nav-iumari li:hover a{background:#2980B9;color:#fff!important}
.nav-iumari li:first-child:hover a{border-radius:3px 0 0 3px}
.nav-iumari li ul.dropdown li:hover a{background:rgba(0,0,0,.1)}
.nav-iumari li ul.dropdown li:first-child:hover a{border-radius:0}
.nav-iumari li:hover .arrow-down{border-top:5px solid #fff}
.arrow-down{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #def1f0;position:relative;top:15px;right:-5px;content:''}
.title-mobile{display:none}
.fixed-top{position:fixed;top:0;right:0;left:0}
@media only screen and (max-width:900px){.nav-iumari{background:#fff;width:200px;height:100%;display:block;position:fixed;left:-200px;top:0;transition:left 0.25s ease;margin:0;border:0;border-radius:0;overflow-y:auto;overflow-x:hidden;height:100%}.title-mobile{position:fixed;display:block;top:10px;font-size:20px;left:100px;right:100px;text-align:center;color:#FFF}.nav-iumari.visible{left:0;transition:left 0.25s ease}.nav-bg-iumari{display:inline-block;vertical-align:middle;width:100%;height:50px;margin:0;position:absolute;top:0;left:0;background:#03A9F4;padding:12px 0 0 10px;box-shadow:0 2px 5px 0 rgba(0,0,0,0.26)}.navbar-iumari{display:inline-block;vertical-align:middle;height:50px;cursor:pointer;margin:0;position:absolute;top:0;left:0;padding:12px}.navbar-iumari span{height:2px;background:#fff;margin:5px;display:block;width:20px}.navbar-iumari span:nth-child(2){width:20px}.navbar-iumari span:nth-child(3){width:20px}.nav-iumari ul{padding-top:50px}.nav-iumari li{display:block}.nav-iumari li a{display:block;color:#505050;font-weight:600}.nav-iumari li:first-child:hover a{border-radius:0}.nav-iumari li ul.dropdown{position:relative}.nav-iumari li ul.dropdown li a{background:#2980B9!important;border-bottom:none;color:#fff!important}.nav-iumari li:hover a{background:#03A9F4;color:#fff!important}.nav-iumari li ul.dropdown li:hover a{background:rgba(0,0,0,.1);!important;color:#fff!important}.nav-iumari li ul.dropdown li a{padding:10px 10px 10px 30px}.nav-iumari li:hover .arrow-down{border-top:5px solid #fff}.arrow-down{border-top:5px solid #505050;position:absolute;top:20px;right:10px}.cover-bg{background:rgba(0,0,0,0.5);position:fixed;top:0;bottom:0;left:0;right:0}}

Kode HTML

View

<nav id='inv-navigation'>
<div class='nav-iumari'>
<ul>
<li><a href=''>Home</a></li>
<li><a href='javascript:void(0)'>Web Design<span class='arrow-down'></span></a>
<ul class='dropdown'>
<li><a href=''>HTML</a></li>
<li><a href=''>CSS</a></li>
<li><a href=''>Javascript</a></li>
<li><a href=''>JQuery</a></li>
</ul>
</li>
<li><a href='javascript:void(0)'>Blogger<span class='arrow-down'></span></a>
<ul class='dropdown'>
<li><a href=''>Widget</a></li>
<li><a href=''>Tips</a></li>
</ul>
</li>
<li><a href='javascript:void(0)'>SEO<span class='arrow-down'></span></a>
<ul class='dropdown'>
<li><a href=''>Tools</a></li>
<li><a href=''>Backlink</a></li>
</ul>
</li>
<li><a href=''>Google Adsense</a></li>
<li><a href=''>Advertising</a></li>
<li><a href=''>Business</a></li>
</ul>
</div>
<div class='nav-bg-iumari'>
<div class='navbar-iumari'> <span></span> <span></span> <span></span> </div>
<a href='' class='title-mobile'>Iumari</a>
</div>
</nav>

Kode jQuery

View

<script type='text/javascript'>
$(document).ready(function() {
$('.navbar-iumari').click(function() {
$('.nav-iumari').toggleClass('visible');
$('body').toggleClass('cover-bg');
});
});
</script>

Result

Namina Kiky

Cara Memasang Responsive Menu Navigasi

Cara Memasang Responsive Menu Navigasi

Discussion