adding animation to hamburger menu

adding animation to hamburger menu - javascript

I'm trying to create a hamburger menu which slides out with an animation. I tried adding transform in the y axis but it doesn't slide out with an animation. The links has underline too. I added text-decoration: none but the link still has underline. what am I doing wrong in my code for these two errors?
codesandbox
<template>
<nav>
<div class="brand">brandName</div>
<ul class="nav-links" :class="'nav-links--' + isOpen">
<li v-for="(list, $index) in navLinks" :key="$index">
<a :href="list.link">{{ list.name }}</a>
</li>
<li id="button-part">
<button>Hello</button>
</li>
</ul>
<div #click="mobileNav()" class="burger">
<i class="fa fa-bars"></i>
</div>
</nav>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
current: 0,
isOpen: "closed",
navLinks: [
{
name: "Home",
link: "/home",
},
{ name: "About", link: "/about" },
{
name: "Contacts",
link: "/contact",
},
],
};
},
methods: {
mobileNav() {
if (this.isOpen === "closed") {
this.isOpen = "open";
} else {
this.isOpen = "closed";
}
console.log(this.isOpen);
},
},
};
</script>
<style>
ul.nav-links li {
list-style: none;
text-decoration: none;
}
nav {
display: flex;
justify-content: space-around;
background-color: grey;
height: 20px;
width: 100%;
margin: 0;
padding: 0;
text-decoration: none;
}
.brand {
margin-left: 2px;
}
ul.nav-links {
text-decoration: none;
position: absolute;
display: flex;
flex-direction: column;
border-top: solid 1px black;
width: 100%;
top: 10px;
background-color: red;
align-items: center;
opacity: 0.8;
transition: transform 5s;
transform: scaleY(1);
}
.nav-links--open {
display: block;
transform: scaleY(1);
}
.nav-links--closed {
display: none !important;
transform: scaleY(0);
}
.burger {
display: block;
}
#button-part {
margin-top: 2px;
}
#media (min-width: 768px) {
.brand {
margin-left: 5px;
}
ul.nav-links {
position: absolute;
display: flex;
flex-direction: row;
border-top: solid 1px black;
align-items: center;
justify-content: center;
width: 100%;
top: 10px;
background-color: red;
opacity: 0.8;
transition: transform 0.5s ease-in;
color: white;
text-decoration: none;
}
.nav-links--open {
display: block;
}
.nav-links--closed {
display: none !important;
}
ul.nav-links li {
opacity: 1;
padding: 0 25px;
text-decoration: none;
}
.burger {
display: block;
color: black;
}
}
#media (min-width: 1200px) {
nav {
background-color: red;
display: flex;
justify-content: space-around;
}
.brand {
display: flex;
align-items: center;
color: black;
font-size: 20px;
margin-left: 20px;
}
ul.nav-links {
position: static;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
border: none;
text-decoration: none;
padding-top: 0px;
margin-top: 9px;
}
ul.nav-links li {
color: black;
text-decoration: none;
}
.burger {
display: none;
cursor: pointer;
}
.brand > img {
height: 50px;
width: 85px;
}
}
</style>

For the link underline use this:
a{ text-decoration: none; }
UPDATED
For the transform issue check this pls: CSS3 transform not working

Related

Css is not doing what it intended for and I checked it again but can't find a problem

