Toggle Navigation Bar Using CSS, HTML and Javascript

Toggle Navigation CSS, HTML and Javascript

Navigation bar are used in all blogs and website and is very helpful for visitors better to click on a certain label than searching them on the whole blog for a particular label, mostly normal navigation bar in blogger are not responsive to mobile designs so we have created one which is responsive to mobile design with drop down on click.

Advantages of Adding Navigation Bar

Adding toggle navigation in blog may result two best ways responsive for mobile plus on desktop and better to function. It also makes your site or blog look clean in mobile form as in normal navigation you need to slide to left right zoom or double tap to click on a link or even you can't see label on the nav. The fact is all the top sites and blog use this navigation toggle function.

This toggle navigation bar is created using CSS, HTML and Javascript code. The first part is to add the CSS then HTML and lastly Javascript code in you template.

Note:- Backup Your Template Before Adding Code

Lets Add Navigation Bar in Your Template

Step 1. Go to your Blogger dashboard select your blog.

Step 2. Now click on Template > Edit HTML

Step 3. In the Template Editor search for ]]></b:skin> tag

Step 4. Before the ]]></b:skin> tag add the code

/*TNB-Style*/
.tnb-style {
background: #f7f7f7;
border-bottom: 1px solid #808080;
margin-bottom: 1em;
overflow: hidden;
}

And below it add this CSS

a.menu-link {
float: right;
display: block;
padding: 1em;
}
nav {
clear: both;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.tnb nav {
overflow: hidden;
max-height: 0;
}
nav.active {
max-height: 15em;
}
nav ul {
margin: 0;
padding: 0;
border-top: 1px solid #808080;
}
nav li a {
display: block;
padding: 0.8em;
border-bottom: 1px solid #808080;
}

@media screen and (min-width: 48.25em meaning for the best response) {
a.menu-link {
display: none;
}
.tnb nav {
max-height: none;
}
nav ul {
margin: 0 0 0 -0.25em;
border: 0;
}

nav li {
display: inline-block;
margin: 0 0.25em;
}
nav li a {
border: 0;
}

Now lets add the HTML code below the <body> tag in your blogger template.

<div class='tnb-style' id='tnb-style'>

<a class='menu-link' href='#menu'>Menu</a>
<nav id='menu' role='navigation'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>TOC</a></li>
<li><a href='#'>Policy</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav></div>

The last part to add in your template is the Javascript code to add this you need to find the </body> tag and before it add the Javascript code.

<script>$(document).ready(function() {
$('body').addClass('tnb');
var $menu = $('#menu'),
$menulink = $('.menu-link');

$menulink.click(function() {
$menulink.toggleClass('active');
$menu.toggleClass('active');
return false;
});});
</script>

Now save your template and you are all done.

Pages

Saturday, September 6, 2014

Toggle Navigation Bar Using CSS, HTML and Javascript

2 comments: