I want a menu with a dropdown submenu with animation/transition, but not mobile. I used CSS to disable the animation/transition on the mobile version. When you click on the hamburger, all the menus show up with no animation/transition, but when you click to close the hamburger, the animation shows up, see the image
function mvFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "main-nav") {
x.className = " responsive";
} else {
x.className = "main-nav";
}
}
a:hover {
transition: color .5s;
}
header {
background-color: #000000;
width: 100%;
}
#header-wrap {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
padding-left: 50px;
padding-right: 50px;
padding-top: 35px;
align-self: flex-end;
}
#nav-wrap {
width: 100%;
max-width: 500px;
z-index: 100;
}
.icon-wrap {
display: flex;
align-items: center;
padding-right: 15px;
}
.header-icon {
width: 30px;
height: 30px;
stroke: currentColor;
stroke-width: 3px;
fill: none;
padding-left: 10px;
}
a .header-icon-outside {
text-decoration: none;
color: #333333;
position: relative;
top: 5px;
}
.header-icon-outside {
width: 30px;
height: 30px;
stroke: currentColor;
stroke-width: 3px;
fill: none;
align-items: center;
padding-right: 50px;
}
#myTopnav {
float: right;
padding-top: 75px;
padding-bottom: 0;
}
.main-nav {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000000;
}
.main-nav a {
float: left;
display: block;
color: #DBAC34;
font-family: sans-serif;
font-style: normal;
font-size: 1.1em;
text-align: center;
padding: 20px 16px;
text-decoration: none;
}
.main-nav .dropdown {
float: left;
overflow: hidden;
z-index: 0;
}
.main-nav .dropbtn {
color: #DBAC34;
text-decoration: none;
border: none;
outline: none;
padding: 17px 12px;
background-color: inherit;
font-family: sans-serif;
font-style: normal;
font-size: 1.1em;
text-align: center;
margin: 0;
z-index: -1;
}
.main-nav .dropdown-content {
visibility: hidden;
position: absolute;
min-width: 145px;
background-color: #000000;
padding-bottom: 25px;
transform: translateY(-100px);
opacity: 0;
transition: all .5s ease;
margin: 0;
padding: 0;
z-index: -1;
}
.main-nav .dropdown-content a {
float: none;
color: #DBAC34;
text-decoration: none;
text-align: left;
padding: 25px 15px;
display: block;
}
.main-nav a:hover,
.dropdown:hover .dropbtn {
color: #ffffff;
}
.main-nav .icon {
display: none;
}
.main-nav .dropdown-content hr {
height: 1px;
border-width: 0;
background-color: #DBAC34;
margin: 0px 15px;
}
.main-nav .dropdown:hover .dropdown-content {
visibility: visible;
transform: translateY(0%);
opacity: 1;
transition-delay: 0.0s;
}
.bar1,
.bar2,
.bar3 {
width: 25px;
height: 3px;
background-color: #DBAC34;
margin: 6px 0;
transition: 0.4s;
}
@media screen and (max-width: 600px) {
.main-nav a,
.dropdown .dropbtn {
display: none;
}
.main-nav a.icon {
float: right;
display: block;
}
.main-nav.responsive {
position: relative;
background-color: #000000;
width: 100%;
}
.main-nav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.main-nav.responsive a {
float: none;
display: block;
text-align: left;
font-size: 18px;
}
.main-nav.responsive .dropdown {
float: none;
}
.main-nav.responsive .dropdown-content {
position: relative;
transition-property: none;
transform: none;
transition: none;
z-index: 200;
opacity: 1;
visibility: visible;
padding-left: 10px;
}
.main-nav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="page-wrap">
<header>
<div id="header-wrap">
<div id="nav-wrap">
<nav class="main-nav" id="myTopnav">
<a href="#!"> Page 1 </a>
<div class="dropdown">
<button class="dropbtn"> Page 2</button>
<div class="dropdown-content">
<a href="#!">sub 1</a>
<hr />
<a href="#!">sub 2</a>
<hr />
<a href="#!l">sub 3</a>
</div>
</div>
<a href="#!"> Page 3 </a>
<a href="javascript:void(0);" class="icon" onclick="mvFunction()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</a>
</nav>
</div>
</div>
</header>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
version. When you click on the hamburger, all the menus show up with no animation/transition, but when you click to close the hamburger, the animation shows up, see the imageenter image description here
CodePudding user response:
This line is causing the issue
.main-nav .dropdown-content {
transition: all .5s ease;
}
yes you have written CSS to disable this transition, but there is a .resposive
class, when you click on the hamburger this .responsive
class gets removed, so the below code is useless
.main-nav.responsive .dropdown-content {
transition : none
}
to fix this write CSS without this.responsiv
e selector like
.main-nav .dropdown-content {
transition : none
}