May 13, 2024 | jQuery Javascript HTML
Hello Dev,
Today, I'll demonstrate how to craft a responsive menu for your HTML website. We'll utilize CSS, HTML, and jQuery, along with media queries to ensure responsiveness. I've provided two files: one HTML and one CSS. These files together create a straightforward responsive menu that's easily customizable. It's adaptable for integration with PHP, .NET, or any PHP framework.
Read Also: Set Vertical Align Middle in Div Example index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How To Create a Responsive Menu Using Html, Css and Jquery? -- ItErrorSolution.com</title>
<style>
/* styles.css */
body {
margin: 0;
font-family: Arial, sans-serif;
}
#navbar {
background-color: #333;
overflow: hidden;
}
#navbar.icon {
display: none;
color: white;
cursor: pointer;
}
#navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#navbar li {
float: left;
}
#navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#navbar li a:hover {
background-color: #111;
}
@media screen and (max-width: 600px) {
#navbar.icon {
display: block;
}
#navbar ul {
position: absolute;
right: 0;
height: 100%;
width: 100%;
top: 60px;
background-color: #333;
display: none;
}
#navbar ul li {
float: none;
width: 100%;
}
#navbar ul li a {
width: 100%;
}
}
</style>
</head>
<body>
<h1>How To Create a Responsive Menu Using Html, Css and Jquery? -- ItErrorSolution.com</h1>
<nav id="navbar">
<a href="#" class="icon">☰</a>
<ul>
<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>
</nav>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// script.js
$(document).ready(function() {
$('.icon').click(function() {
$('#navbar ul').toggle();
});
});
</script>
</body>
</html>
Thank you for your encouragement! If you have any questions or need further assistance, feel free to ask. I'm here to help!
"Hey there! I'm a full-stack developer and proud owner of ItErrorSolution.com, based right here in India. I love nothing more than sharing handy tips and tricks with my fellow developers through easy-to-follow tutorials. When it comes to coding, I'm all about PHP, Laravel, Angular, Vue, Node, JavaScript, jQuery, CodeIgniter, and Bootstrap – been hooked on them forever! I'm all about putting in the work and staying committed. Ready to join me on this journey to coding?"