import React , {useState} from "react";
import Hamburger from "hamburger-react"
export default function Nav() {
const [isExpended , setIsExpended] = useState(false)
return(
<nav className="navigation">
WebName
<button onClick={() => {
setIsExpended(!isExpended)
}}
className="hamburger"><Hamburger /></button>
<div className={isExpended?"navigation-menu.expended":"navigation-menu"}>
<ul>
<li>Home</li>
<li>About</li>
<li>Help</li>
</ul>
</div>
</nav>
)
}
Css
.navigation {
height: 60px;
width: 100%;
display: flex;
align-items: center;
position: relative;
padding: 0.5rem 0rem;
background-color: #fff;
color: black;
box-shadow: 0 2px 2px 2px rgba(9, 9, 9, 0.23);
}
.brand-name {
text-decoration: none;
color: black;
font-size: 1.3rem;
margin-left: 1rem;
}
.navigation-menu {
margin-left: auto;
}
.navigation-menu ul {
display: flex;
padding: 0;
}
.navigation-menu li {
list-style-type: none;
margin: 0 1rem;
}
.navigation-menu li a {
text-decoration: none;
width: 100%;
justify-content: stretch;
}
.hamburger{
border: 0;
border-radius: 20%;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
position: absolute;
top: 50%;
right: 25px;
transform: translateY(-50%);
display: none;
}
#media screen and (max-width:700px) {
.navigation-menu ul{
display:none;
}
}
#media screen and (max-width:700px){
.hamburger{
display: block;
}
}
this is the code that is not working other are working fine but when size changed Hamburger do comes but navigation-menu doesn't style and just appear there
#media screen and (max-width:700px){
.navigation-menu ul{
flex-wrap: wrap;
position: absolute;
top: 60px;
left: 0;
flex-direction: column;
width: 100%;
height: calc(100vh - 77px);
background-color: #fff;
border-top: 1px solid black;
}
.navigation-menu li{
text-align: center;
margin: 0;
}
.navigation-menu li a{
color: black;
width: 100%;
padding: 1.5rem 0;
}
.navigation-menu li:hover{
background-color: #eee;
}
i try instead of class Name I use there tag name but result was still the same i don't know where my code gone wrong everyother thing is working as intended
}
#media screen and (max-width:700px){
.navigation-menu ul{
display: none;
}
}
#media screen and (max-width:700px){
.navigation-menu-expended ul{
display: block;
}
}

How to fix this nav menu burger button?

I have trouble with my header, when I open this website in a mobile, and click in the burger button the nav menu can't be responsive at all.
The menu is in "position: fixed", and depending on the diferents mobiles I need to change the "top: n%", so I don't know how this can be responsive.
picture of the problem https://i.gyazo.com/7ca78e79ced8784c8e72ebc7090920d3.png
picture image of the problem https://i.gyazo.com/4cda3f4bc256719a4d565e74d131e7a0.png
Link of the website http://maderines.000webhostapp.com/
const ipad = window.matchMedia('screen and (max-width: 658px)');
const menu = document.querySelector('.menu');
const burgerButton = document.querySelector('#burger-menu');
ipad.addListener(validation)
function validation(event) {
if (event.matches) {
burgerButton.addEventListener('click', hideShow);
} else {
burgerButton.removeEventListener('click', hideShow);
}
}
validation(ipad);
function hideShow() {
if (menu.classList.contains('is-active')) {
menu.classList.remove('is-active');
} else {
menu.classList.add('is-active');
}
}
/* start HEADER */
.header {
background-color: rgba(0, 0, 0, 0.692);
color: white;
display: flex;
height: 80px;
width: 100%;
justify-content: space-around;
flex-wrap: wrap;
position: fixed;
z-index: 2;
}
.header figure {
justify-self: center;
padding-top: 5px;
}
.menu {
height: inherit;
}
.header ol {
font-family: inherit;
display: flex;
height: inherit;
font-size: 17px;
}
.header ol li {
height: inherit;
}
.header a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
height: inherit;
padding: 0 10px;
transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
}
.header ol a:hover {
transform: scale(1.2);
opacity: 1;
}
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
}
figure {
margin: 0;
}
.burger-button {
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
display: none;
position: fixed;
left: 10px;
top: 20px;
color: white;
font-size: 28px;
}
/* end HEADER */
/* start Responsive */
#media screen and (max-width:781px) {
.header {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: auto;
align-items: center;
}
}
#media screen and (max-width:658px) {
.burger-button {
display: block;
position: fixed;
z-index: 3;
justify-content: center;
align-self: center;
top: 15px;
}
.header ol {
display: block;
font-size: 20px;
}
.header ol li {
height: 40px;
}
.menu {
position: fixed;
background-color: rgba(0, 0, 0, 0.692);
top: 12%;
left: -300px;
height: auto;
transition: .3s;
}
.menu.is-active {
left: 0;
}
}
#media screen and (max-width:480px) {
.burger-button {
top: 10px;
}
.menu {
top: 12%;
}
}
#media screen and (max-width:425px) {
.menu {
top: 14%;
}
}
#media screen and (max-width:320px) {
.menu {
top: 14vh;
}
.burger-button {
line-height: 40px;
width: 40px;
height: 40px;
left: 10px;
top: 15px;
font-size: 20px;
}
}
<i class="icon-menu burger-button" id="burger-menu"></i>
<div class="fondo">
<header class="header">
<figure class="logo ">
<img src="images/log3o.png" alt="Logo Carpinteria Mader Ranch">
</figure>
<nav class="menu">
<ol>
<li>Inicio</li>
<li>Nuestros trabajos</li>
<li>Contacto</li>
</ul>
</nav>
</header>

If I understood what you try to do, you can just change the menu class from position: fixed; to position: absolute; and set top: 97% to all media sizes, so you should have:
const ipad = window.matchMedia('screen and (max-width: 658px)');
const menu = document.querySelector('.menu');
const burgerButton = document.querySelector('#burger-menu');
ipad.addListener(validation)
function validation(event) {
if (event.matches) {
burgerButton.addEventListener('click', hideShow);
} else {
burgerButton.removeEventListener('click', hideShow);
}
}
validation(ipad);
function hideShow() {
if (menu.classList.contains('is-active')) {
menu.classList.remove('is-active');
} else {
menu.classList.add('is-active');
}
}
/* start HEADER */
.header {
background-color: rgba(0, 0, 0, 0.692);
color: white;
display: flex;
height: 80px;
width: 100%;
justify-content: space-around;
flex-wrap: wrap;
position: fixed;
z-index: 2;
}
.header figure {
justify-self: center;
padding-top: 5px;
}
.menu {
height: inherit;
}
.header ol {
font-family: inherit;
display: flex;
height: inherit;
font-size: 17px;
}
.header ol li {
height: inherit;
}
.header a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
height: inherit;
padding: 0 10px;
transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
}
.header ol a:hover {
transform: scale(1.2);
opacity: 1;
}
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
}
figure {
margin: 0;
}
.burger-button {
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
display: none;
position: fixed;
left: 10px;
top: 20px;
color: white;
font-size: 28px;
}
/* end HEADER */
/* start Responsive */
#media screen and (max-width:781px) {
.header {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: auto;
align-items: center;
}
}
#media screen and (max-width:658px) {
.burger-button {
display: block;
position: fixed;
z-index: 3;
justify-content: center;
align-self: center;
top: 15px;
}
.header ol {
display: block;
font-size: 20px;
}
.header ol li {
height: 40px;
}
.menu {
position: absolute;
background-color: rgba(0, 0, 0, 0.692);
top: 97%;
left: -300px;
height: auto;
transition: .3s;
}
.menu.is-active {
left: 0;
}
}
#media screen and (max-width:480px) {
.burger-button {
top: 10px;
}
.menu {
top: 97%;
}
}
#media screen and (max-width:425px) {
.menu {
top: 97%;
}
}
#media screen and (max-width:320px) {
.menu {
top: 97%;
}
.burger-button {
line-height: 40px;
width: 40px;
height: 40px;
left: 10px;
top: 15px;
font-size: 20px;
}
}
<i class="icon-menu burger-button" id="burger-menu"></i>
<div class="fondo">
<header class="header">
<figure class="logo ">
<img src="http://maderines.000webhostapp.com/images/log3o.png" alt="Logo Carpinteria Mader Ranch">
</figure>
<nav class="menu">
<ol>
<li>Inicio</li>
<li>Nuestros trabajos</li>
<li>Contacto</li>
</ul>
</nav>
</header>
</div>

windows.onclick keeps clicking automatically

