In new era of web-designing, everyone want to be responsive as its new rule because more then 50% or net users are now using handheld devices so if you are not responsive then they can reject you and you can loose a huge traffic and $$ too.
To avoid this problem, just make your site responsive and lightweight for mobile etc. There are many things to do while designing a web to be responsive and the top is your navigation bar that generally know as menu bar. This should be responsive too so every user can see what you have in your navigation a bar and can browse your site in better way.
So to make your menu bar responsive, there are many codes available only and nearly all required jquery that mean 80kb more so in new era, load time is as important as responsive so if you use their codes then you can get responsive but increase of load time. To keep jquery out of your page, here we have some awesome JavaScript code that will do all that things but in quick way and time.
This code is designed by Osvaldas Valutis from www.osvaldas.info and he used his JavaScript code and named it DoubleTapToGo.js. And as I said before that to keep your load time hight, code should be short so the weight of his JavaScript is 500Bytes after minimizing that we are using from DoubleTapToGo.min.js.
Features:
1.) DropDown MenuBar.
2.) HTML-CSS3-JavaScript Used.
3.) No JQuery External File.
4.) Responsive On All Devises.
5.) Work On Touch Screen Too.
6.) Cross Platform And Cross Browsers Supported.
Easy To add.
7.) Quick To Load.
8.) 500Bytes Inline JavaScript.
9.) No External Files And Codes.
10.) Fully Customizable.
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog“.
3.) Go To “Layout“.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT“
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click “Save“, Now You Are Done.
How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between “<body> </body>“.
3.) Save It, Now You Are Done.
<style type="text/css">
#nav {width: 60em; /* 1000 */font-family: 'Open Sans', sans-serif;font-weight: 400;display: block;margin: 0 auto;}
#nav ul li {list-style-type:none}
#nav > a {display: none;}
#nav li {position: relative;margin-bottom:0em;}
#nav li a {color: #fff;display: block;text-decoration:none;}
#nav li a:active {background-color: #c00 !important;}
#nav span:after {width: 0;height: 0;border: 0.313em solid transparent; /* 5 */border-bottom: none;border-top-color: #efa585;content: '';vertical-align: middle;display: inline-block;position: relative;right: -0.313em; /* 5 */}
/* first level */
#nav > ul {height: 3.75em; /* 60 */background-color: #e15a1f;}
#nav > ul > li {width: 25%;height: 100%;float: left;}
#nav > ul > li > a {height: 100%;font-size: 1.5em; /* 24 */line-height: 2.5em; /* 60 (24) */text-align: center;}
#nav > ul > li:not( :last-child ) > a {border-right: 1px solid #cc470d;}
#nav > ul > li:hover > a, #nav > ul:not( :hover ) > li.active > a {background-color: #cc470d;}
/* second level */
#nav li ul {background-color: #cc470d;display: none;position: absolute;top: 100%;}
#nav li:hover ul {display: block;margin-top: 0px;right: 0;}
#nav li:not( :first-child ):hover ul {left: -1px;}
#nav li ul a {font-size: 1.25em; /* 20 */border-top: 1px solid #e15a1f;padding: 0.75em; /* 15 (20) */}
#nav li ul li a:hover, #nav li ul:not( :hover ) li.active a {background-color: #e15a1f;}
@media only screen and ( max-width: 62.5em ) /* 1000 */ {
#nav {width: 100%;position: static;margin: 0;}
}
@media only screen and ( max-width: 40em ) /* 640 */ {
#nav {position: relative;top: auto;left: auto;}
#nav > a {width: 3.125em; /* 50 */height: 3.125em; /* 50 */text-align: left;text-indent: -9999px;background-color: #e15a1f;position: relative;}
#nav > a:before, #nav > a:after {position: absolute;border: 2px solid #fff;top: 35%;left: 25%;right: 25%;content: '';}
#nav > a:after {top: 60%;}
#nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type {display: block;}
/* first level */
#nav > ul {height: auto;display: none;position: absolute;left: 0;right: 0;}
#nav:target > ul {display: block;}
#nav > ul > li {width: 100%;float: none;}
#nav > ul > li > a {height: auto;text-align: left;padding: 0 0.833em; /* 20 (24) */}
#nav > ul > li:not( :last-child ) > a {border-right: none;border-bottom: 1px solid #cc470d;}
/* second level */
#nav li ul {position: static;padding: 1.25em; /* 20 */padding-top: 0;}
}
</style>
<script type="text/jacascript">
/* By Osvaldas Valutis, www.osvaldas.info
Available for use under the MIT License */
;(function(e,t,n,r){e.fn.doubleTapToGo=function(r){if(!("ontouchstart"in t)&&!navigator.msMaxTouchPoints&&!navigator.userAgent.toLowerCase().match(/windows phone os 7/i))return false;this.each(function(){var t=false;e(this).on("click",function(n){var r=e(this);if(r[0]!=t[0]){n.preventDefault();t=r}});e(n).on("click touchstart MSPointerDown",function(n){var r=true,i=e(n.target).parents();for(var s=0;s<i.length;s++)if(i[s]==t[0])r=false;if(r)t=false})});return this}})(jQuery,window,document); $( '#nav li:has(ul)' ).doubleTapToGo();
</script>
<nav id="nav" role="navigation">
<a href="#nav" title="Show navigation">Show navigation</a>
<a href="#" title="Hide navigation">Hide navigation</a>
<ul>
<li><a href="/">Home</a></li>
<li>
<a href="/">Blog</a>
<ul>
<li><a href="/">Design</a></li>
<li><a href="/">HTML</a></li>
<li><a href="/">CSS</a></li>
<li><a href="/">JavaScript</a></li>
</ul>
</li>
<li>
<a href="/">Work</a>
<ul>
<li><a href="/">Web Design</a></li>
<li><a href="/">Typography</a></li>
<li><a href="/">Front-End</a></li>
</ul>
</li>
<li><a href="/">About</a></li>
</ul>
</nav>
Customization:
1.) Just Add Your Link And Link Text.
2.) Change CSS If You Want But Only Touch Color And Fonts.
3.) Save And Done.
Checked On:
They ran tests on both Mac and Windows versions of the latest Chrome, Safari, Firefox and Opera browsers as well as on IE9+, Safari of iOS 6, Chrome of Android 2.2/4.2, IE9-10 of Windows Phone 7, Opera Mobile. Worked everywhere as it should.
Final Words:
This is what we got while browsing over internet and we found it helpful; to you so we shared it here. All right of codes is reserved to the oner. If you liked it then share it and leave your feedback. If you have any query, feel free to contact us.
thanks for share .
Welcome Here And Thanks For Liking…