Struggling to implement a mobile responsive menu, my primary issue is the navigation buttons not toggling upon clicking. Here's what I have so far in terms of HTML and JQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('span.nav-btn').click(function() {
$('ul.nav').slideToggle();
});
});
</script>
</head>
<body>
<header>
<h1>Hamburger MENU</h1>
</header>
<nav>
<span class="nav-btn"></span>
<ul class="hamburger">
<li><a href="#">Desktop 1</a></li>
<li><a href="#">Desktop 2</a></li>
<li><a href="#">Desktop 3</a></li>
<li><a href="#">Desktop 4</a></li>
</ul>
</nav>
Here's the corresponding CSS snippet:
header {
background-color: #23DA43;
}
h1 {
width: 100%;
text-align: center;
padding: 10px 0 10px 0;
}
.hamburger {
background-color: #333;
color: #fff;
margin: 0;
list-style: none;
text-align: center;
}
.hamburger li {
display: inline-block;
}
.hamburger li a {
text-decoration: none;
font-size: 40px;
color: #fff;
}
@media screen and (max-width: 900px) {
.hamburger {
text-align: left;
display: none;
}
.hamburger li {
display: block;
}
.nav-btn {
display: block;
background-color: #333;
color: #fff;
font-size: 40px;
text-align: center;
cursor: pointer;
}
.nav-btn:before {
content: "Menu";
}
}
Your assistance is greatly appreciated. Regards, Alessandro