Responsive Menu With CSS And JavaScript

Responsive Menu With CSS And JavaScript

Bola Hero Gawai

Responsive Menu With CSS And JavaScript

Responsive Menu With CSS And JavaScript
Menu ini merupakan perbaikan dari menu responsive pure CSS yang sudah pernah saya share. Menu responsive pure CSS tersebut memiliki masalah ketika diakses pakai handphone yaitu menu-nya tidak bisa diklik atau tidak bisa dibuka.

Untuk itu kini saya mencoba memperbaikinya dengan menambahkan javascript untuk membuka sub menu dan membuka menu pada tampilan mobile seperti pada demo di bawah ini.

DEMO FULL SCREEN | DEMO RESPONSIVE


Jika Anda ingin mencoba menggunakannya, silahkan ikuti langkahnya di bawah ini:

Langkah Pertama


Silahkan copy kode CSS di bawah ini dan paste di atas kode ]]></b:skin> atau </style>


#menu,#menu input,#menu ul{height:50px}
#menu a.trigger2::after,#menu a.trigger2:hover::after{border-width:5px 6px;top:20px;width:0;height:0;border-style:solid}
#menu a.prett::after,#menu a.trigger2::after,#menu a.trigger2:hover::after{content:""}
#menu-wrapper{height:50px;width:100%;position:relative}
#menu{background:#666;color:#eee;font-family:Roboto,sans-serif}
#menu li,#menu ul{margin:0;padding:0;list-style:none}
#menu li{float:left;display:inline;position:relative}
#menu li a{font-size:16px;font-weight:700;color:#eee;text-transform:uppercase}
#menu a{display:block;line-height:50px;padding:0 20px;text-decoration:none;color:#eee}
#menu li a:hover,#menu li:hover>a{color:#111}
#menu input{display:none;margin:0;padding:0;width:80px;opacity:0;cursor:pointer}
#menu label{font-size:30px;display:none;width:35px;height:51px;line-height:51px;text-align:center}
#menu label span{font-size:13px;position:absolute;left:35px;text-transform:none}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#ddd;position:absolute;z-index:99;display:none;color:#555;text-transform:none}
#menu a.prett:hover,#menu li:hover>a.prett,#menu ul.menus a:hover{color:#fff;background:#bbb}
#menu ul.menus a{color:#555;line-height:30px!important;font-size:14px;padding:0 20px;font-weight:300;text-transform:none}
#menu ul.menus li{display:block;width:100%;text-transform:none}
#menu a.prett,#menu a.trigger2{padding:0 27px 0 20px}
#menu a.prett::after{width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent;position:absolute;top:23px;right:9px}
#menu a.trigger2::after{border-color:transparent transparent transparent #eee;position:absolute;right:9px}
#menu a.trigger2:hover::after{border-color:transparent transparent transparent #333;position:absolute;right:9px}

@media screen and (max-width: 770px){
#menu ul.menus,.main-wrapper{width:100%;border:none}
.outer-wrapper{padding:0}
#sidebar-wrapper,.sidebar1-wrapper,.sidebar2-wrapper,.sidebar3-wrapper{width:100%;text-align:center;margin:0 auto}
#menu{position:relative}
#menu ul{background:#838383;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menu ul.menus{position:static}
#menu li{display:block;float:none;width:auto;text-align:left}
#menu li a{color:#fff}
#menu li a:hover{color:#333}
#menu a.prett:hover,#menu li:hover,#menu li:hover>a.prett{background:#BABABA;color:#333}
#menu ul.menus a{background:#BABABA}
#menu ul.menus a:hover{background:#ddd;color:#333}
#menu input,#menu label{position:absolute;top:0;left:15px;display:block}
#menu input{z-index:4}
#menu input:checked+label{color:#fff}
}

Langkah Kedua


Silahkan copy kode javascript di bawah ini untuk font Awesome dan Google Font dan simpan di atas kode </head>


<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");loadCSS("http://fonts.googleapis.com/css?family=Roboto:300,700");
//]]>
</script>

Langkah Ketiga


Silahkan copy kode javascript di bawah ini dan simpan di atas kode </body>


<script type='text/javascript'>
//<![CDATA[
function switchid(d){hideallids(),showdiv(d)}function hideallids(){for(var d=0;d<ids.length;d++)hidediv(ids[d])}function hidediv(d){document.getElementById?document.getElementById(d).style.display="none":document.layers?document.id.display="none":document.all.id.style.display="none"}function showdiv(d){document.getElementById?document.getElementById(d).style.display="block":document.layers?document.id.display="block":document.all.id.style.display="block"}var ids=new Array("a1","a2");
var boxArray=["a1","a2"];window.addEventListener("mouseup",function(e){for(var r=0;r<boxArray.length;r++){var o=document.getElementById(boxArray[r]);e.target!=o&&e.target.parentNode!=o&&(o.style.display="none")}});
var button=document.querySelector("#nav-icon");button.addEventListener("click",function(){var t=document.querySelector(button.getAttribute("data-target"));t.style.display="block"==t.style.display?"none":"block"});
//]]>
</script>

Langkah Keempat


Silahkan copy kode HTML di bawah ini dan silahkan simpan di tempat di mana Anda ingin menampilkannya, biasanya di bawah header blog.


<div id='menu-wrapper'>
            <nav id='menu'>
<input data-target='#nav-ul' id='nav-icon' type='checkbox'/>
<label><i class='fa fa-bars'></i><span>Navigation</span></label>
<ul id='nav-ul'>
<li><a href='/' title='Home'>Home</a></li>
<li><a href='#' title='Menu 1'>Menu 1</a></li>
<li><a class='prett' href='javascript:switchid(&apos;a1&apos;);' title='Drop Menu'>Drop Menu</a>
<ul class='menus' id='a1'>
<li><a href='#' title='Drop Menu1'>Drop Menu 1</a></li>
<li><a href='#' title='Drop Menu2'>Drop Menu 2</a></li>
<li><a href='#' title='Drop Menu3'>Drop Menu 3</a></li>
</ul>
</li>
<li><a href='#' title='Menu 2'>Menu 2</a></li>
<li><a class='prett' href='javascript:switchid(&apos;a2&apos;);' title='Drop Menu1'>Drop Menu 1</a>
<ul class='menus' id='a2'>
<li><a href='#' title='Drop Menu 1'>Drop Menu 1</a></li>
<li><a href='#' title='Drop Menu 2'>Drop Menu 2</a></li>
<li><a href='#' title='Drop Menu 3'>Drop Menu 3</a></li>
</ul>
</li>
<li><a class='trigger2' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;amp;langpair=id%7cen&amp;amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='English'>Translate</a></li>
</ul>
</nav>
  </div>

Untuk menambahkan menu dengan sub menu selanjutnya silahkan buat ul dengan id lain a3 dan selanjutnya sehingga seperti di bawah ini


<li><a class='prett' href='javascript:switchid(&apos;a3&apos;);' title='Drop Menu1'>Drop Menu 1</a>
<ul class='menus' id='a3'>
<li><a href='#' title='Drop Menu 1'>Drop Menu 1</a></li>
<li><a href='#' title='Drop Menu 2'>Drop Menu 2</a></li>
<li><a href='#' title='Drop Menu 3'>Drop Menu 3</a></li>
</ul>
</li>

Kemudian tambahkan kode a3 pada kode javascript di langkah ketiga seperti kode yang saya marking.

Selesai, selamat mencoba...

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×