Navigasi Menu Responsive di Bawah Header untuk Blogger

Cara Membuat atau Memasang Navigasi Menu Responsive di Bawah Header untuk Blogger.

MELENGKAPI tips sebelumnya, Cara Membuat Navigasi Menu Responsive di Atas Header Blog (Topbar Navigation), tips kali ini tentang Navigasi Menu Responsive di Bawah Header untuk Blogger.

Jadi, topmenu ada, yaitu di atas header, main menu juga ada, yaitu di bawah header. Lengkap sudah.

Penampakan menu di desktop seperi navigasi menu blogger pada umumnya. Penampilan di mobile (HP) seperti gambar ilustrasi di atas.

CREATE RESPONSIVE NAVIGATION MENU 

KODE CSS:
Pasang di atas kode ]]></b:skin> atau </style>

/* Navigasi Menu */
#pull{display:none;text-decoration:none}
#navi{background:#222;width:100%;max-width:940px;display:block;font-size:15px;text-transform:uppercase;font-weight:400;overflow:hidden; position:relative;text-decoration:none;margin:0 auto; padding:0}
#navi ul{margin:0 auto; padding:0}
#navi li{list-style:none}
#navi li a{float:left;display:block; color:#fff;font-size:14px; padding:10px 20px;margin:-5px 0 0;text-decoration:none}
#navi li a:hover{display:block;text-decoration:none; color:#fff;background:#ea6153;}

@media screen and (max-width:960px){
#navi{height:auto; border-bottom:0}
#navi ul{width:100%; display:none; height:auto}
#navi li{width:100%; float:left; position:relative;}
#navi li a{padding:10px 0}
#navi a{text-align:left; color:#f1f1f1; padding-top:14px; width:100%; text-indent:20px}
#navi a#pull{display:block; margin:0 auto; background-color:#333; height:50px; width:100%; position:relative}
#navi a#pull:after{content:&#39;&#39;; background:url(http://2.bp.blogspot.com/-pNLnG4uYhRc/VQa0xtGO4pI/AAAAAAAABO8/hNxmkF9cfkw/s1600/nav-icon.png) no-repeat; width:30px; height:30px; display:inline-block; position:absolute; right:10px; top:14px}
}

@media screen and (max-width:768px){
.nav{text-align:center}
.nav li span{display:inline;color:#fff;}
.nav li a:hover{color:#dddddd;background:none}
}

KODE HTML 
Navigasi Menu Responsive di Bawah Header untuk Blogger

Pasang di atas <div id='content-wrapper'> atau <div id='main-wrapper'> atau di bawah </header>

<nav class='clearfix' id='navi' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<a href='#' id='pull'>Menu</a>
<ul class='clearfix'>
<li><a href='/' style='background:#f37468'>Home</a></li>
<li><a href='#'>SEO</a></li>
<li><a href='#'>Desain</a></li>
<li><a href='#'>Template</a></li>
<li><a href='#'>News</a></li>
<li><a href='#'>Foto</a></li>
<li><a href='#'>Video</a></li>
<li><a href='/404'>Error Page</a></li>
</ul>
</nav>

KODE JAVASCRIPT
Pasang di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(function(){var pull=$('#pull');menu=$('#navi ul');menuHeight=menu.height();$(pull).on('click',function(e){e.preventDefault();menu.slideToggle()})});
//]]>
</script>