const toggle = document.getElementById('toggle');
window.onclick = function (event) {
if (event.target == toggle) {
toggle.checked = false;
}
};
.navbar {
background-color: #5f686d;
display: flex;
justify-content: flex-end;
position: fixed;
width: 100vw;
z-index: 2;
top: 0;
}
.navbar .desktop {
list-style-type: none;
padding: 0;
display: flex;
margin-left: auto;
margin-top: 10px;
margin-right: 1rem;
margin-bottom: 10px;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
text-transform: capitalize;
}
#logo {
width: 150px;
height: 50px;
margin-top: 15px;
margin-right: 30vw;
margin-left: 2vw;
}
.navbar li img{
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
padding: 0px;
}
/* Dropdown Button */
.dropbtn {
background-color: #5f686d;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
border: 1px solid #95bbdf;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
.navbar ul li i{
font-size: 2rem;
margin-right: 2rem;
}
.navbar ul li div{
padding: 0px !important;
}
.navbar .fa-sort-down{
font-size: 1.5rem;
color: whitesmoke;
}
.navbar ul li ,
.navbar ul li div{
padding: 10px;
color: whitesmoke;
margin: auto;
cursor: pointer;
}
.navbar ul li div:hover{
border: none;
text-decoration: none;
}
.navbar ul li a {
text-decoration: none;
color: white;
border-bottom: 2px solid transparent;
}
.navbar ul li a:hover {
color: #ea4c88;
transition: 200ms ease;
}
.navbar label {
font-size: 40px;
color: whitesmoke;
line-height: 70px;
display: flex;
flex-direction: row;
display: none;
justify-content: flex-end;
}
.navbar #toggle {
display: none;
}
ol {
display: none !important;
background-color: rgb(255, 255, 255);
border: 1px solid black;
border-top: none;
}
ol a{
color: black;
}
ol li:hover a{
color: white;
}
ol li:hover{
background-color: rgb(107, 103, 103);
}
/*navbar media*/
#media screen and (max-width: 1031px) {
.navbar {
align-items: center;
justify-content: center;
}
.navbar ul {
margin-right: auto;
margin-left: auto;
justify-content: space-between;
}
#logo {
margin: auto;
padding-left: 1.5rem;
}
.prof_name{
display: none;
}
}
#media screen and (max-width: 630px) {
.navbar {
flex-direction: column !important;
align-items: center;
justify-content: center;
}
.navbar {
align-items: flex-start;
justify-content: flex-start;
}
#logo {
margin: 0.5rem;
}
.navbar .desktop{
display: none !important;
}
.navbar ol {
flex-direction: column;
width: 100%;
justify-content: flex-start;
}
.navbar ol li {
display: flex;
justify-content: center;
font-size: 1.3em;
margin: 0;
}
.navbar label {
align-self: flex-end;
margin-right: 10px;
display: flex;
cursor: pointer;
color: white;
width: 40px;
position: fixed;
}
#toggle[type=checkbox]:checked ~ ol {
display: block !important;
}
.prof_name{
display: none;
}
}
<nav class="navbar">
<img id="logo"src="../assets/images/logo.png" alt="logo">
<label for="toggle"> ☰ </label>
<input type="checkbox" id="toggle">
<ul class="desktop">
<li> <i class="fas fa-home" title="Home"></i></li>
<li onclick="toggleDropdown()">
<img src="../assets/images/avatar-1577909__340.png" alt="img_you">
</li>
<div class="dropdown">
<button class="dropbtn">Ayo Alesh |ADMIN. <i class="fas fa-sort-down"></i></button>
<div class="dropdown-content">
Create User
Log out
User
Staff
</div>
</div>
</ul>
<ol>
<li>
Home
</li>
<li>Create User</li>
<li> Log out</li>
<li>User</li>
<li> Staff</li>
</ol>
</nav
I'm using a checkbox to show and hide hamburger navbar on mobile view. I'm trying to make sure that when ever a user clicks anywhere on the screen when the navbar is opened, the checkbox should get checked and navbar should hide. But instead the navbar won't even open,I found out windows.onclick triggers immediately i try to open the navbar.

