Cara Membuat Menu Bar Drop Down Responsive Javascript

Memiliki sebuah web yang sangat responsive adalah sebuah keharusan, begitulah sebagian besar pendapat para ahli website setelah memperkirakan 50% dari pengunjung website berasal dari mereka yang memakai perangkat genggam ditangannya alias handphone. Maka dapat diartikan bahwa jika web kita tidak responsive, berapa banyak trafik yang akan berkurang serta berapa kerugian akan celah-celah bisnis yang seharusnya kita dapat seandainya web kita tidak responsive.

Nah.. kali ini saya membagikan tutorial cara membuat Dropdown Menu Bar Responsive untuk dapat kamu gunakan di blog kamu sekalian. Ada banyak hal yang harus dilakukan saat merancang web untuk menjadi responsif dan atas adalah bar navigasi Anda yang umumnya dikenal sebagai menu bar. Ini harus responsif juga jadi setiap pengguna dapat melihat apa yang Anda miliki dalam navigasi bar Anda dan dapat menelusuri situs Anda dalam cara yang lebih baik. Sebenarnya sudah banyak tutorial seputar menu dropdown, namun saya tetap memberanikan diri untuk tetap menulis tutorial ini sekedar untuk melengkapi kekurangan yang ada pada diri saya dan juga pada blog devozan ini. kode script yang saya bagikan kali ini sangat berbeda dengan kode pada umumnya, karena dengan mengaplikasin script ini maka web kita akan menjadi responsive namun tidak membuat loading blog menjadi lambat. 

Untuk informasi bahwa script yang akan saya bagikan ini adalah hasil kunjungan saya ke tempat Osvaldas Valutis pemilik web bernama www.osvaldas.info berikut adalah feature dari script.

DEMO

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.

 So... gimana ? berminat untuk meningkatkan trafik blog dengan membuat web/blog kamu menggunakan menu drop down yang sangat responsive ? silahkan ikuti langkah- dibawah ini :

Blogspot :

1. Masuk menuju Blogger

2. Pilih Layout => Add Gadget

3. Cari dan pilih HTML-JAVASCRIPT

4. Copy kode dibawah ini dan letakkan di dalam gadget HTML-JAVASCRIPT tadi

 

 

<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>

 

 

 

5. SIMPAN

Tweet