Responsive Sajian With Css And Javascript

Menu ini merupakan perbaikan dari menu responsive pure CSS yang sudah pernah aku share. Menu responsive pure CSS tersebut mempunyai duduk kasus dikala diakses pakai handphone ialah menu-nya tidak dapat diklik atau tidak dapat dibuka.

Untuk itu sekarang aku mencoba memperbaikinya dengan menambahkan javascript untuk membuka sub sajian dan membuka sajian pada tampilan mobile ibarat 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 arahan 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 arahan javascript di bawah ini untuk font Awesome dan Google Font dan simpan di atas arahan </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 arahan javascript di bawah ini dan simpan di atas arahan </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 arahan HTML di bawah ini dan silahkan simpan di daerah 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 sajian dengan sub sajian selanjutnya silahkan buat ul dengan id lain a3 dan selanjutnya sehingga ibarat 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 arahan a3 pada arahan javascript di langkah ketiga ibarat arahan yang aku marking.

Selesai, selamat mencoba...
Sumber https://www.kompiajaib.com/

Share this post