Try document instead of window. There wasn't any code to hide .navbar and the use of event.target doesn't look like it was needed. event.target references the element that the user clicked which in this situation can be considered anything.
document.onclick = function(event) {
const tog = document.getElementById('toggle');
const nav = document.querySelector('.navbar');
tog.checked = true;
nav.style.display = 'none';
};
.navbar {
background-color: #5f686d;
display: flex;
justify-content: flex-end;
position: fixed;
width: 100vw;
z-index: 2;
top: 0;
}
.navbar .desktop {
list-style-type: none;
padding: 0;
display: flex;
margin-left: auto;
margin-top: 10px;
margin-right: 1rem;
margin-bottom: 10px;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
text-transform: capitalize;
}
#logo {
width: 150px;
height: 50px;
margin-top: 15px;
margin-right: 30vw;
margin-left: 2vw;
}
.navbar li img {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
padding: 0px;
}
/* Dropdown Button */
.dropbtn {
background-color: #5f686d;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
border: 1px solid #95bbdf;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
.navbar ul li i {
font-size: 2rem;
margin-right: 2rem;
}
.navbar ul li div {
padding: 0px !important;
}
.navbar .fa-sort-down {
font-size: 1.5rem;
color: whitesmoke;
}
.navbar ul li,
.navbar ul li div {
padding: 10px;
color: whitesmoke;
margin: auto;
cursor: pointer;
}
.navbar ul li div:hover {
border: none;
text-decoration: none;
}
.navbar ul li a {
text-decoration: none;
color: white;
border-bottom: 2px solid transparent;
}
.navbar ul li a:hover {
color: #ea4c88;
transition: 200ms ease;
}
.navbar label {
font-size: 40px;
color: whitesmoke;
line-height: 70px;
display: flex;
flex-direction: row;
display: none;
justify-content: flex-end;
}
.navbar #toggle {
display: none;
}
ol {
display: none !important;
background-color: rgb(255, 255, 255);
border: 1px solid black;
border-top: none;
}
ol a {
color: black;
}
ol li:hover a {
color: white;
}
ol li:hover {
background-color: rgb(107, 103, 103);
}
/*navbar media*/
#media screen and (max-width: 1031px) {
.navbar {
align-items: center;
justify-content: center;
}
.navbar ul {
margin-right: auto;
margin-left: auto;
justify-content: space-between;
}
#logo {
margin: auto;
padding-left: 1.5rem;
}
.prof_name {
display: none;
}
}
#media screen and (max-width: 630px) {
.navbar {
flex-direction: column !important;
align-items: center;
justify-content: center;
}
.navbar {
align-items: flex-start;
justify-content: flex-start;
}
#logo {
margin: 0.5rem;
}
.navbar .desktop {
display: none !important;
}
.navbar ol {
flex-direction: column;
width: 100%;
justify-content: flex-start;
}
.navbar ol li {
display: flex;
justify-content: center;
font-size: 1.3em;
margin: 0;
}
.navbar label {
align-self: flex-end;
margin-right: 10px;
display: flex;
cursor: pointer;
color: white;
width: 40px;
position: fixed;
}
#toggle[type=checkbox]:checked~ol {
display: block !important;
}
.prof_name {
display: none;
}
}
<nav class="navbar">
<img id="logo" src="../assets/images/logo.png" alt="logo">
<label for="toggle"> ☰ </label>
<input type="checkbox" id="toggle">
<ul class="desktop">
<li>
<i class="fas fa-home" title="Home"></i>
</li>
<li onclick="toggleDropdown()">
<img src="../assets/images/avatar-1577909__340.png" alt="img_you">
</li>
<div class="dropdown">
<button class="dropbtn">Ayo Alesh |ADMIN. <i class="fas fa-sort-down"></i></button>
<div class="dropdown-content">
Create User
Log out
User
Staff
</div>
</div>
</ul>
<ol>
<li>
Home
</li>
<li>Create User</li>
<li> Log out</li>
<li>User</li>
<li> Staff</li>
</ol>
</nav>

Burger Menu does not open

Hello my Burger Menu does not open when i resize the browser. I tried many different thinks and nothing worked. Also theres a weird second right after you resize the window where the menu opens for a split second
Error : Uncaught TypeError: Cannot read property 'toggle' of undefined at HTMLDivElement.burger.addEventListener
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.navul');
burger.addEventListener('click', () => {
nav.classlist.toggle('nav-active');
});
}
navSlide();
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: red;
font-family: 'Poppins', sans-serif;
font-weight: 400;
}
.logo {
color: white;
letter-spacing: 6px;
text-transform: uppercase;
font-size: 20px;
}
.navul {
display: flex;
width: 45%;
color: white;
list-style: none;
justify-content: space-around;
}
.navul a {
text-decoration: none;
color: white;
letter-spacing: 2px;
font-size: 14px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
color: white;
margin: 5px;
background-color: white;
}
#media screen and (max-width:768px){
body{
overflow-x: hidden;
}
.navul {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: red;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.navul li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%);
}
<section id="01">
<nav class="navigation">
<div class="logo">
<h4>Spieker Manufaktur</h4>
</div>
<ul class="navul">
<li>Home</li>
<li>Über Uns</li>
<li>Produkte</li>
<li>Herstellung</li>
</ul>
<div class="burger">
<div class="line01"></div>
<div class="line02"></div>
<div class="line03"></div>
</div>
</nav>
</section>

Javascript Toggle class working but class not effective in element in dropdown

