Responsive Menu With CSS And JavaScript

Updated on May 31, 2016 - Post a Comment

The menu is an improvement over pure CSS responsive menu that I've shared. Pure CSS responsive menu has a problem when accessed disposable cell phone is its menu can not be clicked or could not be opened.
For that I now try to fix it by adding a javascript to open a sub menu and open the menu on the mobile display like on the demo below.

Author: Adhy Suriady

DEMO FULL SCREEN | DEMO RESPONSIVE

or See Here

If you want to try to use it, please follow the steps below:

Step 1

Please copy the CSS code below and paste the above code ]]></b:skin> or </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}
}

Step 2

Please copy the javascript code below and Google Font Awesome font and save the above code

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

Step 3

Please copy the javascript code below and save the above code </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>

Step 4

Please copy the HTML code below and please keep it in a place where you want to display, usually under the 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>

To add a sub menu to the next menu please create other id ul with a3 and further so as below


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

Then add the code a3 to javascript code in the third step as the code I marking.

Done, good luck ...