Responsive Menu With CSS And JavaScript

Ditulis oleh: Adhy Suryadi
Ditulis pada: 6/29/2015

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

Responsive Menu With CSS And JavaScript

Ditulis oleh: Adhy Suryadi Ditulis pada: 6/29/2015

Langkah Pertama

Langkah Kedua

Langkah Ketiga

Langkah Keempat

Berbagi itu peduli:

Comment Policy:

Menarik Untuk Dibaca Juga:

Ditulis oleh: Adhy Suryadi
Ditulis pada: 6/29/2015