I have been troubleshooting this issue all night and I am completely stuck. Can anyone figure out why the navigation menu is not opening?
Here is the HTML code:
<ul id="nav">
<li><a href="item1.html">item1</a></li>
<li><a href="item2.html">item2</a></li>
</ul>
<div id="menu">
<div id="menu-button"><span id="menu-text">Menu</span> <img src="image/nav.png"></div>
</div>
And here is the CSS (please note that I am currently working on a responsive design):
#menu {
position: relative;
display: block;
width: 100%;
height: 50px;
background-color: #1F5865;
}
#menu-button {
position: relative;
width: 100%;
}
#menu-text {
position: absolute;
top: 13px;
left: 15px;
font-size: 18px;
font-weight: bold;
padding-right: 10px;
}
#menu-button img {
position: absolute;
right: 15px;
top: 10px;
}
#nav {
display: none;
position: relative;
width: 100%;
list-style-type: none;
padding: 0px;
margin: 0px;
font-family: Raleway, Arial, sans-serif;
}
#nav li {
list-style-type: none;
text-align: center;
background-color: #297585;
padding: 0px;
width: 100%;
}
#nav a {
display: block;
padding: 14px 0px;
border-bottom: 1px solid #1F5865;
color: #FFF;
width: 100%;
text-decoration: none;
}
Lastly, here is the JavaScript code (included within the <head> tags):
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$("#menu").click(function(){
$("#nav").slideToggle();
});
</script>