I frequently get these particular type of error in my code constantly which I will add a toggle function to the classList of an element with JavaScript and the code will toggle the class if I checked using the inspect element, but the class won't be effective to the element I add it to....
NOW MY PROBLEM IS :
In the code below at the media queries (max-width: 605px), I am trying to make a dropdown navigation. I added display:none to the #navbarp in the CSS and I added another class .open #navbarp { display:flex}, and I used the JavaScript to toggle the .open class. The JavaScript was toggling the class .open to the #navbarp but the CSS class wasn't effective -- the display: none wasn't changing to display:flex.
Please go to the link below to check the code
https://codepen.io/enipx/pen/zegJeP
var iconBtn = document.getElementById('icon-p');
var navbarp = document.getElementById('navbarp')
function openNav() {
iconBtn.classList.toggle('click');
navbarp.classList.toggle('open');
}
body {
font-family: arial;
margin: 0;
padding: 0;
}
/* ==== NAVBAR */
#navbar {
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
display: flex;
height: 60px;
align-items: center;
}
/* ==== NAVBAR ICON */
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 60px;
}
#navbar #icon-p:hover span {
background-color: #333;
}
#icon-p span {
width: 52px;
height: 6px;
border-radius: 3px;
margin-bottom: 6px;
background-color: gray;
transition: .4s;
}
.click .icon-1 {
transform: rotate(45deg) translate(9px, 7px);
}
.click .icon-2 {
opacity: 0;
}
.click .icon-3 {
transform: rotate(-45deg) translate(9px, -7px);
}
/* ==== NAVBAR ELEMENT */
#navbarp {
display: flex;
list-style: none;
margin-left: auto;
margin-right: 80px;
}
#navbarp .navbarpli {
padding: 10px 25px;
}
#navbarp .navbarpli a {
text-decoration: none;
font-size: 1.2em;
color: gray;
transition: .7s;
}
#navbarp .navbarpli a:hover {
color: #333;
}
/* ==== NAVBAR DROPDOWN */
#dropdown {
list-style-type: none;
background-color: #F7F1CF;
position: absolute;
align-items: center;
width: 200px;
margin-top: 18px;
display: none;
animation-name: zoom;
animation-duration: .1s;
}
#keyframes zoom {
from {
transform: scale(.9);
}
to {
transform: scale(1);
}
}
#dropdown li {
margin: 0;
margin-left: -40px;
padding: 15px 10px;
}
#dropdown li:hover {
background-color: #E2DCBB;
}
#dropdownBtn:hover #dropdown {
display: block;
}
/* ==== media 910px */
#media (max-width: 910px) {
#navbarp {
margin-right: 30px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 30px;
}
}
#media (max-width: 800px) {
#navbarp {
margin-right: 20px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 20px;
}
#navbarp .navbarpli {
padding: 10px 20px;
}
#navbarp .navbarpli a {
font-size: 1.1em;
}
}
/* ==== media 700px */
#media (max-width: 706px) {
#navbarp {
margin-right: 5px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 10px;
}
#navbarp .navbarpli {
padding: 10px 18px;
}
#navbarp .navbarpli a {
font-size: 1em;
}
}
/* ==== media 605px */
#media (max-width: 605px) {
#navbar {
flex-direction: column;
}
#navbarp {
flex-direction: column;
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
width: 100%;
height: 0;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
display: none;
overflow: hidden;
}
.open #navbarp {
display: flex;
}
#navbarp .navbarpli {
padding: 20px 0px;
}
#navbarp .navbarpli a {
font-size: 1.2em;
}
#navbar #icon-p {
margin: 0px;
margin: 12px 0;
}
#dropdown {
text-align: center;
margin-top: 10px;
right: 30%;
}
}
<div id="navbar">
<div id="icon-p" onclick="openNav()">
<span class="icon-1"></span>
<span class="icon-2"></span>
<span class="icon-3"></span>
</div>
<ul id="navbarp">
<li class="navbarpli">Home</li>
<li class="navbarpli">Explore</li>
<li class="navbarpli">Filter</li>
<li class="navbarpli" id="dropdownBtn">Discover
<ul id="dropdown">
<li>By Age</li>
<li>By User</li>
<li>By Name</li>
<li>By State</li>
</ul>
</li>
<li class="navbarpli">Affiliate</li>
<li class="navbarpli">More</li>
</ul>
</div>

