I want to change the color of the hamburger menu when the menu is opened. When the user clicks on the hamburger menu, the color should change from black to white and and vice versa. I´m not using a button for the menu but three spans. I haven't tried anything yet, because I´m pretty new and espacially js is still very difficult for me. Thanks for helping me!
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
hamburger.addEventListener("click", () => {
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
});
document.querySelector(".nav.link").forEach((n) =>
n.addEventListener("click", () => {
hamburger.classList.remove("active");
navMenu.classList.remove("active");
})
);
.hamburger {
display: none;
cursor: pointer;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: black;
}
#media (max-width: 1000px) {
.hamburger {
display: block;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.nav-menu {
position: fixed;
left: -100%;
top: 0px;
gap: 0;
flex-direction: column;
background-color: black;
width: 100%;
text-align: center;
}
.nav-item {
margin: 16px 0;
display: flex;
flex-direction: column;
}
.nav-menu.active {
left: 0;
}
.menu a {
color: white;
}
}
<nav id="nav" class="navbar">
<ul class="nav-menu">
<li id="current" class="nav-item">
<a
href="file:///C:/Users/.../index.html"
class="nav-link"
>Home</a
>
</li>
<li>
<a
href="file:///C:/Users/.../about.html"
class="nav-link"
>About</a
>
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
To change the color of the bars, you just need to add this to your css:
.hamburger.active .bar {
background-color: gray;
}
You wrote that you want the color to change from white to black and vice versa, but i wouldnt recommend you that, because you cant see the white bars on a white background. This is why i set the color to gray in this example.
Also, you made a mistake with the layering. You can see the hamburger infront of the menu when its open. To fix this, just set z-index to 2:
.nav-menu {
z-index: 2;
}
Here's a full example:
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
hamburger.addEventListener("click", () => {
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
});
document.querySelector(".nav.link").forEach((n) =>
n.addEventListener("click", () => {
hamburger.classList.remove("active");
navMenu.classList.remove("active");
})
);
.hamburger {
display: none;
cursor: pointer;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: black;
}
#media (max-width: 1000px) {
.hamburger {
display: block;
}
.hamburger.active .bar {
background-color: gray;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.nav-menu {
position: fixed;
left: -100%;
top: 0px;
gap: 0;
flex-direction: column;
background-color: black;
width: 100%;
text-align: center;
z-index: 2;
}
.nav-item {
margin: 16px 0;
display: flex;
flex-direction: column;
}
.nav-menu.active {
left: 0;
}
.menu a {
color: white;
}
}
<nav id="nav" class="navbar">
<ul class="nav-menu">
<li id="current" class="nav-item">
<a
href="file:///C:/Users/.../index.html"
class="nav-link"
>Home</a
>
</li>
<li>
<a
href="file:///C:/Users/.../about.html"
class="nav-link"
>About</a
>
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
Related
I am using the onclick method for turning my navbar on/off the problem that I'm having is when I adjust my screen size to mobile view my nav auto turns on.
I'm not very good at JavaScript. I have just started learning it so just fiddled around and absolutely nothing worked for me. Someone told me to put aria-expanded on my HTML so also tried that:
function closeNav() {
document.getElementById("nav_bar").style.height = "0%";
document.getElementById("open-btn").style.display = "inline-block";
document.getElementById("close-btn").style.display = "none";
}
function openNav() {
document.getElementById("nav_bar").style.height = "100%";
document.getElementById("open-btn").style.display = "none";
document.getElementById("close-btn").style.display = "inline-block";
}
body {
background: url(images/bg-img-01.jpg) no-repeat;
background-size: cover;
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#nav_bar {
background: radial-gradient( ellipse at top, rgba(196, 199, 200, 0.8), rgba(250, 255, 255, 0.02) 60%, rgba(0, 0, 0, 0) 1%);
position: fixed;
top: 0;
width: 100%;
}
#nav_bar>img {
display: none;
}
.nav {
background: none;
overflow: hidden;
display: flex;
margin-inline: auto;
flex-direction: row;
justify-content: space-around;
align-items: center;
list-style: none;
width: 65%;
left: 20%;
padding: 1.4em;
}
.list-item {
text-decoration: none;
color: #CBD5DF;
font-weight: bolder;
}
.list-item {
position: relative;
}
.list-item::before {
position: absolute;
content: "";
background-color: #535792;
height: 4px;
width: 0%;
top: 25px;
transition: all .3s ease-in;
}
.list-item:hover::before {
width: 100%;
}
.list-item:hover {
color: #C4C7C8;
}
#close-btn,
#open-btn {
display: none;
}
#media only screen and (max-width:768px) {
#nav_bar>img {
display: block;
position: absolute;
width: 10em;
left: 20%;
top: 10%;
}
#nav_bar {
width: 100%;
position: fixed;
z-index: 1;
top: 0;
overflow: hidden;
transition: 0.5s;
}
.nav {
position: relative;
display: flex;
flex-direction: column;
gap: 1.2rem;
top: 20%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.list-item {
text-decoration: none;
display: block;
color: #ffdada;
font-size: 1.5rem;
transition: 0.3s;
}
#close-btn,
#open-btn {
display: block;
position: absolute;
right: 25px;
top: 20px;
font-size: 2rem;
color: #818181;
transition: all 0.3s;
}
#close-btn:hover {
color: #fff;
}
<body>
<div id="nav_bar">
<a href="#" id="close-btn">
<i aria-expanded="false" onclick="closeNav()" class="bi bi-x-lg"></i>
</a>
<img src="assests/images/moon.png" alt="" />
<div class="nav">
<a class="list-item" href="#">Home</a>
<a class="list-item" href="#">About Me</a>
<a class="list-item" href="#">Projects</a>
<a class="list-item" href="#">C.V</a>
<a class="list-item" href="#">Contact</a>
</div>
</div>
<a aria-expanded="false" href="#" id="open-btn" onclick="openNav()"><i class="bi bi-list"></i
></a>
<script src="assests/nav.js"></script>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
Make use of the classList.toggle function that adds/remove a class from the Navbar. In this example, I add or remove the class d-none that has the property: display: none in CSS. With that you can hide or show the navbar by pressing the same button with a single line of code:
const BUTTON = document.querySelector('#toggle_navBar');
const NAV = document.querySelector('nav');
BUTTON.addEventListener('click', function() {
NAV.classList.toggle('d-none');
});
body {
background: url(images/bg-img-01.jpg) no-repeat;
background-size: cover;
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background: radial-gradient( ellipse at top, rgba(196, 199, 200, 0.8), rgba(250, 255, 255, 0.02) 60%, rgba(0, 0, 0, 0) 1%);
position: sticky;
top: 0;
width: 100%;
}
menu {
background: none;
overflow: hidden;
display: flex;
margin-inline: auto;
flex-direction: row;
justify-content: space-around;
align-items: center;
list-style: none;
width: 65%;
left: 20%;
padding: 1.4em;
}
nav li a {
text-decoration: none;
color: #CBD5DF;
font-weight: bolder;
position: relative;
}
nav li a::before {
position: absolute;
content: "";
background-color: #535792;
height: 4px;
width: 0%;
top: 25px;
transition: all .3s ease-in;
}
nav li a:hover::before {
width: 100%;
}
nav li a:hover {
color: #C4C7C8;
}
.d-none {
display: none;
}
<nav>
<img src="assests/images/moon.png" alt="" />
<menu>
<li><a class="list-item" href="#">Home</a></li>
<li><a class="list-item" href="#">About Me</a></li>
<li><a class="list-item" href="#">Projects</a></li>
<li><a class="list-item" href="#">C.V</a></li>
<li><a class="list-item" href="#">Contact</a></li>
</menu>
</nav>
<button id="toggle_navBar">Toggle NavBar</button>
A few changes I made were for semantic reasons. You should use semantic tags if possible and have accessibility in mind. Accessibility is also part of SEO-ratings!
I think the basic idea would be to have a button toggle some variable and then update the UI according to the value of that variable.
You can do this in several ways, but here is an example of a simple way to do it:
// Get your toggle button element
const toggle = document.querySelector(".nav-toggle");
// Get your nav element
const nav = document.querySelector(".nav");
// Create a variable to hold the state of your nav
let navIsOpen = false;
// Listen for clicks on your nav toggle button
toggle.addEventListener('click', () => {
// Update the nav state variable
navIsOpen = !navIsOpen;
// run a function that will update the nav "styles"
updateNav();
})
// This function will update the UI state according to the value of the navIsOpen variable. Here you can update all things you need, like your navbar, your toggle button, ...
function updateNav() {
navIsOpen
?
nav.classList.add('nav--is-open') :
nav.classList.remove('nav--is-open');
}
.nav {
margin-top: 1rem;
padding: 1rem;
background-color: lightgrey;
}
.nav--is-open {
background-color: purple;
color: white;
}
<button class="nav-toggle">Toggle nav</button>
<nav class="nav">
Your nav here
</nav>
i made a navbar for practice and tried to hide and show its content only when its title is clicked.
i managed to do it with toggling a hidden class on and off.
but i also want it to have transition and slide down not just to apear out of nowhere. i couldn't do this part.
i put transition inside nav-bar__list-box tweaked the hidden class with and without display:block but i didn't have any success.
hidden class:
.u-hidden-navbar {
display: none;
visibility: hidden;
height: 0 !important;
}
idk what else to do but to ask here for advise.
const btnNavBar = document.querySelectorAll(".nav-bar__heading-box");
const navList = document.querySelectorAll(".nav-bar__list-box");
for (let i = 0; i < btnNavBar.length; i++) {
btnNavBar[i].addEventListener(`click`, function () {
navList[i].classList.toggle("u-hidden-navbar");
for (let b = 0; b < navList.length; b++) {
if (b !== i) {
navList[b].classList.add("u-hidden-navbar");
}
}
});
}
*,
*::after,
*::before {
box-sizing: inherit;
padding: 0;
margin: 0;
}
html {
font-size: 62.5%;
}
body {
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.5;
}
ul {
list-style: none;
}
a {
text-decoration: none;
display: inline-block;
color: #e6e6e6;
}
img {
vertical-align: bottom;
}
.u-hidden-navbar {
display: none;
visibility: hidden;
height: 0 !important;
}
.nav-bar {
margin: 2rem;
border-radius: 0.8rem;
overflow: hidden;
order: 1;
background-color: #e6e6e6;
width: 30rem;
}
.nav-bar__heading-box {
background-color: #3b3b3b;
padding: 1rem;
}
.nav-bar__heading-box:not(:last-child) {
border-bottom: 1px solid #1b1b1b;
}
.nav-bar__list-box {
font-weight: 700;
font-size: 1.6rem;
transition: 5s all ease;
}
.nav-bar__item:not(:last-child) {
border-bottom: 1px solid #1b1b1b;
}
.nav-bar__link {
padding: 1rem 2rem 1rem;
color: #973ae4;
position: relative;
display: block;
transition: 0.4s all ease;
}
.nav-bar__link:hover {
color: #e6e6e6;
transform: translateY(0);
}
.nav-bar__link:hover::before {
transform: scaleX(1);
box-shadow: inset 0.2rem 0.2rem 0.5rem rgba(27, 27, 27, 0.6);
opacity: 1;
}
.nav-bar__link::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: left;
transform: scaleX(0.1);
opacity: 0;
background-color: #973ae4;
transition: all 0.3s ease-in-out;
z-index: -1;
}
<aside class="nav-bar">
<div class="nav-bar__heading-box">
<h3 class="heading-tertiary">HTML Topics</h3>
</div>
<div class="nav-bar__list-box u-hidden-navbar">
<ul class="nav-bar__list">
<li class="nav-bar__item">
<a
href="pages/js_topic_01.html"
class="nav-bar__link"
target="content"
>Link</a
>
</li>
<li class="nav-bar__item">
<a
href="pages/js_topic_01.html"
class="nav-bar__link"
target="content"
>Link</a
>
</li>
</ul>
</div>
<div class="nav-bar__heading-box">
<h3 class="heading-tertiary">CSS Topics</h3>
</div>
<div class="nav-bar__list-box u-hidden-navbar">
<ul class="nav-bar__list">
<li class="nav-bar__item">
<a
href="pages/js_topic_01.html"
class="nav-bar__link"
target="content"
>Link</a
>
</li>
<li class="nav-bar__item">
<a
href="pages/js_topic_01.html"
class="nav-bar__link"
target="content"
>Link</a
>
</li>
</ul>
</div>
<div class="nav-bar__heading-box">
<h3 class="heading-tertiary">JS Topics</h3>
</div>
<div class="nav-bar__list-box u-hidden-navbar">
<ul class="nav-bar__list">
<li class="nav-bar__item">
<a
href="pages/js_topic_01.html"
class="nav-bar__link"
target="content"
>1- JS High-level overview</a
>
</li>
<li class="nav-bar__item">
<a href="hello.html" class="nav-bar__link" target="content"
>Link</a
>
</li>
</ul>
</div>
</aside>
The browser does not know how to interpolate this kind of animation, so you'll have to be a little bit more specific about how you'd like the hidden element to appear.
Switching from display: block to display: none or from visibility: visible to visibility: hidden is a "on/off" situation with no way to guess what the middle state will be...
Instead you could try to transition from :
opacity: 0 to opacity: 1
transform: scaleY(0) to transform: scaleY(1)
both
You can be really creative, and rely on keyframed animations with several intermediate steps, but it's up to you to define the strategy.
document.querySelector('button').addEventListener('click', () => {
document.querySelector('.togglable').classList.toggle('hidden')
})
.togglable{
padding: 50px;
background: red;
transform: scaleY(1);
opacity: 1;
color: #FFF;
transition: .75s;
}
.togglable.hidden{
opacity: 0;
transform: scaleY(0);
}
<button>Click me</button>
<div class="togglable hidden">Hello</div>
This question already has answers here:
Understanding CSS selector priority / specificity
(4 answers)
Closed 1 year ago.
i was trying to make a toggle button for tablets/phones but it isn't working. The javascript class gets called when i click the toggle button so i don't know what is wrong...
My head where i load my js using defer function to avoid placing it at the end of the body
<script defer src="assets/js/index.js"></script>
const navToggle = document.querySelector(".nav-toggle");
const navMenu = document.querySelector(".nav-menu");
navToggle.addEventListener("click", () => {
navMenu.classList.toggle("nav-menu_visible");
});
/*my toggle button propertys on desktops*/
.header .nav .nav-toggle {
color: white;
background: none;
border: none;
font-size: 1.875em;
padding: 0 1.250em;
line-height: 60px;
cursor: pointer;
display: none;
}
/*for phones*/
#media (max-width: 1024px) {
.header .nav .nav-toggle {
display: block;
}
.header .nav .nav-menu {
flex-direction: column;
align-items: center;
background-color: #2c3e50;
position: fixed;
left: 0;
top: 60px;
width: 100%;
height: calc(100vh - 60px);
/*100%*/
overflow-y: auto;
padding: 1.250em 0;
left: 100%;
transition: left 0.3s;
}
.nav-menu_visible {
left: 0;
}
}
<header class="header">
<nav class="nav">
Portafolio
<button class="nav-toggle">
<i class="fas fa-bars"></i>
</button>
<ul class="nav-menu">
<li class="nav-menu-item">Inicio</li>
<li class="nav-menu-item">Sobre Mí</li>
<li class="nav-menu-item">Habilidades</li>
<li class="nav-menu-item">Conocimientos</li>
<li class="nav-menu-item">Proyectos</li>
<li class="nav-menu-item">Contacto</li>
</ul>
</nav>
</header>
I don't know why my menu isn't moving from left 0 to left 100% (it isn't showing :/)
It doesn't work because of CSS. Your specificity of nav-menu is much more as you have declared as.
.header .nav .nav-menu // 0 3 0
(x y x) => (id, class, tag)
Either you increase the specificity of .nav-menu_visible or decrease the specificity of .nav-menu
1) Decrease the specificity to 0 1 0 as
.nav-menu // 0 1 0
const navToggle = document.querySelector(".nav-toggle");
const navMenu = document.querySelector(".nav-menu");
navToggle.addEventListener("click", () => {
navMenu.classList.toggle("nav-menu_visible");
});
body {
background-color: black;
}
.header .nav .nav-toggle {
color: white;
background: none;
border: none;
font-size: 1.875em;
padding: 0 1.250em;
line-height: 60px;
cursor: pointer;
display: none;
}
/*for phones*/
#media (max-width: 1024px) {
.header .nav .nav-toggle {
display: block;
}
.nav-menu {
flex-direction: column;
align-items: center;
background-color: #2c3e50;
position: fixed;
left: 0;
top: 60px;
width: 100%;
height: calc(100vh - 60px);
/*100%*/
overflow-y: auto;
padding: 1.250em 0;
left: 100%;
transition: left 0.3s;
}
.nav-menu_visible {
left: 0;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<header class="header">
<nav class="nav">
Portafolio
<button class="nav-toggle">
<i class="fas fa-bars"></i>
</button>
<ul class="nav-menu">
<li class="nav-menu-item">Inicio</li>
<li class="nav-menu-item">Sobre Mí</li>
<li class="nav-menu-item">Habilidades</li>
<li class="nav-menu-item">Conocimientos</li>
<li class="nav-menu-item">Proyectos</li>
<li class="nav-menu-item">Contacto</li>
</ul>
</nav>
</header>
2) You can also increase the specificity to match with nav-menu as
.header .nav .nav-menu_visible { // 0 3 0
const navToggle = document.querySelector(".nav-toggle");
const navMenu = document.querySelector(".nav-menu");
navToggle.addEventListener("click", () => {
navMenu.classList.toggle("nav-menu_visible");
});
body {
background-color: black;
}
.header .nav .nav-toggle {
color: white;
background: none;
border: none;
font-size: 1.875em;
padding: 0 1.250em;
line-height: 60px;
cursor: pointer;
display: none;
}
/*for phones*/
#media (max-width: 1024px) {
.header .nav .nav-toggle {
display: block;
}
.header .nav .nav-menu {
flex-direction: column;
align-items: center;
background-color: #2c3e50;
position: fixed;
left: 0;
top: 60px;
width: 100%;
height: calc(100vh - 60px);
/*100%*/
overflow-y: auto;
padding: 1.250em 0;
left: 100%;
transition: left 0.3s;
}
.header .nav .nav-menu_visible {
left: 0;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<header class="header">
<nav class="nav">
Portafolio
<button class="nav-toggle">
<i class="fas fa-bars"></i>
</button>
<ul class="nav-menu">
<li class="nav-menu-item">Inicio</li>
<li class="nav-menu-item">Sobre Mí</li>
<li class="nav-menu-item">Habilidades</li>
<li class="nav-menu-item">Conocimientos</li>
<li class="nav-menu-item">Proyectos</li>
<li class="nav-menu-item">Contacto</li>
</ul>
</nav>
</header>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
<button onclick="myFunction()">Portafolio</button>
<nav id="myDIV">
<ul class="nav-menu">
<li class="nav-menu-item">Inicio</li>
<li class="nav-menu-item">Sobre Mí</li>
<li class="nav-menu-item">Habilidades</li>
<li class="nav-menu-item">Conocimientos</li>
<li class="nav-menu-item">Proyectos</li>
<li class="nav-menu-item">Contacto</li>
</ul>
</nav>
Recently I uploaded my website online on Github and it came out with some display problems.
I have an Hamburguer menu icon (.toggle - in my code) for widths less than 1210px. When I click in the icon it works fine, displaying the submenu with the items, but when I click in the home button the main page loses the menu icon. I don´t know why.
I've tested it previously before it became public, and it was working fine.
The same thing happens when I click on the a-tower or muda items and then backwards to home, again the icon disappears.
I have already tried to research about that error in specific but didn´t find one particularly similar.
html:
<div class="header">
<div class="menu-one">
<div class="logo">
<img src=".\logo_final.png">
<div class="lettering">
<h6><span class="bolder">F</span>ÁTIMA<span class="bolder">C</span>RISTÓVÃO <span class="smaller">by KELLER WILLIAMS</span></h6>
</div>
</div>
<div class= "toggle">
<span></span>
<span></span>
<span></span>
</div>
</div>
<ul id="menu-two" class="hide">
<li class="item">
<a href="./index.html" >Home</a>
</li>
<li class="item" id="proj">
Projects
</li>
<li class="options">
<a href="./Atower.html" >A-Tower</a>
</li>
<li class="options">
Muda
</li>
<li class="item">
About
</li>
<li class="item">
<a href="#Contact" >Contact</a>
</li>
</ul>
</div>
css:
.header {
background-color: rgb(235, 223, 201);
z-index: 100;
top: 0px;
margin: 0 auto;
max-height: 5rem;
position: fixed;
border-bottom-style: double;
display: flex;
justify-content: space-between;
width: 100%
}
.menu-one {
display: flex
}
.logo {
display: flex;
}
.logo img {
height: 100%
}
.lettering {
display: flex;
justify-content: center;
align-items: flex-end;
padding-left: 1%;
}
h6 {
margin-bottom: 1.7%;
font-family: 'calibri';
font-weight: lighter;
letter-spacing: 0.1em;
font-size: 0.8em;
}
h6 .bolder {
font-weight: bold;
}
h6 .smaller {
font-weight: lighter;
}
.toggle {
display: none;
}
a {
text-decoration: none;
font-family: 'Open Sans Condensed', sans-serif;
letter-spacing: 1px;
font-size: 20px;
color: black
}
#menu-two{
display: flex;
}
.hide {
display: none;
}
li {
list-style: none;
padding: 1em
}
#media only screen and (max-width: 1210px) {
#menu-two {
display: block;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s;
}
#proj {
display: none;
}
#menu-two.visible {
opacity: 0.9;
pointer-events: auto;
}
.hide {
background-color: rgb(245, 243, 229);
opacity: 0.95;
position: absolute;
width: 100%;
top: 4rem;
text-align: center;
}
.options {
display: block;
}
.menu-one {
display: flex;
justify-content: space-between;
width: 100%
}
.toggle{
display: initial;
padding-top: 1.5rem;
transform: translate(-10px);
cursor: pointer;
}
.toggle span {
position: relative;
width: 36px;
height: 4px;
display: block;
background-color: black;
margin-bottom: 8px;
transition: 0.5s;
}
.toggle span:nth-child(1) {
transform-origin: left;
}
.toggle span:nth-child(2) {
transform-origin: center;
}
.toggle span:nth-child(3) {
transform-origin: left;
}
.toggle.active span:nth-child(1) {
transform: rotate(45deg);
left: 2px;
}
.toggle.active span:nth-child(2) {
transform: rotate(315deg);
right: 3px;
}
.toggle.active span:nth-child(3) {
transform: scaleX(0);
}
}
js:
$(document).ready(() => {
$('.toggle, .item').on('click', function() {
$('.toggle').toggleClass('active');
$('#menu-two').toggleClass('visible')
})
$('.active').on('click', function() {
$('.toggle').fadeToggle()
})
})
Note: when I resize my browser in my desktop, when it gets smaller, between 870px and 560px the menu burguer stays on the right, and disappears during these dimensions periods.
I have checked your site, it's not a jquery issue. The hamburger icons disappear because of the logo property "flex".
Replace this CSS on your stylesheet, I will fix your issue.
.logo {
display: flex;
flex: 1;
}
when your hamburger menu appears, it's got CSS display: block property so it failed to counter the display: flex.
Let me know Please.
A couple things are going on here. First, some of the links are redirecting you to a new page, without the header code. Second, you have your first click event set up to respond to .toggle and .item. .item refers to your menu items, so you want to remove that target.
$(document).ready(() => {
$('.toggle').on('click', function() {
$('.toggle').toggleClass('active');
$('#menu-two').toggleClass('visible')
})
$('.active').on('click', function() {
$('.toggle').fadeToggle()
})
$('ul#menu-two > li > a').click(function(e){
e.preventDefault();
});
});
#media only screen and (max-width: 1210px) {
#menu-two {
display: block;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s;
}
#proj {
display: none;
}
#menu-two.visible {
opacity: 0.9;
pointer-events: auto;
}
.hide {
background-color: rgb(245, 243, 229);
opacity: 0.95;
position: absolute;
width: 100%;
top: 4rem;
text-align: center;
}
.options {
display: block;
}
.menu-one {
display: flex;
justify-content: space-between;
width: 100%
}
.toggle {
display: initial;
padding-top: 1.5rem;
transform: translate(-10px);
cursor: pointer;
}
.toggle span {
position: relative;
width: 36px;
height: 4px;
display: block;
background-color: black;
margin-bottom: 8px;
transition: 0.5s;
}
.toggle span:nth-child(1) {
transform-origin: left;
}
.toggle span:nth-child(2) {
transform-origin: center;
}
.toggle span:nth-child(3) {
transform-origin: left;
}
.toggle.active span:nth-child(1) {
transform: rotate(45deg);
left: 2px;
}
.toggle.active span:nth-child(2) {
transform: rotate(315deg);
right: 3px;
}
.toggle.active span:nth-child(3) {
transform: scaleX(0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
<div class="menu-one">
<div class="logo">
<img src=".\logo_final.png">
<div class="lettering">
<h6><span class="bolder">F</span>ÁTIMA<span class="bolder">C</span>RISTÓVÃO <span class="smaller">by KELLER WILLIAMS</span></h6>
</div>
</div>
<div class="toggle">
<span></span>
<span></span>
<span></span>
</div>
</div>
<ul id="menu-two" class="hide">
<li class="item">
Home
</li>
<li class="item" id="proj">
Projects
</li>
<li class="options">
A-Tower
</li>
<li class="options">
Muda
</li>
<li class="item">
About
</li>
<li class="item">
Contact
</li>
</ul>
</div>
I'm having some trouble with my fade in Menu. I am using jQuery to mouseover and mouseout, which will add a class to the menu to make it darker.
When the menu opens, a keyframe animation runs, which sets the menu's background at black and then runs through until orange.
#keyframes menuinfade {
0% {
background-color: #000;
}
50% {
background-color: #000;
}
100% {
background-color: #e07a18;
}
}
#menu.is-open {
opacity: 1;
visibility: visible;
animation-delay: 2s;
animation: menuinfade 6.2s;
-moz-animation: menuinfade 6.2s;
-webkit-animation: menuinfade 6.2s;
-o-animation: menuinfade 6.2s;
}
I'd like so that when the site's navigation Burger is hovered the background of the menu changes. I am doing this with addClass/removeClass.
burger.on('mouseover', function () {
if (menuOpen == true) {
menu.addClass('black-close');
}
});
burger.on('mouseout', function () {
if (menuOpen == true) {
menu.removeClass('black-close');
}
});
Once the menu has been opened when you hover over the burger the animation is not smooth. It jumps from the finished keyframe state of orange, to the black hover addClass. I do have a transition on the CSS though:
#menu.is-open.black-close {
background: #000;
transition: 340ms ease
}
When the menu opens, a .is-open class is added (also using addClass) to the main #menu div.
Interestingly, when the menu is open and you hover the Burger (#bk) a second time or a third etc, it works, and just as it should, with a smooth transition, but not when you first hove it. I can't figure it out.
// Nav
function theNavigationSystem() {
// Menu Variables
var menu = $('#menu');
var header = $('header');
var burger = $('header button#bk');
var heading = $('nav > ul .column .nav__heading__title');
var subMenuItems = $('nav > ul .column.site-map');
// Full Screen Setup
menuOpen = false;
burger.on('click', function () {
if (!menuOpen) {
menu.addClass('is-open');
header.addClass('menu-open');
header.addClass('transparent');
heading.addClass('is-open');
subMenuItems.addClass('is-open');
menuOpen = true;
} else {
menu.removeClass('is-open');
header.removeClass('menu-open');
header.removeClass('transparent');
heading.removeClass('is-open');
subMenuItems.removeClass('is-open');
menuOpen = false;
}
});
burger.on('mouseover', function () {
if (menuOpen == true) {
menu.addClass('black-close');
}
});
burger.on('mouseout', function () {
if (menuOpen == true) {
menu.removeClass('black-close');
}
});
}
$(document).ready(function () {
// Nav
theNavigationSystem();
});
header {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 25px 0;
transition: all 1000ms cubic-bezier(0.230, 0.950, 0.100, 1.000);
width: 100%;
background: #fff;
z-index: 100
}
header.transparent {
background: 0
}
header > .constraint, .content-grid.up-next .panel-headings, main.full > .constraint {
display: flex;
-ms-flex-align: center;
align-items: center;
justify-content: space-between;
}
header #bk {
width:20px;
height:20px;
position: absolute;
right: 50px;
z-index: 1000
}
#menu {
position: fixed;
overflow-y: auto;
overflow-x: hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #e07a18;
color: #fff;
transition: all 1000ms cubic-bezier(0.230, 0.950, 0.100, 1.000);
visibility: hidden;
opacity: 0;
z-index: 20
}
#keyframes menuinfade {
0% {
background-color: #000;
}
50% {
background-color: #000;
}
100% {
background-color: #e07a18;
}
}
#menu.is-open {
opacity: 1;
visibility: visible;
animation-delay: 2s;
animation: menuinfade 6.2s;
-moz-animation: menuinfade 6.2s;
-webkit-animation: menuinfade 6.2s;
-o-animation: menuinfade 6.2s;
}
#menu.is-open.black-close {
background: #000;
transition: 340ms ease
}
#menu #main-navigation {
margin: 210px 50px 0 16.785%;
padding-bottom: 50px
}
#menu #main-navigation > nav > ul .column {
width: 23.6%
}
nav > ul .column span {
display: block
}
nav > ul .column span:first-child:not(.nav__heading__title) {
margin-top: 85px;
margin-top: calc( 50px + 1em + 20px);
margin-bottom: 50px;
font-size: 18px;
font-size: 1.83rem;
font-weight: 500;
letter-spacing: 1px;
letter-spacing: .036rem;
text-transform: capitalize
}
nav > ul .column span:first-child {
position: relative
}
nav > ul .column span:first-child::after {
content:"\0020";
position: absolute;
width: 25px;
height: 3px;
background: #fff;
bottom: -12px;
left: 0;
}
nav > ul .column .nav__heading__title {
margin-bottom: 50px;
font-size: 20px;
font-size: 2rem;
font-weight: 500;
opacity: 0;
transition: 550ms ease;
}
nav > ul .column .nav__heading__title.is-open {
opacity: 1;
transition-delay: 503ms
}
nav > ul .column.site-map {
opacity: 0;
transition: 750ms ease;
}
nav > ul .column.site-map.is-open {
opacity: 1;
transition-delay: 1.1s
}
#menu #footer {
position: fixed;
bottom: 50px;
left: 50px;
width: 16.5%
}
#menu a, #menu a:visited {
color: inherit;
text-decoration: none
}
nav ul > .column a {
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
<section id="footer">
<ol>
<li>Address
</li>
<li>Next Address
</li>
<li>SX-CC SL9 99S
</li>
<li class="contact-methods">
<a href="tel:00000000">000000000
</a>
</li>
<li>
<a href="">Email Us
</a>
</li>
</ol>
</section>
<section id="main-navigation">
<nav>
<ul>
<li class="column">
<span class="nav__heading__title">Site Map
</span>
<a class="nav-areas" href="/">Homepage
</a>
</li>
<li class="column site-map">
<span class="nav__heading">Projects
</span>
<a class="nav-areas" href="/">The Beldi
</a>
<a class="nav-areas" href="/projects/belgravia/">Belgravia House
</a>
<a class="nav-areas" href="/">Sahar
</a>
<a class="nav-areas" href="/">Broonstone
</a>
<a class="nav-areas" href="/">London Road
</a>
<a class="nav-areas" href="/">Tamon
</a>
</li>
<li class="column site-map">
<span class="nav__heading">Online
</span>
<a class="nav-areas" href="/">Facebook
</a>
<a class="nav-areas" href="/">Instagram
</a>
</li>
<li class="column site-map">
<span class="nav__heading">Find Out More
</span>
<a class="nav-areas" href="/contact/">Contact Us
</a>
<a class="nav-areas" href="/about/">Our History
</a>
</li>
</ul>
</nav>
</section>
</div>
<header>
<div class="constraint">
<div class="logo">
</div>
<button id="bk">
<span></span>
<span></span>
<span></span>
</button>
</div>
</header>
JsFiddle https://jsfiddle.net/hkbv0xwq/5/
First : Try using CSS transition for simple animations like this, it will make your work easier.
Second : I am not sure if this is the ideal solution for your problem but I can say the reason why you are not getting the animation for the first time is because black-close is never present in the DOM before you mouseover burger and hence its not taking its transition function in the first attempt.
To solve the problem, you should do the following :
Add .menu-close initially with #menu
Remove it in the complete function of menu.addClass
Make the .black-close style independent of .is-open
Check the below snippet for refference.
// Nav
function theNavigationSystem() {
// Menu Variables
var menu = $('#menu');
var header = $('header');
var burger = $('header button#bk');
var heading = $('nav > ul .column .nav__heading__title');
var subMenuItems = $('nav > ul .column.site-map');
// Full Screen Setup
menuOpen = false;
burger.on('click', function () {
if (!menuOpen) {
menu.addClass('is-open', function(){
menu.removeClass('black-close');
});
header.addClass('menu-open');
header.addClass('transparent');
heading.addClass('is-open');
subMenuItems.addClass('is-open');
menuOpen = true;
} else {
menu.removeClass('is-open');
menu.addClass('black-close');
header.removeClass('menu-open');
header.removeClass('transparent');
heading.removeClass('is-open');
subMenuItems.removeClass('is-open');
menuOpen = false;
}
});
burger.on('mouseover', function () {
if (menuOpen == true) {
menu.addClass('black-close');
}
});
burger.on('mouseout', function () {
if (menuOpen == true) {
menu.removeClass('black-close');
}
});
}
$(document).ready(function () {
// Nav
theNavigationSystem();
});
header {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 25px 0;
transition: all 1000ms cubic-bezier(0.230, 0.950, 0.100, 1.000);
width: 100%;
background: #fff;
z-index: 100
}
header.transparent {
background: 0
}
header > .constraint, .content-grid.up-next .panel-headings, main.full > .constraint {
display: flex;
-ms-flex-align: center;
align-items: center;
justify-content: space-between;
}
header #bk {
width:20px;
height:20px;
position: absolute;
right: 50px;
z-index: 1000
}
#menu {
position: fixed;
overflow-y: auto;
overflow-x: hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #e07a18;
color: #fff;
transition: all 1000ms cubic-bezier(0.230, 0.950, 0.100, 1.000);
visibility: hidden;
opacity: 0;
z-index: 20
}
#keyframes menuinfade {
0% {
background-color: #000;
}
50% {
background-color: #000;
}
100% {
background-color: #e07a18;
}
}
#menu.is-open {
opacity: 1;
visibility: visible;
animation-delay: 2s;
animation: menuinfade 6.2s;
-moz-animation: menuinfade 6.2s;
-webkit-animation: menuinfade 6.2s;
-o-animation: menuinfade 6.2s;
}
#menu.black-close {
background: #000;
transition: 340ms ease
}
#menu #main-navigation {
margin: 210px 50px 0 16.785%;
padding-bottom: 50px
}
#menu #main-navigation > nav > ul .column {
width: 23.6%
}
nav > ul .column span {
display: block
}
nav > ul .column span:first-child:not(.nav__heading__title) {
margin-top: 85px;
margin-top: calc( 50px + 1em + 20px);
margin-bottom: 50px;
font-size: 18px;
font-size: 1.83rem;
font-weight: 500;
letter-spacing: 1px;
letter-spacing: .036rem;
text-transform: capitalize
}
nav > ul .column span:first-child {
position: relative
}
nav > ul .column span:first-child::after {
content:"\0020";
position: absolute;
width: 25px;
height: 3px;
background: #fff;
bottom: -12px;
left: 0;
}
nav > ul .column .nav__heading__title {
margin-bottom: 50px;
font-size: 20px;
font-size: 2rem;
font-weight: 500;
opacity: 0;
transition: 550ms ease;
}
nav > ul .column .nav__heading__title.is-open {
opacity: 1;
transition-delay: 503ms
}
nav > ul .column.site-map {
opacity: 0;
transition: 750ms ease;
}
nav > ul .column.site-map.is-open {
opacity: 1;
transition-delay: 1.1s
}
#menu #footer {
position: fixed;
bottom: 50px;
left: 50px;
width: 16.5%
}
#menu a, #menu a:visited {
color: inherit;
text-decoration: none
}
nav ul > .column a {
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu" class="black-close">
<section id="footer">
<ol>
<li>Address
</li>
<li>Next Address
</li>
<li>SX-CC SL9 99S
</li>
<li class="contact-methods">
<a href="tel:00000000">000000000
</a>
</li>
<li>
<a href="">Email Us
</a>
</li>
</ol>
</section>
<section id="main-navigation">
<nav>
<ul>
<li class="column">
<span class="nav__heading__title">Site Map
</span>
<a class="nav-areas" href="/">Homepage
</a>
</li>
<li class="column site-map">
<span class="nav__heading">Projects
</span>
<a class="nav-areas" href="/">The Beldi
</a>
<a class="nav-areas" href="/projects/belgravia/">Belgravia House
</a>
<a class="nav-areas" href="/">Sahar
</a>
<a class="nav-areas" href="/">Broonstone
</a>
<a class="nav-areas" href="/">London Road
</a>
<a class="nav-areas" href="/">Tamon
</a>
</li>
<li class="column site-map">
<span class="nav__heading">Online
</span>
<a class="nav-areas" href="/">Facebook
</a>
<a class="nav-areas" href="/">Instagram
</a>
</li>
<li class="column site-map">
<span class="nav__heading">Find Out More
</span>
<a class="nav-areas" href="/contact/">Contact Us
</a>
<a class="nav-areas" href="/about/">Our History
</a>
</li>
</ul>
</nav>
</section>
</div>
<header>
<div class="constraint">
<div class="logo">
</div>
<button id="bk">
<span></span>
<span></span>
<span></span>
</button>
</div>
</header>
Hope this helps