A Toggle Navigation Menu That Fits In All Screen Resolution

How to convert a simple navigation menu into toggle navigation menu. Possible with tool using JavaScript plugin,CSS3 transitions and touch events.

A Toggle Navigation That Fits In All Screen Resolution

If you want to make your navigation menu bar into more attractive toggle navigation menu which leads to more engagement and conversions then you should install responsive menu JavaScript plugin. It is tremendous JavaScript plugin which is too less in size and converts your navigation menu into toggle navigation menu which is used by many popular and successful website now a days. Along with it looks awesome too and make your website professional. 

It converts navigation menu into toggle navigation menu specially for small screen so you have not to worry about losing customers and readers on other devices like mobile and tablet users. When tablet and mobile users see your website your custom navigation menu appears too long and it looks ugly because it stretches the width of webpage but when you install this JavaScript plugin then your users and readers which are accessing your website on small screen like mobile and tablet then it automatically re-sizes your navigation menu and makes it toggle one. 

Hence the width of the webpage remains fit into small screen and that increases conversion rate and engagement of your content with your readers and visitors. So lets see how to install this plugin which can make your navigation menu into professional one.

First download the complete code from this website .

Now upload all the JavaScript and css files on your server. You can host your JavaScript and css files in dropbox too. Now when you have uploaded your JavaScript files into dropbox then copy the link of those JavaScript and css files and add it before the /head tag in your website or blogger like this.

<link rel="stylesheet" href="responsive-nav.css">
<script src="responsive-nav.js"></script>

In the first line of code paste the link of your css files and then in the second line of code paste the link of your JavaScript file from dropbox public folder.

How to Add Html Part.

It is very simple if you are using blogger platform then .
Go to blogger.
Click on layout.
choose add a gadget.
choose Html/JavaScript.
and paste the below code in Html/JavaScript section.

<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

How to  insert plugin

Now when you have installed JavaScript,css and html now it is time to move it and see in action . Below is the code of plugin that you have to copy and paste before the </BODY>tag in your website or blogger.

<script>
var navigation = responsiveNav("#nav");
</script>

This is it if you did this properly then you will see when you will re-size your website then your navigation menu will convert into toggle navigation menu and hence you do not have to worry about small screen users. A web design is perfect only when it fits into all type of screen resolution so this trick and plugin will be very helpful to you if you are focusing on small screen users which is now a days essential too for ultimate growth and to increase your coverage area like a TV channel.

So this was the trick to make your navigation menu into toggle navigation menu . a navigation menu which fits into all type of screen resolution. Isn't it best then share it and give us your feedback.