This is a basic HTML, CSS, and JavaScript code for creating a responsive navigation bar.
In the HTML code, there is a header with a navigation bar that contains a logo, a menu toggle button, and a menu. The logo is wrapped in a div with a class of “logo”, and the menu is an unordered list with a class of “menu”. Each list item contains a link to a page. The menu toggle button is an input element with a class of “bar” and three span elements that will create the hamburger icon.
In the CSS code, there are styles for the navigation bar. The “.bar” class has a display property of none because it is used to hide the checkbox input used for the menu toggle button. The “nav” element has a display property of flex and properties for aligning its child elements. The background color is set to #333, and there is padding to give space between the content and the edges of the navigation bar. The “nav .logo a” style sets the color, font size, and text decoration for the logo link. The “nav .menu” style sets the display property to flex to create a horizontal list. The “nav .menu li” style adds margins between each menu item. The “nav .menu li a” style sets the color and removes the text decoration from the menu item links. The “.menu-toggle” class has a display property of none because it will be displayed only on smaller screens. The “nav .menu” style removes the default margin and padding of the unordered list to align it with the rest of the navigation bar. The “@media” rule sets styles for screens smaller than 768 pixels. The “nav .menu” style sets the display property to none, the flex-direction to column, and the position to absolute, which will make the menu items stack on top of each other and appear below the menu toggle button. The top, left, and right properties are set to 60px, 0, and 0, respectively, to position the menu below the navigation bar. The background-color is set to #333, and the z-index is set to 1 to place the menu above the main content. The “nav .menu li” style sets the width of each list item to 100% to take up the full width of the menu. The “nav .menu li a” style adds padding to each menu item link to make it easier to click on. The “nav .menu-toggle” style sets the display property to block to show the menu toggle button. The “nav .menu-toggle span” style sets the display property to block, width to 30px, height to 5px, background-color to #fff, and margin to 5px 0 to create the hamburger icon. The “nav .menu-toggle.active span:nth-of-type(2)” style sets the transform property to rotate(45deg) and top property to 12px to create the diagonal line of the icon. The “nav .menu-toggle.active span:nth-of-type(3)” style sets the transform property to rotate(-45deg) and top property to 12px to create the other diagonal line of the icon. The “nav .menu-toggle.active span:nth-of-type(2), nav .menu-toggle.active span:nth-of-type(3)” style sets the position property to absolute to position the diagonal lines correctly. The “nav .menu-toggle.active span:nth-of-type(1)” style sets the opacity property to 0 to hide the top line of the icon. The “nav .menu-toggle.active+.menu” style sets the display property to flex to show the menu when the toggle button is active.
The JavaScript code in the provided example is responsible for toggling the responsive menu.
The code starts by selecting the menu toggle button and the menu itself using the document.querySelector method.
It then adds an event listener to the menu toggle button that listens for a “click” event. When the button is clicked, the event listener function is executed.
Within this function, two things happen:
- The
activeclass is toggled on the menu toggle button. This class is used in the CSS code to change the appearance of the button when the menu is open. - The
activeclass is toggled on the menu itself. This class is also used in the CSS code to change the display of the menu when it is open.
By toggling these classes, the JavaScript code is able to show or hide the responsive menu when the user clicks on the menu toggle button.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Responsive Website</title>
<style>
.bar {
display: none;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 20px;
position: relative;
}
nav .logo a {
color: #fff;
font-size: 1.5rem;
text-decoration: none;
}
nav .menu {
display: flex;
}
nav .menu li {
margin: 0 10px;
}
nav .menu li a {
color: #fff;
text-decoration: none;
}
nav .menu-toggle {
display: none;
}
nav .menu {
display: flex;
list-style: none;
/* remove the list style */
margin: 0;
/* remove the default margin */
padding: 0;
/* remove the default padding */
}
nav .menu li {
margin: 0 10px;
}
@media screen and (max-width: 768px) {
nav .menu {
display: none;
flex-direction: column;
position: absolute;
top: 60px;
left: 0;
right: 0;
background-color: #333;
z-index: 1;
}
nav .menu li {
width: 100%;
}
nav .menu li a {
padding: 10px;
color: #fff;
display: block;
}
nav .menu-toggle {
display: block;
}
nav .menu-toggle span {
display: block;
width: 30px;
height: 5px;
background-color: #fff;
margin: 5px 0;
}
nav .menu-toggle.active span:nth-of-type(2) {
transform: rotate(45deg);
top: 12px;
}
nav .menu-toggle.active span:nth-of-type(3) {
transform: rotate(-45deg);
top: 12px;
}
nav .menu-toggle.active span:nth-of-type(2),
nav .menu-toggle.active span:nth-of-type(3) {
position: absolute;
}
nav .menu-toggle.active span:nth-of-type(1) {
opacity: 0;
}
nav .menu-toggle.active+.menu {
display: flex;
}
}
</style>
</head>
<body>
<header>
<nav>
<div class="logo">
<a href="#">Logo</a>
</div>
<div class="menu-toggle">
<input type="checkbox" class="bar" />
<span></span>
<span></span>
<span></span>
</div>
<ul class="menu">
<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>
</header>
<main>
<!-- Add your main content here -->
</main>
<footer>
<!-- Add your footer content here -->
</footer>
<script>
const menuToggle = document.querySelector('.menu-toggle');
const menu = document.querySelector('.menu');
menuToggle.addEventListener('click', function () {
menuToggle.classList.toggle('active');
menu.classList.toggle('active');
});
</script>
</body>
</html>The code is a basic responsive navigation bar built using HTML, CSS, and JavaScript. The HTML code defines the structure of the navigation bar, including a header with a navigation element containing a logo and a menu. The CSS code provides the styling for the navigation bar, including the layout and appearance of the logo and menu items, and defines a media query for smaller screens. The JavaScript code provides the functionality for the menu toggle, which allows the menu to be opened and closed when the user clicks on the toggle icon.
Overall, the code demonstrates how to build a responsive navigation bar using modern web development techniques. By using flexbox layout and media queries, the navigation bar is designed to work well on different screen sizes, from desktops to mobile devices. The use of JavaScript provides an interactive experience for the user, allowing them to easily toggle the menu without having to reload the page.