Currently, I am working on perfecting a responsive navigation menu. My goal is to have the drop-down menu appear when the menu icon is clicked, as opposed to the hover effect. I am utilizing a Google jQuery script, but I am unsure if the drop-down functionality is already included in the script source. Do I need to manually create the drop-down menu using jQuery, or is there a simple CSS or HTML5 solution available? I appreciate any advice or feedback on this matter.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8>
<title>Dan Meier Website</title>
<meta name="description" content="Responsive Header Nav">
<meta name="author" content="Treehouse">
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
<link rel="stylesheet" href="layoutnew.css">
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<a href="#" id="logo"></a>
<nav>
<a href="#" id="menu-icon"></a>
<ul>
<li><a href="#" class="current">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
CSS
header {
background: #404040;
width: 100%;
height: 76px;
position: fixed;
top: 0;
left: 0;
border-bottom: 4px solid #4C9CF1;
z-index: 100;
}
#logo{
margin: 20px;
float: left;
width: 200px;
height: 40px;
background: img src="images/menuicon.png" no-repeat center;
display: block;
}
nav {
float: right;
padding: 20px;
}
#nav ul.sub-nav {
display: none;
}
#nav ul.visible {
display: block;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: left;
padding: 10px
}
/*MEDIA QUERY*/
@media only screen and (max-width : 640px) {
header {
position: absolute;
}
#menu-icon {
display:inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 20px;
background: #fff;
border: 5px solid #444;
right: 20px;
top: 60px;
width: 50%;
border-radius: 4px 0 4px 4px;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}