After deciding to revamp my website for responsiveness, I encountered an issue with the menu not displaying on smaller screens. Everything else is functioning correctly except for the drop-down menu!
Here is the HTML code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Alffi's "Blog"</title>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<header>
<h1>Welcome to Alffi's "Blog"!</h1>
</header>
<nav>
<ul>
<a href="#"><li>Home</li></a>
<a href="#"><li>About Me</li></a>
<a href="#"><li>Current Projects</li></a>
<a href="#"><li>Downloads</li></a>
<a href="#"><li>Login</li></a>
</ul>
<div class="handle">Menu</div>
</nav>
<section>
Test Text: ldsngfgnfkgkgkgkfgjnbgjfsgkjfljfngfngfdlgnfdlgnfdlkgnfdlgnflknglkfgnlfnglfgnflgnfklgnkfgnlfkgnlfkngfdlkgnfdlkgnfdklgnfdklgnfdklngfdlkgnfkgnfdlkgnfdlgnflgndflkgnfdklgnfdklfdnlgkfdnlfdnglkfdnglfdknglfdkgnlfdkgnfdklgnfdklgnfdklgnfdlgnfdlkgnfdlkgnfdlkgnfdlkgnfdklgnfdlkgnlfdknglfd
</section>
<script>
$('.handle').on('click', function(){
$('nav ul').toggleClass('showing');
});
</script>
</body>
</html>
Furthermore, here is the CSS code:
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header{
background: #00795f;
width: 100%;
padding: 40px 0;
color: white;
text-align: center;
}
a{
text-decoration: none;
color: inherit;
}
nav ul{
background-color: #43a286;
overflow: hidden;
color: white;
padding: 0;
text-align: center;
margin: 0;
-webkit-transition : max-height 0.4s;
-ms-transition : max-height 0.4s;
-moz-transition : max-height 0.4s;
-o-transition : max-height 0.4s;
transition : max-height 0.4s;
}
nav ul li{
display: inline-block;
padding: 20px;
}
nav ul li:hover{
background-color: #399077
}
section{
line-height: 1.5em;
font-size: 0.9em;
padding: 40px;
width: 75%;
margin: 0 auto;
}
.handle{
width: 100%;
background: #005c48
text-align: left;
box-sizing: border-box;
padding: 15px 10px;
cursor: pointer;
color: white;
}
@media screen and (max-width: 580px){
nav ul{
max-height: 0;
}
.showing{
max-height: 20em;
}
nav ul li{
box-sizing: border-box;
width: 100%;
padding: 15px;
text-align: left;
}
.handle{
display: block;
}
}
Your assistance in resolving this issue would be greatly appreciated!