Change .open #navbarp to #navbarp.open (no space between #navbarp and .open). The former targets an element with id navbarp whose parent has the class .open. Using the latter (with no space) targets the element with both the ID and the class.
Remove the height: 0 and the overflow: hidden. These are making the elements disappear, even though display: flex is being applied. You shouldn't need them, because you have display: none which makes them totally disappear when they are supposed to be hidden.
var iconBtn = document.getElementById('icon-p');
var navbarp = document.getElementById('navbarp')
function openNav() {
iconBtn.classList.toggle('click');
navbarp.classList.toggle('open');
}
body {
font-family: arial;
margin: 0;
padding: 0;
}
/* ==== NAVBAR */
#navbar {
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
display: flex;
height: 60px;
align-items: center;
}
/* ==== NAVBAR ICON */
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 60px;
}
#navbar #icon-p:hover span {
background-color: #333;
}
#icon-p span {
width: 52px;
height: 6px;
border-radius: 3px;
margin-bottom: 6px;
background-color: gray;
transition: .4s;
}
.click .icon-1 {
transform: rotate(45deg) translate(9px, 7px);
}
.click .icon-2 {
opacity: 0;
}
.click .icon-3 {
transform: rotate(-45deg) translate(9px, -7px);
}
/* ==== NAVBAR ELEMENT */
#navbarp {
display: flex;
list-style: none;
margin-left: auto;
margin-right: 80px;
}
#navbarp .navbarpli {
padding: 10px 25px;
}
#navbarp .navbarpli a {
text-decoration: none;
font-size: 1.2em;
color: gray;
transition: .7s;
}
#navbarp .navbarpli a:hover {
color: #333;
}
/* ==== NAVBAR DROPDOWN */
#dropdown {
list-style-type: none;
background-color: #F7F1CF;
position: absolute;
align-items: center;
width: 200px;
margin-top: 18px;
display: none;
animation-name: zoom;
animation-duration: .1s;
}
#keyframes zoom {
from {
transform: scale(.9);
}
to {
transform: scale(1);
}
}
#dropdown li {
margin: 0;
margin-left: -40px;
padding: 15px 10px;
}
#dropdown li:hover {
background-color: #E2DCBB;
}
#dropdownBtn:hover #dropdown {
display: block;
}
/* ==== media 910px */
#media (max-width: 910px) {
#navbarp {
margin-right: 30px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 30px;
}
}
#media (max-width: 800px) {
#navbarp {
margin-right: 20px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 20px;
}
#navbarp .navbarpli {
padding: 10px 20px;
}
#navbarp .navbarpli a {
font-size: 1.1em;
}
}
/* ==== media 700px */
#media (max-width: 706px) {
#navbarp {
margin-right: 5px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 10px;
}
#navbarp .navbarpli {
padding: 10px 18px;
}
#navbarp .navbarpli a {
font-size: 1em;
}
}
/* ==== media 605px */
#media (max-width: 605px) {
#navbar {
flex-direction: column;
}
#navbarp {
flex-direction: column;
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
width: 100%;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
display: none;
}
.open#navbarp {
display: flex;
}
#navbarp .navbarpli {
padding: 20px 0px;
}
#navbarp .navbarpli a {
font-size: 1.2em;
}
#navbar #icon-p {
margin: 0px;
margin: 12px 0;
}
#dropdown {
text-align: center;
margin-top: 10px;
right: 30%;
}
}
<div id="navbar">
<div id="icon-p" onclick="openNav()">
<span class="icon-1"></span>
<span class="icon-2"></span>
<span class="icon-3"></span>
</div>
<ul id="navbarp">
<li class="navbarpli">Home</li>
<li class="navbarpli">Explore</li>
<li class="navbarpli">Filter</li>
<li class="navbarpli" id="dropdownBtn">Discover
<ul id="dropdown">
<li>By Age</li>
<li>By User</li>
<li>By Name</li>
<li>By State</li>
</ul>
</li>
<li class="navbarpli">Affiliate</li>
<li class="navbarpli">More</li>
</ul>
</div>

Selector in CSS part for the case when #navbarp has open class is written wrong. Currently, it is saying for any children of the parent that has class open and id equal navbarp apply this rule (like here https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator). While the intent is that element over which rule should be applied, should contain has both id equal navbarp and class open.
So changing, .open #navbarp to .open#navbarp will fix an issue.

