I want to implement a dropdown menu for mobile devices with animation so when the transition ends, it needs to be display:none. Here's what I've done:
const menuButton = document.querySelector('.menuButton')
const navMenu = document.querySelector('.nav')
function menuToggle() {
if (navMenu.classList.contains('navDisplay')) {
navMenu.classList.remove('navShow')
setTimeout(() => {
navMenu.classList.remove('navDisplay')
}, 300)
} else {
navMenu.classList.add('navDisplay')
setTimeout(() => {
navMenu.classList.add('navShow')
}, 0)
}
}
menuButton.addEventListener('click', menuToggle)
* {
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
color: #e8e8e8;
}
html, body {
overflow-x: hidden;
background-color: rgb(66, 66, 66);
}
h2 {
margin: 15px 0;
}
a {
transition: all.3s ease;
-webkit-transition: all.3s ease;
-moz-transition: all.3s ease;
color: #e8e8e8;
text-decoration: none;
}
a:hover {
color: #777777;
}
/*--------------NAV BAR------------*/
header {
background-color: rgba(24, 24, 24, 0.95);
position: fixed;
width: 100%;
top: 0;
z-index: 10;
}
.menuButton {
display: none;
position: fixed;
right: 0;
color: white;
font-size: 1.5em;
line-height: 65px;
margin: 10 30px;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
cursor: pointer;
}
.logo {
color: white;
font-size: 30px;
font-weight: bold;
font-family: 'Fredoka One', sans-serif;
line-height: 65px;
}
nav div ul {
text-align: center;
flex-direction: column;
margin-top: 50px;
overflow: hidden;
}
nav div ul li {
margin: 20px 0;
}
nav {
flex-direction: column;
}
.nav {
display: none;
box-sizing: border-box;
width: 100%;
overflow: hidden;
height: 0;
transition: height 300ms ease-in-out;
-webkit-transition: height 300ms ease-in-out;
-moz-transition: height 300ms ease-in-out;
}
.orderButton {
padding: 20px;
}
.logo {
text-align: center;
}
.menuButton {
display: block;
}
.navShow {
height: 100vh;
}
.navDisplay {
display: block;
}
<header>
<div class="menuButton">☰</div>
<nav>
<p class="logo">LOGO</p>
<div class="nav">
<ul>
<li><div class="orderButton">ELEMENT1</div></li>
<li>ELEMENT2</li>
<li>ELM3</li>
</ul>
</div>
</nav>
</header>
So, the menu has display:none and height:0 by default. The click event listener triggers function that checks if menu is displayed or not and adds or removes respective classes (the display class removes after the transition ends with the help of timeout 400ms). Is there any more beautiful or less code solutions?
You are making it way more complex. You don't need to have a display:none and a height:0. height:0 with overflow:hidden will do the job. If you wanna show the links after the menu gets its height with a delay, you could use opacity. That and using the toggle function will make it as simple as this:
const menuButton = document.querySelector(".menuButton");
const navMenu = document.querySelector(".nav");
function menuToggle() {
navMenu.classList.toggle("navShow");
}
menuButton.addEventListener("click", menuToggle);
* {
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
color: #e8e8e8;
}
html,
body {
overflow-x: hidden;
background-color: rgb(66, 66, 66);
}
h2 {
margin: 15px 0;
}
a {
transition: all.3s ease;
-webkit-transition: all.3s ease;
-moz-transition: all.3s ease;
color: #e8e8e8;
text-decoration: none;
}
a:hover {
color: #777777;
}
/*--------------NAV BAR------------*/
header {
background-color: rgba(24, 24, 24, 0.95);
position: fixed;
width: 100%;
top: 0;
z-index: 10;
}
.menuButton {
display: none;
position: fixed;
right: 0;
color: white;
font-size: 1.5em;
line-height: 65px;
margin: 10 30px;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
cursor: pointer;
}
.logo {
color: white;
font-size: 30px;
font-weight: bold;
font-family: "Fredoka One", sans-serif;
line-height: 65px;
}
nav div ul {
text-align: center;
flex-direction: column;
margin-top: 50px;
overflow: hidden;
}
nav div ul li {
margin: 20px 0;
}
nav {
flex-direction: column;
}
.nav {
box-sizing: border-box;
width: 100%;
overflow: hidden;
height: 0;
opacity:0;
transition: height 300ms ease-in-out,opacity 300ms 400ms ease-in-out;
}
.orderButton {
padding: 20px;
}
.logo {
text-align: center;
}
.menuButton {
display: block;
}
.navShow {
opacity:1;
height: 100vh;
}
<header>
<div class="menuButton">☰</div>
<nav>
<a href="index.html">
<p class="logo">LOGO</p>
</a>
<div class="nav">
<ul>
<li>
<div class="orderButton">ELEMENT1</div>
</li>
<li>ELEMENT2</li>
<li>ELM3</li>
</ul>
</div>
</nav>
</header>
Related
In the keyframes part, my PC doesn't recognize the from part. If it would, it would be blue and the opacity command would be grey. But as you see none of them is correct and I don't know why. Because of this little error, my HTML website is not working the way it should. Can anyone please help me? I would like to finish my HTML website.
body {
margin: 0;
padding: 0;
animation: bgcolor infinite 20s;
}
h1 {
font-family: 'Yeseva One', cursive;
font-size: 4em;
margin: 0;
color: #fff;
}
#keyframes bgcolor {
0% {
background: #f1c40f;
}
10% {
background: #f39c12;
}
20% {
background: #e67e22;
}
30% {
background: #d35400;
}
40% {
background: #e74c3c;
}
50% {
background: #c0392b;
}
60% {
background: #e74c3c;
}
70% {
background: #d35400;
}
80% {
background: #e67e22;
}
90% {
background: #f39c12;
}
100% {
background: #f1c40f;
}
}
h2 {
font-family: 'IM Fell DW Pica', serif;
font-size: 3em;
margin: 0;
color: #fff;
}
p {
font-family: 'Clicker Script', cursive;
font-size: 2em;
margin: 0;
color: #fff;
}
button {
font-family: 'Playfair Display SC', serif;
font-size: 1em;
}
button {
margin: 0;
border: none;
background: #ea1538;
padding: 12px 30px;
border-radius: 30px;
color: white;
font-weight: bold;
box-sizing: border-box;
transition: .3s
}
button:hover {
transform: scale(1.3);
cursor: pointer;
}
.hero {
height: 100vh;
width: 100%;
}
nav {
display: flex;
align-items: center;
min-height: 8vh;
justify-content: space-between;
padding-left: 25%;
padding-right: 10%;
}
.logo {
color: white;
font-size: 28px;
}
.nav-links {
display: flex;
justify-content: space-between;
}
.nav-links a {
text-decoration: none;
letter-spacing: 1px;
}
.line {
width: 100%;
height: 3px;
background-color: white;
margin: 5px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
}
span {
color: #000000;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 10px 20px;
font-size: 19px;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
}
nav ul li a:hover {
color: #000000;
transition: .2s;
}
#media screen and (max-width:1024px) {
.nav-links {
display: flex;
justify-content: space-between;
width: 60%;
}
}
#media screen and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
background-color: #ffeaa7;
/*just to see if the slider works*/
right: 0px;
height: 100vh;
top: 18vh;
display: flex;
flex-direction: column;
align-items: center;
width: 40%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
padding-left: 100%;
display: block;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
I'm not sure I fully understand your question, it might be helpful to reframe it, with a minimal reproducible example. See StackOverflows MRE
I don't see you calling the animation anywhere in your code. You need to target the nav links, and tell it to use the animation navLinkFade.
Here is an example of a super simple animation.
ul {
animation: fade 3s forwards;
}
#keyframes fade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
<ul>
<li>Test</li>
<li>Test</li>
</ul>
Want to add an opacity transition when toggling the menu open/closed. It works when the menu opens, but not when the menu closes. Why is this happening?
// Selectors
let header = document.querySelector('.header')
let hamburgerMenu = document.querySelector('.hamburger-menu')
hamburgerMenu.addEventListener('click', function() {
header.classList.toggle('menu-open');
})
/* Basic reset */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Custom properties */
:root {
--dark-color: #2d2c2c;
--purple-solid: #350a4f;
--purple-transparent: rgba(53, 10, 79, .7);
--purple-transparent-alt: rgba(53, 10, 79, .5);
--purple-light: #8f50fb;
--yellow-solid: #fa9e2c;
--gradient-color: linear-gradient(to right, var(--yellow-solid), var(--purple-light));
--gradient-color-alt: linear-gradient(to right, var(--purple-light), var(--yellow-solid));
}
/* Global styles */
html {
font-size: 10px;
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 1.6rem;
color: var(--dark-color);
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
section {
padding: 5rem 0;
}
/* Reusable styles */
.container {
width: 100%;
max-width: 120rem;
padding: 0 1.5rem;
margin: 0 auto;
}
/*
.header
.container
.nav
.logo
img
.hamburger-menu
i
.nav-list
.nav-item
.nav-link
*/
/* Header styles */
.header {
background-color: var(--purple-transparent);
width: 100%;
height: 6rem;
display: flex;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
/* Header styles - nav */
.nav {
display: flex;
align-items: center;
justify-content: space-between;
}
.hamburger-menu {
font-size: 2.6rem;
color: #fff;
cursor: pointer;
position: relative;
z-index: 1500;
}
.hamburger-menu .fa-times {
display: none;
}
.menu-open .nav-list {
opacity: 100%;
transform: scale(1);
transition: opacity .5s;
}
.menu-open .hamburger-menu .fa-times {
display: block;
}
.menu-open .hamburger-menu .fa-bars {
display: none;
}
.nav-list {
background-color: var(--purple-solid);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1400;
opacity: 0;
transform: scale(0);
transition: opacity .5s;
}
/*
.header
.container
.nav
.logo
img
.hamburger-menu
i
.nav-list
.nav-item
.nav-link
*/
.nav-item:not(last-child) {
margin-bottom: 4rem;
}
.nav-link {
display: block; /* allows us to use margin & paddings - by default they're inline elements and so no margin / padding */
color: #fff;
font-size: 3rem;
text-transform: uppercase;
letter-spacing: 2px;
cursor: pointer;
padding: 1rem;
}
<header class="header">
<div class="container">
<nav class="nav">
<div class="hamburger-menu">
<i class="fas fa-bars"></i>
<i class="fas fa-times"></i>
</div>
<ul class="nav-list">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Offers
</li>
<li class="nav-item">
News
</li>
<li class="nav-item">
Contact
</li>
</ul>
</nav>
</div>
</header>
Probably not the answer you wanted, but I hope it helps.
By removing the transform: scale(1); (and transform: scale(0);) the transition works smooth both ways. Was that transformation really needed?
Try with:
.menu-open .nav-list {
opacity: 100%;
transition: all .5s ease-in-out;
visibility: visible;
}
.nav-list {
background-color: var(--purple-solid);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1400;
opacity: 0;
transition: all .5s ease-in-out;
visibility: hidden;
}
Here's my problem:
I'm trying to animate a nav list (ul) and in my mind, I want to move it on click like that:
$('#top-nav-more').click(function() {
$('.hidden').toggleClass('hidden-click');
$(this).find('img').toggleClass('rotate');
});
/** Top Nav **/
#top-nav {
background: #e41a2e;
padding:0 !important;
display: inline-block;
/*height:40px;*/
}
.top-nav-wrapper{
max-width:1366px;
margin: 0 auto;
}
a.top-req-info{
position: absolute;
font-family: 'Daxline Light';
font-size: 0.80rem;
color: #FFF;
background: #cd1729;
padding: 10px 20px 11px 10px;
/* float: left; */
}
a.top-req-info:hover, #top-nav-book a:hover, .hidden a:hover {
text-decoration:none;
color: #821b31;
}
a.top-req-info:hover, #top-nav-book:hover {
background: #821b31;
color: white;
}
#top-nav-book:hover a {
color: white;
}
#top-nav-more a, #top-nav-no a, #top-nav-book a, .hidden a {
color: #FFF;
font-size: 0.80rem;
}
.rotate {
transform: rotate(180deg);
}
ul.top-nav-right{
list-style: none;
float: right;
display: inline;
margin: 7px 0;
}
ul.top-nav-right li{
display:inline;
padding: 8px 25px 8px;
}
li#top-nav-more{
background: #cd1729;
}
#top-nav-more img{
margin-right: 15px;
transition: 0.3s;
}
.hidden {
position: relative;
left: 321px;
display: none!important;
transition:all 1s linear;
}
.hidden-click {
transition:all 1s linear;
position: relative;
left: 0;
display: inline!important;
}
ul .hidden:first-child {
display: inline!important;
left: 0;
}
.search-bar input {
background-color: #821A31;
color: #ffff;
font-size: 35px;
border: 0;
margin: 0;
height: 76px;
width: 100%;
padding: 0 80px;
font-weight: 200;
display: none;
}
.search-bar input:focus, .search-bar input:focus{
outline: none;
}
.search-bar input.slide-down {
display: block;
}
.search-bar input::placeholder {
color: white;
}
.hover-bar {
background: #821A31!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Top Navigation -- Red bar -->
<div id="top-nav" class="container-fluid">
<div class="top-nav-wrapper">
<ul class="top-nav-right">
<li class="hidden">Health Care</li>
<li class="hidden">My Account</li>
<li class="hidden">Student Portal</li>
<li id="top-nav-more">More</li>
<li id="top-nav-no">Phone number</li>
<li id="top-nav-book">Book a Tour</li>
</ul>
</div>
</div>
Essentially, when you click more, the bar will change the position from some certain pixels to the left to 0 pixels on the left.
I added the transition effect to do it smoothly but for some reason, the effect happens right away. So technically it works but it doesn't work as I wish.
Something has to be wrong on my css transition. I read that it is possible to animate the position, so it is not a problem of position, it has to be something different. I've already use the property transition somewhere else in my code, so I have no clue of what is wrong, any idea?
This might get you close. I imagine there might be more to the animation you're looking for. It's hard to manipulate elements that are set to display none. Visibility: hidden and position: absolute is an equivalent you can manipulate:
/** Top Nav **/
#top-nav {
background: #e41a2e;
padding:0 !important;
display: inline-block;
/*height:40px;*/
}
.top-nav-wrapper{
max-width:1366px;
margin: 0 auto;
}
a.top-req-info{
position: absolute;
font-family: 'Daxline Light';
font-size: 0.80rem;
color: #FFF;
background: #cd1729;
padding: 10px 20px 11px 10px;
/* float: left; */
}
a.top-req-info:hover, #top-nav-book a:hover, .hidden a:hover {
text-decoration:none;
color: #821b31;
}
a.top-req-info:hover, #top-nav-book:hover {
background: #821b31;
color: white;
}
#top-nav-book:hover a {
color: white;
}
#top-nav-more a, #top-nav-no a, #top-nav-book a, .hidden a {
color: #FFF;
font-size: 0.80rem;
}
.rotate {
transform: rotate(180deg);
}
ul.top-nav-right{
list-style: none;
float: right;
display: inline;
margin: 7px 0;
}
ul.top-nav-right li{
display:inline;
padding: 8px 25px 8px;
}
li#top-nav-more{
background: #cd1729;
}
#top-nav-more img{
margin-right: 15px;
transition: 0.3s;
}
.hidden {
position: absolute;
left: 321px;
visibility: hidden;
transition:all 1s linear;
}
.hidden-click {
transition:all 1s linear;
position: relative;
left: 0;
visibility: visible;
}
ul .hidden:first-child {
display: inline!important;
left: 0;
}
.search-bar input {
background-color: #821A31;
color: #ffff;
font-size: 35px;
border: 0;
margin: 0;
height: 76px;
width: 100%;
padding: 0 80px;
font-weight: 200;
display: none;
}
.search-bar input:focus, .search-bar input:focus{
outline: none;
}
.search-bar input.slide-down {
display: block;
}
.search-bar input::placeholder {
color: white;
}
.hover-bar {
background: #821A31!important;
}
Working/semi-working example:
https://jsfiddle.net/qLpfynks/
I believe the reason is because you are switching from display:none to display: inline. CSS cannot transition display and so it will show the "transition" immediately.
To fix this and still achieve the desired effect change it to
.hidden {
position: relative;
left: 321px;
display: inline!important;
opacity:0; /*makes it invisible*/
transition:all 1s linear;
/*transition:left 1s linear*/
}
.hidden-click {
transition:all 1s linear;
/*transition:left 1s linear*/
position: relative;
left: 0;
opacity: 1; /*makes it visible*/
display: inline!important;
}
Note that if you use the specificier all for your transition you will see a fade in and out animation. If you don't want this, specify only left (see commented CSS code)
I have built a hamburger navigation that when clicked overlays the navigation elements on a full screen coloured background.
I have a couple of slight bugs which i cannot work out my mistake(s), or how to rectify them.
When you click the hamburger icon and the overlay is then displayed, if you then click anywhere on the background colour, the overlay closes. How can i keep the overlay visible unless a link or the close icon/button is clicked?
When you click a link, the overlay disappears (as expected) but then returns again after a split second. How can i stop this 'flashing' when clicked, so i can either keep the overlay showing until new page is loaded or hide the overlay once clicked.
$(document).ready(function() {
$(".menu-btn a").click(function() {
var scroll = $(window).scrollTop();
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
if ($(this).hasClass('btn-close')) {
$(".navbar").css("background-color", "grey");
} else if (scroll > 100) {
$(".navbar").css("background-color", "#CEB400");
}
});
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
$('.menu a').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
});
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 100) {
if ($('.overlay:visible').length == 0) {
$(".navbar").css("background-color", "#CEB400");
}
} else {
$(".navbar").css("background-color", "grey");
}
});
});
/* OPEN / CLOSE BTNS */
.menu-btn {
z-index: 999;
display: inline;
/* font-size: 32px; */
}
.menu-btn a {
display: flex;
text-decoration: none;
color: #ffffff;
/* safari hack */
align-items: center;
}
.btn-open:after {
color: inherit;
content: "\f394";
font-family: "Ionicons";
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
font-size: 40px;
}
.btn-open:hover:after {
color: inherit;
}
.btn-close:after {
color: inherit;
content: "\f2d7";
font-family: "Ionicons";
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
font-size: 40px;
}
.btn-close:hover:after {
color: #ffffff;
}
.template-home .btn-open:after,
.template-home .btn-open:hover:after,
.template-home .btn-close:after,
.template-home .btn-close:hover:after,
.template-home .menu-btn a span {
color: #ffffff!important;
}
/* OVERLAY */
.overlay {
position: fixed;
top: 0;
z-index: 99;
display: none;
overflow: auto;
width: 100%;
height: 100%;
background: rgba(209, 180, 0);
}
.overlay .menu {
margin: 150px 20px;
/* width: 80%; */
}
.overlay .menu ul {
margin: 0;
padding: 0;
width: 100%;
}
.overlay .menu ul li {
float: left;
padding: 6px 0 0 0;
width: 100%;
list-style: none;
text-align: left;
text-transform: uppercase;
}
.overlay .menu ul li#social {
width: 100%;
margin-top: 50px;
}
.overlay .menu ul li a {
color: #d1b400;
font-weight: 300;
font-size: 20px;
font-family: 'Old Standard TT', serif;
}
.overlay .menu ul li#social a {}
.overlay .menu ul ul {
margin-top: 20px;
}
.overlay .menu ul ul li {
position: relative;
float: none;
margin: 10px 0;
width: 100%;
border: 0;
}
.overlay .menu ul ul li a {
color: #fff;
text-transform: capitalize;
font-weight: 300;
font-size: 30px;
}
.overlay .menu ul ul li a:hover {
color: #000000;
}
/* RESPONSIVE */
#media screen and (max-width: 768px) {
.overlay .menu ul li {
float: none;
margin-bottom: 25px;
width: 100%;
}
.overlay .menu ul li:last-child {
border: 0;
}
.overlay .menu ul ul {
margin-top: 20px;
}
.menu-btn {
right: 25px;
}
}
.allexamples {
position: absolute;
bottom: 0;
font-size: 18px;
font-weight: bold;
width: 100%;
text-align: center;
background: #e9e9e9;
padding: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #333;
position: fixed;
}
.menu-social {
display: inline-block;
margin: 0 .4em;
}
.menu-social a {
width: 44px;
height: 44px;
padding: 0;
background-image: url("../img/cd-socials.svg");
background-repeat: no-repeat;
/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.menu-social .menu-facebook a {
background-position: 0 0;
}
.menu-social .menu-instagram a {
background-position: -44px 0;
}
.menu-social .menu-dribbble a {
background-position: -88px 0;
}
.menu-social .menu-twitter a {
background-position: -132px 0;
}
.overlay .menu ul ul li.description {
padding: 0px 0 10px 0px;
}
.overlay .menu ul ul li.description span {
color: #000000;
font-size: 13px;
font-weight: 300;
text-transform: none;
}
p.tel,
p.email {
margin: 0 0 3px 0;
}
p.tel a {
color: #fff!important;
font-weight: 300!important;
font-size: 20px!important;
letter-spacing: 1px;
}
p.email a {
color: #fff!important;
font-weight: 300!important;
font-size: 20px!important;
text-transform: none;
}
.menu-btn a span {
font-size: 16px;
color: #ffffff;
/* line-height: 18px; */
font-weight: 600;
position: relative;
/* top: -5px; */
right: 10px;
}
.navbar-text div {
display: inline-block;
color: #ffffff;
font-size: 16px;
font-weight: 600;
}
.header-contact svg {
margin-left: 10px;
font-size: 22px;
}
.header-contact {
margin-right: 75px;
}
.header-contact a {
color: #ffffff;
}
.header-contact {
font-weight: 600!important;
font-size: 16px!important;
}
.navbar {
-webkit-transition: background-color 500ms ease-in-out;
-ms-transition: background-color 500ms ease-in-out;
transition: background-color 500ms ease-in-out;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<header>
<nav class="navbar fixed-top" style="background-color: grey;">
<div class="container">
<a class="navbar-brand" href="#">
<img src="img/pb-white.png" width="30" height="30" alt="">
</a>
<span class="navbar-text">
<div class="menu-btn">
<a class="btn-open" href="javascript:void(0)"><span>MENU</span></a>
</div>
</span>
</div>
</nav>
</header>
<div class="overlay">
<div class="menu">
<div class="container">
<ul>
<li>
<ul>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
</ul>
</li>
<li>
<ul>
<li>Heading</li>
<li>Heading</li>
<li>Heading</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div style="height:2000px;"></div>
I currently have my work on a codepen here: https://codepen.io/whitinggg/pen/bLzxGG
To solve both your problems :
You need to remove the onClick event of your overlay, I.E. those lines :
$('.overlay').on('click', function () {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
This will stop triggering event when you click on overlay.
Your first issue is then fixed, and your second issue was that by clicking on a link, you also click on the overlay which contains the link, so the event was triggered twice, and your overlay fade out and in, creating the blink effect.
Just remove this line of code from the script
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
I want to add a fadeIn/Out effect on a toggle class when navigation is open and close. Somebody know how? I'm using the toggle class because of a responsive problem i had before when resizing part of the navigation disappeared.
FIDDLE example
nav ul.show {
display: block;
}
And for the javascript
$(function() {
$('.nav-btn').click(function(event) {
$('nav ul').toggleClass("show");
});
});
I prefer using css transitions these days over jquery animations. To me that appears more clear and easier to read, since logic and visualization are more separate. In the end the action is not the fading, but the change of state (or class in this case). The fading effect is a pure optic gimmick.
nav ul {
display: block;
opacity: 0;
transition: opacity 500ms;
}
nav ul.show {
opacity: 1;
}
Try this: Demo
// Show navigation //
$(function() {
$('.nav-btn').click(function(event) {
// alert();
if($('nav > ul').hasClass("show"))
{
// alert();
$('nav > ul').fadeOut(1000, function() {
$('nav > ul').removeClass('show');
});
} else {
//alert('no class');
$('nav > ul').fadeIn(1000, function() {
$('nav > ul').addClass('show');
});
}
});
});
/************************************************
Site Name:
Author:
************************************************/
html, body {
margin: 0;
padding: 0;
}
body {
font-family: helvetica, arial, sans-serif;
font-weight: normal;
font-size: 22px;
line-height: 26px;
color: #222;
overflow-y: scroll;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
:hover {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
strong, b {
font-weight: normal;
font-family: helvetica, arial, sans-serif;
}
h1 {
font-weight: bold;
font-size: 18px;
line-height: normal;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
margin: 0 0 25px 0;
}
h2 {
font-weight: normal;
font-size: 18px;
line-height: normal;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
margin: 0 0 0 0;
}
p {
margin: 0 0 25px 0;
}
p a {
color: #222;
text-decoration: underline;
}
p a:visited {
text-decoration: underline;
}
p a:hover {
text-decoration: none;
color: white;
background-color: #111;
}
.tag {
font-size: 14px;
text-transform: uppercase;
margin: 0 0 0 0;
}
/************************************************
Header - Navigation
************************************************/
header {
position: fixed;
width: 100%;
height: 60px;
top: 0;
left: 0;
padding: 0;
margin: 0;
z-index: 9999;
background-color: white;
}
/* Navigation */
.nav-btn {
display: none;
position: absolute;
left: 0;
top: 0;
height: 60px;
width: 60px;
z-index: 9999;
background: url(../elements/nav-icon.svg);
background-repeat: no-repeat;
background-position: center left;
background-color: red;
}
.nav-btn:hover {
background: url(../elements/nav-icon-hover.svg);
background-repeat: no-repeat;
background-position: center left;
background-color: blue;
}
nav {
margin: 0 40px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
background-color: transparent;
}
nav li {
position: relative;
float: left;
margin: 0;
padding: 0;
background-color: transparent;
}
nav a,
nav li a {
display: block;
font-size: 25px;
font-weight: bold;
color: #111;
line-height: 61px;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
text-decoration: none;
height: 60px;
padding: 0;
margin: 0 10px;
background-color: rgba(255,255,255,0.9);
}
nav a:hover,
nav li:hover a {
color: #aaa;
}
nav ul.show {
display: block;
}
/*nav li ul {
position: absolute;
float: left;
z-index: 1;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
nav li:hover ul {
opacity: 1;
visibility: visible;
}
nav li ul li {
float: none;
width: 100%;
}
nav li ul a:hover {
color: #aaa;
}*/
.col-nav,
.col-25 {
position: relative;
float: left;
width: 25%;
margin: 0;
}
/************************************************
Responsives
************************************************/
/*#media all and (min-width: 1601px) {
.col-25 {
width: 25%; }
}
#media all and (min-width: 1201px) and (max-width: 1600px) {
.col-25 {
width: 25%; }
}
#media all and (min-width: 1001px) and (max-width: 1200px) {
.col-25 {
width: 25%; }
}
#media all and (min-width: 0px) and (max-width: 400px) {
}
*/
#media all and (min-width: 1000px) {
.class_test{
display:block !important;
}
.home{
display:none;
}
}
#media all and (min-width: 801px) and (max-width: 1000px) {
.col-25 {
width: 33.33333%; }
}
#media all and (min-width: 601px) and (max-width: 800px) {
.col-25 {
width: 50%; }
}
#media all and (min-width: 0px) and (max-width: 600px) {
nav {
margin: 0 10px;
}
#container {
margin-left: 10px;
margin-right: 10px;
}
.col-25 {
width: 100%; }
}
#media all and (min-width: 0px) and (max-width: 1000px) {
nav ul {
display: none;
top: 60px;
}
/*nav:hover ul {
display: block;
}*/
.nav-btn {
display: block;
}
.home {
width: 220px;
margin: 0 auto;
}
.col-nav {
width: 100%; }
}
.nav ul {
transition: display .3s;
}
.nav ul.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
<nav>
<div class="col-nav">
Untitled
</div>
<ul class="class_test">
<li class="col-nav">Item1</li>
<li class="col-nav">Item2</li>
<li class="col-nav">Item3</li>
</ul>
</nav>
</header>
Use fadeToggle() method in jquery
you can refer the other methods also here
Hope this helps
try this.
http://jsfiddle.net/wz8vc0yo/12/
$(function() {
$('.nav-btn').click(function(event) {
$('nav ul').fadeToggle("slow");
});
});
jquery:
$(#divID).toggleClass('yourClass').fadeOut('slow');