xxxxxxxxxx
.navbar {
background-color: #333;
color: #fff;
padding: 10px;
}
#hamburger-icon {
display: inline-block;
cursor: pointer;
margin-right: 10px;
}
#hamburger-icon span {
display: block;
width: 25px;
height: 3px;
background-color: #fff;
margin-bottom: 5px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
ul li {
display: inline-block;
margin-right: 10px;
}
ul li a {
color: #fff;
text-decoration: none;
}
xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="navbar">
<div id="hamburger-icon" onclick="toggleMenu()">
<span></span>
<span></span>
<span></span>
</div>
<ul id="menu-items">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
xxxxxxxxxx
function toggleMenu() {
var menuItems = document.getElementById("menu-items");
menuItems.classList.toggle("show");
}