Better to use only one class for everything
const The_NavBar = document.getElementById('navbar');
document.getElementById('icon-p').onclick = function()
{
The_NavBar.classList.toggle('navOpen')
}
body {
font-family: arial;
margin: 0;
padding: 0;
}
/* ==== NAVBAR */
#navbar {
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
display: flex;
height: 60px;
align-items: center;
}
/* ==== NAVBAR ICON */
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 60px;
}
#navbar #icon-p:hover span {
background-color: #333;
}
#icon-p span {
width: 52px;
height: 6px;
border-radius: 3px;
margin-bottom: 6px;
background-color: gray;
transition: .4s;
}
#navbar.navOpen #icon-p span:nth-child(1) {
transform: rotate(45deg) translate(9px, 7px);
}
#navbar.navOpen #icon-p span:nth-child(2) {
opacity: 0;
}
#navbar.navOpen #icon-p span:nth-child(3) {
transform: rotate(-45deg) translate(9px, -7px);
}
/* ==== NAVBAR ELEMENT */
#navbarp {
display: flex;
list-style: none;
margin-left: auto;
margin-right: 80px;
}
#navbarp .navbarpli {
padding: 10px 25px;
}
#navbarp .navbarpli a {
text-decoration: none;
font-size: 1.2em;
color: gray;
transition: .7s;
}
#navbarp .navbarpli a:hover {
color: #333;
}
/* ==== NAVBAR DROPDOWN */
#dropdown {
list-style-type: none;
background-color: #F7F1CF;
position: absolute;
align-items: center;
width: 200px;
margin-top: 18px;
display: none;
animation-name: zoom;
animation-duration: .1s;
}
#keyframes zoom {
from {
transform: scale(.9);
}
to {
transform: scale(1);
}
}
#dropdown li {
margin: 0;
margin-left: -40px;
padding: 15px 10px;
}
#dropdown li:hover {
background-color: #E2DCBB;
}
#dropdownBtn:hover #dropdown {
display: block;
}
/* ==== media 910px */
#media (max-width: 910px) {
#navbarp {
margin-right: 30px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 30px;
}
}
#media (max-width: 800px) {
#navbarp {
margin-right: 20px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 20px;
}
#navbarp .navbarpli {
padding: 10px 20px;
}
#navbarp .navbarpli a {
font-size: 1.1em;
}
}
/* ==== media 700px */
#media (max-width: 706px) {
#navbarp {
margin-right: 5px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 10px;
}
#navbarp .navbarpli {
padding: 10px 18px;
}
#navbarp .navbarpli a {
font-size: 1em;
}
}
/* ==== media 605px */
#media (max-width: 605px) {
#navbar {
flex-direction: column;
}
#navbarp {
flex-direction: column;
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
width: 100%;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
display: none;
}
#navbar.navOpen #navbarp {
/* .open#navbarp */
display: flex;
}
#navbarp .navbarpli {
padding: 20px 0px;
}
#navbarp .navbarpli a {
font-size: 1.2em;
}
#navbar #icon-p {
margin: 0px;
margin: 12px 0;
}
#dropdown {
text-align: center;
margin-top: 10px;
right: 30%;
}
}
<div id="navbar">
<div id="icon-p">
<span></span>
<span></span>
<span></span>
</div>
<ul id="navbarp">
<li class="navbarpli">Homes</li>
<li class="navbarpli">Explore</li>
<li class="navbarpli">Filter</li>
<li class="navbarpli" id="dropdownBtn">Discover
<ul id="dropdown">
<li>By Age</li>
<li>By User</li>
<li>By Name</li>
<li>By State</li>
</ul>
</li>
<li class="navbarpli">Affiliate</li>
<li class="navbarpli">More</li>
</ul>
</div>

Develop Reference

JavaScript is the programming language of the Web.

adding animation to hamburger menu - javascript

For the link underline use this: a{ text-decoration: none; } UPDATED For the transform issue check this pls: CSS3 transform not working

Related

Css is not doing what it intended for and I checked it again but can't find a problem

How to fix this nav menu burger button?

windows.onclick keeps clicking automatically

Burger Menu does not open

Javascript Toggle class working but class not effective in element in dropdown

Categories

Resources