Tanpa menu navigasi, tampilan blog jadi kurang lengkap karena navigasi juga merupakan salah satu pendukung seo ono page.
Untuk itu di kesempatan kali ini admin akan membagian cara memasang menu navigasi dropdown responsive.
Menu ini saya ambil dari template rbz one yang sebelumnya saya ambil dari template invision dari mbak arlina.
Untuk yang ingin mencoba atau memasang nya silahkan simak tuorial berikut.
Pertama buka dashboard blog>template>edit html
Kemudian pasang kode css berikut sebelum ]]></b:skin> atau </style>
/* Main Navigation */
#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>)
<nav id='inv-navigation' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<div class='maxwrap'>
<input type='checkbox'>☰ 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='/p/blog-page.html' 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='/404' 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.
