Responsive Horizontal Menu Onclick Sub Menu Jquery

Most horizontal menu using the hover effect to display sub menus using either CSS or Jquery. Incidentally there are companions Company yesterday asking about how to create a horizontal menu but using onclick to display the sub menu. This means that sub-menu will appear by clicking on its parent menu, so anything to hide.

This time I will try to create pure CSS responsive horizontal menu I've ever shared with a hover effect to display the sub menu becomes responsive to the onclick horizontal menu to display the sub menu by Jquery. By this all trying to improve horizontal responsive pure CSS menu that had not been able to function when accessed using a mobile. Is this to be responsive horizontal menu on the mobile functioning with onclick sub menu with Jquery? I am waiting for the response from friends who use mobile to try this menu.

Sightings responsive horizontal menu with jquery onclick sub menu is shown in Figure gif below.

DEMO PURE CSS JSFIDDLE | DEMO WITH JQUERY ON JSFIDDLE

For those who want to try responsive horizontal menu with jquery onclick this sub menu Please copy the codes below.

Code CSS

#menu{height:45px;background:#464646;}
#menu ul,#menu li{margin:0;padding:0;list-style:none;}
#menu ul{height:45px}
#menu li{float:left;display:inline;position:relative;font:bold 13px Arial;}
#menu a{display:block;line-height:45px;padding:0 14px;text-decoration:none;color:#ccc}
#menu ul li:hover a{background:#ccc;color:#333!important}
#menu input{display:none;margin:0 0;padding:0 0;width:100%;height:45px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:45px;line-height:45px;text-align:center;color:#fff}
#menu label span{font-size:13px;position:absolute;left:35px}
#menu ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#333}
#menu ul li ul li a{color:#333;width:180px;height:35px;line-height:35px;background:#ccc;}
#menu a.prett{padding:0 27px 0 14px}
#menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#ccc transparent transparent transparent;position:absolute;top:20px;right:9px}
#menu a.prett:hover::after,#menu ul li:hover a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#333 transparent transparent transparent;position:absolute;top:20px;right:9px}
#menu ul li ul li a:hover{background:#BABABA;}
@media screen and (max-width: 768px){
#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{width:100%;position:static;border:none}
#menu li{display:block;float:none;width:auto;text-align:left}
#menu li a{color:#fff}
#menu li a:hover{color:#333}
#menu li:hover{background:#BABABA;color:#333;}
#menu li:hover > a.prett,#menu a.prett:hover{background:#BABABA;color:#333;}
#menu ul.menus a{background:#BABABA;}
#menu ul.menus a:hover{background:#fff;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4;}
#menu ul li ul li a{width:100%;}
}

Code HTML

<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>Navigation</span></label>
<ul>
<li><a href='/' title="Home">Home</a></li>
<li><a href='#' title="Menu 1">Menu 1</a></li>
<li><a class='prett' href='#' title="Drop Menu">Drop Menu</a>
<ul class='menus'>
<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='#' title="Drop Menu1">Drop Menu 1</a>
<ul class='menus'>
<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>
</ul>
</nav>

Code Javascript

<script type='text/javascript'>
var nav = $('#menu > ul > li');
nav.find('li').hide();
nav.click(function () {
    nav.not(this).find('li').hide();
    $(this).find('li').slideToggle();
});
$(function() {
    $('#menu input').click(function () {
    $('#menu ul').slideToggle()
});
    });
</script>

And do not forget, in your blog is there any jquery library version.

DEMO PURE CSS 

See the Pen Responsive Horizontal Menu Onclick Sub Menu Pure CSS by ducnguyen (@ducrat) on CodePen.

DEMO WITH JQUERY

See the Pen Responsive Horizontal Menu Onclick Sub Menu Jquery by ducnguyen (@ducrat) on CodePen.
http://www.kompiajaib.com/2014/09/responsive-horizontal-menu-onclick-sub-menu-jquery.html