I have been trying to make this navigation bar usable for mobile devices, I have tried multiple method by watching youtube using @media or hamburger method, but none of them seem to work for this, Unless I rewrite the html to match how they use it.
This is my original code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Waverly Farm: Home</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<header class = "header">
<div class = "logo">Waverely Farm</div>
<nav class = "navbar">
<a href ="index.html">Home</a>
<a href ="about_us.html">About Us</a>
<a href ="services.html">Services</a>
<a href ="shop.html">Shop</a>
<a href ="contactus.html">Contact Us</a>
</nav>
</header>
</body>
</html>
I have tried adding @media but I am not sure how to use it for this type of navigation bar
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.header{
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 100px;
background-color: aquamarine;
display:flex;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.logo{
font-size: 32px;
color: #fff;
text-decoration: none;
font-weight: 700;
}
.navbar a{
position: relative;
font-size: 18px;
color: #fff;
font-weight: 400;
text-decoration: none;
margin-left: 40px;
}
.navbar a::before{
content:'';
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 2px;
background: #fff;
transition: .3s;
}
.navbar a:hover::before{
width: 100%;
}```
CodePudding user response：
document.querySelector(".mobile-menu-icon").addEventListener("click", function () {
var navbar = document.querySelector(".navbar");
var header = document.querySelector(".header");
if (navbar.style.display === "flex") {
navbar.style.display = "none";
header.classList.remove("mobile-menu-open");
} else {
navbar.style.display = "flex";
header.classList.add("mobile-menu-open");
}
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 100px;
background-color: aquamarine;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.logo {
font-size: 32px;
color: #fff;
text-decoration: none;
font-weight: 700;
}
.navbar {
display: flex;
}
.navbar a {
font-size: 18px;
color: #fff;
font-weight: 400;
text-decoration: none;
margin-left: 40px;
}
.mobile-menu-icon {
display: none;
flex-direction: column;
cursor: pointer;
}
.bar {
width: 25px;
height: 3px;
background: #fff;
margin: 4px 0;
}
@media (max-width: 768px) {
.navbar {
display: none;
flex-direction: column;
position: absolute;
top: 60px;
left: 0;
background: aquamarine;
width: 100%;
text-align: center;
}
.navbar a {
margin: 10px 0;
}
.mobile-menu-icon {
display: flex;
}
}
.header.mobile-menu-open .navbar {
display: flex;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Waverly Farm: Home</title>
</head>
<body>
<header >
<div >Waverely Farm</div>
<nav >
<a href="index.html">Home</a>
<a href="about_us.html">About Us</a>
<a href="services.html">Services</a>
<a href="shop.html">Shop</a>
<a href="contactus.html">Contact Us</a>
</nav>
<div >
<div ></div>
<div ></div>
<div ></div>
</div>
</header>
</body>
</html>CodePudding user response：
You'll need JavaScript if you want to create an accessible mobile menu including a toggle button. It's actually quiet simple to do that, here's a approach I like to use:
HTML
First you'll need to add a button element for toggling the menu within the <nav> element. It's also a good idea to wrap the menu links in a list element to group them semantically.
<header >
<div >Waverely Farm</div>
<nav aria-label="main">
<button
aria-expanded="false"
aria-controls="menu"
>Menu</button>
<ul id="menu" role="list">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about_us.html">About Us</a>
</li>
<li>
<a href="services.html">Services</a>
</li>
<li>
<a href="shop.html">Shop</a>
</li>
<li>
<a href="contactus.html">Contact Us</a>
</li>
</ul>
</nav>
</header>
The ARIA attributes (starting with aria-) of the button element help screen reader users to better understand and use the menu. In this case, aria-expanded indicates the state of the menu (open/closed).
CSS
We can now use the aria-expanded state to conditionally add styles in CSS.
:where(ul, ol)[role="list"] {
list-style: none;
}
.menu {
display: flex;
flex-wrap: wrap;
}
.menu-toggle {
display: none;
}
@media screen and (max-width: 600px) {
.menu-toggle {
display: initial;
}
button[aria-expanded="false"] ul {
display: none;
}
.menu {
flex-direction: column;
flex-wrap: nowrap;
position: absolute;
inset: 130px 0 0;
text-align: center;
}
.menu a {
color: inherit;
}
}
The styles in .menu are just an example, customize them to make it look the way you want.
JavaScript
And finally add an EventListener for the menu button to toggle the state of aria-expanded to true or false:
const menuButton = document.querySelector(".menu-toggle");
menuButton.addEventListener("click", () => {
const state = menuButton.getAttribute("aria-expanded") === "false";
menuButton.setAttribute("aria-expanded", state);
});
I hope this helps. If anything is not clear, feel free to ask.
CodePudding user response：
I would consider using a CSS framework like Bootstrap:
Add this to your page head
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/boo[email protected]/dist/js/bootstrap.bundle.min.js"></script><nav >
<div >
<ul >
<li >
<a href="#">Link 1</a>
</li>
<li >
<a href="#">Link 2</a>
</li>
<li >
<a href="#">Link 3</a>
</li>
</ul>
</div>
</nav>