How do I display the list in a navBar when you click on the hamburger menu? Specifically the home and about 'text
Question
Below is my html/css. Feel free to see how it looks in your ide(I use vscode). When I click on the hamburger menu in the shrunken screen I want the 'Home' and 'About' text in the nav to appear and stack on top of eachother. I'm really just struggling with the JS(making the text appear once you click on the hamburger menu), I can try to implement the stacking afterwards but if you want to give it a shot go right ahead. Anything will help, and if you can implement the menu with JS that'll be amazing, that's what I've been trying to get down through this project. good day.
''''''' html '''''''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Backroads || Tour Company</title>
<!-- favicon -->
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />
<!-- font-awesome -->
<link
rel="stylesheet"
href="./fontawesome-free-5.12.1-web/css/all.min.css"
/>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
<!-- styles css -->
<link rel="stylesheet" href="./css/styles.css" />
</head>
<body>
<!-- header -->
<main>
<nav class="topNav">
<ul>
<div>
<li><img src="./images/favicon.ico" alt=""></li>
</div>
<button class="hamburger" id="hamburger" onclick="showText()">
<i class="fas fa-bars"></i>
</button>
<li><a href="#home">Home</a></li>
<li><a href="#section-title">About</a></li>
</ul>
</nav>
</main>
<!-- js -->
<script src="./js/app.js"></script>
</body>
</html>
'''''''
css
'''''''
/*
===============
Fonts
===============
*/
@import url("https://fonts.googleapis.com/css?family=Lato:400,700&display=swap");
/*
===============
Variables
===============
*/
:root {
/* primary/main color */
--clr-primary-5: hsl(185, 62%, 45%);
--clr-white: #fff;
--transition: all 0.3s linear;
--spacing: 0.25rem;
--ff-primary: "Lato", sans-serif;
}
/*
===============
Global Styles
===============
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--ff-primary);
background: var(--clr-white);
color: var(--clr-grey-1);
line-height: 1.5;
font-size: 0.875rem;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
img {
width: 100%;
display: block;
}
h1,
h2,
h3,
h4 {
letter-spacing: var(--spacing);
text-transform: capitalize;
line-height: 1.25;
margin-bottom: 0.75rem;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 0.875rem;
}
p {
margin-bottom: 1.25rem;
color: var(--clr-grey-5);
}
@media screen and (min-width: 800px) {
h1 {
font-size: 4rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 1.75rem;
}
h4 {
font-size: 1rem;
}
body {
font-size: 1rem;
}
h1,
h2,
h3,
h4 {
line-height: 1;
}
}
/* global classes */
.btn {
text-transform: uppercase;
background: var(--clr-primary-5);
color: var(--clr-white);
padding: 0.375rem 0.75rem;
letter-spacing: var(--spacing);
display: inline-block;
transition: var(--transition);
font-size: 0.875rem;
border: 2px solid transparent;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.btn:hover {
color: var(--clr-primary-1);
background: var(--clr-primary-8);
}
/*
===============
Navbar
=============== */
/* background of navbar */
nav ul{
background-color: grey;
display: flex;
flex-direction: row;
padding: .5rem;
border: white solid;
justify-content: flex-end;
}
nav ul li {
padding: 0 .5rem;
}
/* icon image */
nav div{
margin-right: auto;
}
nav div li img {
width: 2rem;
}
.hamburger{
background-color: transparent;
border: 0;
cursor: pointer;
font-size: 20px;
visibility: hidden;
}
nav li a{
color: var(--clr-primary-5);
}
.hamburger:focus{
outline: none;
}
@media screen and (max-width: 992px) {
nav li a {
display: none;
}
.hamburger{
visibility: visible;
}
}
1 answers
solution1
0 2022-07-01 01:08:00
You can give an id to your menu icon. Then get this icon with DOM in ur js and add an event listener for listening 'click' on this element. If clicked you will make visible your hamburger menu.
const burger = document.getElementById("hamburger");
burger.addEventListener("click", () => {
burger.textContent = "Justin";
burger.style.backgroundColor = "#ebd";
});
you can listen click on an specific element and then you can make sthing after that like this.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.