Skip to main content

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.


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

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:


PrivacySitemap
©2021 KOMPI AJAIB