Click the flower to open menu. Then i have created the motion i want with "prosess" fading in after the menu opens up. But i want to reverse the motion when collapsing. So that "prosess" fades out before the meny toggles back. Anyone that can help me out with this?
function classOpen() {
var spinn = document.getElementById("nav");
spinn.classList.toggle('in');
spinn.classList.toggle('out');
}
const delay = ms => new Promise(res => setTimeout(res, ms));
const classFadeIn = async () => {
var element1 = document.getElementById("text1");
var element2 = document.getElementById("text2");
var element3 = document.getElementById("text3");
await delay(300);
element1.classList.toggle("show");
element2.classList.toggle("show");
element3.classList.toggle("show");
}
document.querySelector('#nav').addEventListener('click', classFadeIn);
:root{
--seconds: 5s;
--fast: 2s;
}
nav{
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10px;
padding-top: 20px;
width: 100%;
}
nav img{
width: 50px;
}
/* INN OUT */
#nav{
height: auto;
display: flex;
align-items: center;
justify-content: flex-start;
border-radius: 50px;
padding: 10px;
background-color: white;
margin-right: 20px;
/*drop shadow*/
-webkit-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
-moz-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
}
.in {
width: 50px;
}
.out {
width: 400px;
}
.transition{
-webkit-transition: all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out
-o-transition:all 0.2s ease-in-out;
transition::all 0.2s ease-in-out;
}
#navtext{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.style{
display: flex;
background-color: white;
justify-content: center;
align-items: center;
padding: 10px 15px 10px 15px;
border-radius: 40px;
color: lightgrey;
transition: 0.1s;
}
#text{
display: none;
}
.noshow{
display: none;
}
.show{
display: flex;
}
.show:hover{
color: black;
background-color: lightgrey
}
<nav>
<div id="nav" class="in transition">
<img id="spinn" src="https://i.dlpng.com/static/png/762080_preview_preview.png" class="rotating spinn" onclick="classOpen()">
<div id="navtext">
<a id="text1" class="noshow style">Prosess</a>
<a id="text2" class="noshow style">Prosess</a>
<a id="text3" class="noshow style">Prosess</a>
</div>
</div>
</nav>
I have deleted the part for showing/hiding the items from Javascript and kept in/out toggle.
Then, depending on in/out classes I will show/hide the items by CSS:
.transition.in .noshow{
visibility: hidden;
opacity: 0;
height:0;
}
.transition.out .noshow{
visibility: visible;
opacity: 1;
height:auto;
transition: 0.7s;
}
The reason for not using display: none || flex is to keep the effect of transitoin.
Here is the full code:
function classOpen() {
var spinn = document.getElementById("nav");
spinn.classList.toggle('in');
spinn.classList.toggle('out');
}
document.querySelector('#nav').addEventListener('click', null);
:root{
--seconds: 5s;
--fast: 2s;
}
nav{
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10px;
padding-top: 20px;
width: 100%;
}
nav img{
width: 50px;
}
/* INN OUT */
#nav{
height: auto;
display: flex;
align-items: center;
justify-content: flex-start;
border-radius: 50px;
padding: 10px;
background-color: white;
margin-right: 20px;
/*drop shadow*/
-webkit-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
-moz-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
}
.in {
width: 50px;
}
.out {
width: 400px;
}
.transition{
-webkit-transition: all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out
-o-transition:all 0.2s ease-in-out;
transition::all 0.2s ease-in-out;
}
#navtext{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.style{
display: flex;
background-color: white;
justify-content: center;
align-items: center;
padding: 10px 15px 10px 15px;
border-radius: 40px;
color: lightgrey;
transition: 0.1s;
}
#text{
display: none;
}
.transition.in .noshow{
visibility: hidden;
opacity: 0;
height:0;
}
.transition.out .noshow{
visibility: visible;
opacity: 1;
height:auto;
transition: 0.7s;
}
.noshow:hover{
color: black;
background-color: lightgrey
}
<nav>
<div id="nav" class="in transition">
<img id="spinn" src="https://i.dlpng.com/static/png/762080_preview_preview.png" class="rotating spinn" onclick="classOpen()">
<div id="navtext">
<a id="text1" class="noshow style">Prosess</a>
<a id="text2" class="noshow style">Prosess</a>
<a id="text3" class="noshow style">Prosess</a>
</div>
</div>
</nav>
Use only one "is-active" class-name on the #nav element, toggle it using JS and target descendants using CSS.
Use transition-delay CSS property to smartly inverse the transition timing login on toggle:
const nav = document.querySelector("#nav");
nav.addEventListener("click", () => nav.classList.toggle("is-active"));
nav {
position: fixed;
top: 10px;
left: 10px;
z-index: 100;
}
#navImg {
width: 50px;
cursor: pointer;
display: inline-block;
transition: transform 0.6s ease-in-out;
}
#nav {
display: flex;
padding: 10px;
border-radius: 50px;
background-color: white;
box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.10);
}
#navText {
display: flex;
flex-flow: row nowrap;
width: 0;
transition: 0.3s ease-in-out 0.3s;
overflow: hidden;
}
#navText a {
display: inline-flex;
align-self: center;
padding: 10px 15px 10px 15px;
margin-left: 10px;
border-radius: 40px;
color: #aaa;
text-decoration: none;
opacity: 0;
transition: opacity 0.3s ease-in-out 0s;
}
/* ACTIVE STATE */
#nav.is-active #navText {
transition-delay: 0s; /* reverse delay timing logic */
width: 270px; /* this could be calculated using JS... this is for demo only */
}
#nav.is-active #navText a {
transition-delay: 0.3s; /* reverse delay timing logic */
opacity: 1;
}
#nav.is-active #navImg {
transform: rotate(1turn);
}
<nav>
<div id="nav">
<img id="navImg" src="https://i.dlpng.com/static/png/762080_preview_preview.png">
<div id="navText">
Prosess
Prosess
Prosess
</div>
</div>
</nav>
Related
I'm very new to coding and have been following tutorials to learn coding. I have very successfully created a hamburger menu after following a tutorial and I'm totally chuffed!
My happiness soon faded away when I realised that the mobile menu doesn't disappear if I forget to click the X and expand the screen. The Menu remains. I have attached the Code and HTML and CSS. Please can someone help me write the correct code to make it disappear?
I have tried to do this with CSS by adding 'display: none' to the mobile_menu and mobile_menu bottom' ... and also tried moving it with the transitionX(100%) but to no luck.
So I'm guessing this a JS related issue which I have 0 knowledge at the moment.
sadly I can't post images because I don't have 10 reputations. sad. so I'll try and paste it here.
hamburger
<div>
<button type="button" class="hamburger" id="menu-btn" >
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</button>
</div>
<div class="mobile-menu hidden" id="menu">
<ul>
<li>worship and music</li>
<li>visit us</li>
<li>support us</li>
</ul>
<div class="mobile-menu-bottom">
<button class="btn donate">donate</button>
<a href="#"><img src="images/pin.png" alt="locator">
<span>locate us</span></a>
</div>
</div>
</div>
CSS Code:
.navbar{
width: 100%;
height: auto;
background-color: #F6F6F4;
padding:20px;
box-shadow: 0 1px 3px rgb(0 0 0 / 10%),
0 2px 2px rgb(0 0 0 / 6%),
0 0 2px rgb(0 0 0 / 7%);
}
.navbar-container{
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar ul {
display: flex;
align-items: center;
}
.navbar li {
margin: 0 20px;
}
.navbar-brand img{
width: 320px;
height:113px;
margin: auto 0;
margin-left: 25px;
}
.navbar-nav-left{
text-transform: uppercase;
font-size: .9rem;
}
.navbar-nav-right img
{
height: 20px;
width: 20px;
margin-right: 20px;
}
.navbar-nav-right li:first-child a
{
display: flex;
align-items: center;
}
.btn {
cursor: pointer;
display: inline-block;
background: none;
border: 1px #000 solid;
border-radius: 50px;
padding: 7px 16px;
line-height: 1.2;
text-align: center;
text-decoration: none;
}
.donate {
background-color: var(--Purple);
border: none;
font-size: 1rem;
}
.donate:hover {
background-color:white;
font-size: 1rem;
color: #000000;}
.donate_button{
color: white;
}
.hamburger {
cursor: pointer;
width: 24px;
height: 24px;
position: relative;
background: none;
border: none;
z-index: 10;
transition: all 0.25s;
padding: 0 25px;
display: none;
}
.top, .middle, .bottom {
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 2px;
background: #000000;
transform: rotate(0);
transition: all 0.5s;
}
.middle {
transform: translateY(7px);
}
.bottom {
transform: translateY(14px);
}
.open .top {
transform: rotate(45deg) translateY(6px) translateX(6px);
}
.open .middle {
opacity: 0;
}
.open .bottom {
transform: rotate(-45deg) translateY(6px) translateX(-6px);
}
mobile menu
.mobile-menu {
position: fixed;
background-color:#abc09f;
top: 161px;
right:0;
width: 90%;
height: 100%;
padding: 30px;
box-shadow: inset 0 4px 3px -3px rgb(0 0 0 /10%),
inset 0 4px 2px -2px rgb(0 0 0 /7%);
transition: all 0.3s;}
.mobile-menu div a {
display: flex;
align-items: center;
font-size:1rem;
}
.hidden {
transform: translateX(100%);
}
.no-scroll {
overflow: hidden;
}
#media(max-width: 768px){
.hamburger {
display: block;
}
.navbar-brand img{
width: 220px;
height:113px;
margin: auto 0;
margin-left: 25px;
}
.navbar .navbar-nav-left,
.navbar .navbar-nav-right{
display: none;
}
}
#media(max-width:1080px){
.hamburger {
display: block;
}
.navbar .navbar-nav-left,
.navbar .navbar-nav-right{
display: none;}
}
JS SCRIPT
const btn = document.getElementById('menu-btn')
const nav = document.getElementById('menu')
function navToggle() {
btn.classList.toggle('open')
nav.classList.toggle('hidden')
document.body.classList.toggle('no-scroll')
}
btn.addEventListener('click', navToggle)
The problem is in the mobile menu CSS section. You have to add translateX(100%) to mobile-menu to hide the mobile menu on a bigger screen by default.
For the smaller screen change it to translateX(0%) so that it shows the menu when the 'hidden' class is not active.
And move the .hidden{translateX(100%)} to the 1080px media query as it is not needed for the bigger screen. The changes are wrapped inside the comments.
const btn = document.getElementById('menu-btn')
const nav = document.getElementById('menu')
function navToggle() {
btn.classList.toggle('open')
nav.classList.toggle('hidden')
document.body.classList.toggle('no-scroll')
}
btn.addEventListener('click', navToggle)
.navbar{
width: 100%;
height: auto;
background-color: #F6F6F4;
padding:20px;
box-shadow: 0 1px 3px rgb(0 0 0 / 10%),
0 2px 2px rgb(0 0 0 / 6%),
0 0 2px rgb(0 0 0 / 7%);
}
.navbar-container{
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar ul {
display: flex;
align-items: center;
}
.navbar li {
margin: 0 20px;
}
.navbar-brand img{
width: 320px;
height:113px;
margin: auto 0;
margin-left: 25px;
}
.navbar-nav-left{
text-transform: uppercase;
font-size: .9rem;
}
.navbar-nav-right img{
height: 20px;
width: 20px;
margin-right: 20px;
}
.navbar-nav-right li:first-child a {
display: flex;
align-items: center;
}
.btn {
cursor: pointer;
display: inline-block;
background: none;
border: 1px #000 solid;
border-radius: 50px;
padding: 7px 16px;
line-height: 1.2;
text-align: center;
text-decoration: none;
}
.donate {
background-color: var(--Purple);
border: none;
font-size: 1rem;
}
.donate:hover {
background-color:white;
font-size: 1rem;
color: #000000;
}
.donate_button{
color: white;
}
.hamburger {
cursor: pointer;
width: 24px;
height: 24px;
position: relative;
background: none;
border: none;
z-index: 10;
transition: all 0.25s;
padding: 0 25px;
display: none;
}
.top, .middle, .bottom {
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 2px;
background: #000000;
transform: rotate(0);
transition: all 0.5s;
}
.middle {
transform: translateY(7px);
}
.bottom {
transform: translateY(14px);
}
.open .top {
transform: rotate(45deg) translateY(6px) translateX(6px);
}
.open .middle {
opacity: 0;
}
.open .bottom {
transform: rotate(-45deg) translateY(6px) translateX(-6px);
}
.mobile-menu {
position: fixed;
background-color:#abc09f;
top: 161px;
right:0;
width: 90%;
height: 100%;
padding: 30px;
box-shadow: inset 0 4px 3px -3px rgb(0 0 0 /10%), inset 0 4px 2px -2px rgb(0 0 0 /7%);
transition: all 0.3s;
/* ------------------Change here---------------*/
transform: translateX(100%); /* add translateX(100%) to hide the menu in bigger screen by default */
/* ------------------Change here---------------*/
}
.mobile-menu-bottom .nav__img{
max-width: 10px;
height: 10px;
}
.mobile-menu div a {
display: flex;
align-items: center;
font-size:1rem;
}
.no-scroll {
overflow: hidden;
}
#media(max-width: 768px){
.hamburger {
display: block;
}
.navbar-brand img{
width: 220px;
height:113px;
margin: auto 0;
margin-left: 25px;
}
.navbar .navbar-nav-left,
.navbar .navbar-nav-right{
display: none;
}
}
#media(max-width:1080px){
.hamburger {
display: block;
}
.navbar .navbar-nav-left,
.navbar .navbar-nav-right{
display: none;
}
/* ------------------Change here---------------*/
.mobile-menu{
transform: translateX(0%); /* Here mobile-menu will be shown if hidden class is not active */
}
.hidden {
transform: translateX(100%); /* And the menu will hide again if the hidden class is active*/
}
/* ------------------Change here---------------*/
}
<div>
<button type="button" class="hamburger" id="menu-btn" aria-label="hamburger">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</button>
</div>
<div class="mobile-menu hidden" id="menu">
<ul>
<li>worship and music</li>
<li>visit us</li>
<li>support us</li>
</ul>
<div class="mobile-menu-bottom">
<button class="btn donate">donate</button>
<a href="#"><img class="nav__img" src="https://img.freepik.com/premium-vector/location-icon-simple-symbol-red-pin-sign_399998-369.jpg?w=2000" alt="locator">
<span>locate us</span></a>
</div>
</div>
I'm trying to make an animated menu, I would like to do it with CSS, but if not possible also javascript or Jquery.
.nav {
text-align: right;
height: 100%;
width: 17%;
position: absolute;
box-shadow: -1px 4px 28px 0px rgba(0, 0, 0, 0.75);
background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%);
}
.menu {
margin: 0;
width: 100%;
height: 95%;
text-align: left;
overflow: auto;
background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%);
}
.menu a {
font-family: Georgia, "Times New Roman", serif;
text-shadow: 2px 2px 5px black;
line-height: 26px;
padding: 5px;
border-left: 4px solid;
margin: 0 0 0 0;
margin-top: 5%;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .1s;
transition: all .1s;
cursor: pointer;
white-space: nowrap;
display: -webkit-box;
-webkit-box-align: center;
align-items: center;
color: white;
}
/**** */
a:hover {
border-left: 5px solid #b93632;
color: #b93632;
}
span:hover {
color: yellow;
}
/**** */
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
}
#toggle {
display: none;
}
#media screen and (max-width:800px),
screen and (max-height: 500px) {
.nav {
text-align: right;
height: 70px;
width: 100%;
line-height: 70px;
position: relative;
z-index: 1;
}
.menu {
text-align: center;
width: 100%;
display: none;
overflow: auto;
}
#toggle:checked+.menu {
display: block;
height: 400px;
}
}
<div class="nav">
<label for="toggle"><i class="fas fa-users"></i></label>
<input type="checkbox" id="toggle" />
<div class="menu" id="users">
<center><span>Utenti online: </span><span id="n_utenti"> 0</span></center>
<input type="text" id="cerca_utenti" onkeyup="Cerca()" placeholder="Cerca un utente">
<ul id="utenti_lista">
</ul>
</div>
</div>
I just can't get it to become animated, this is how it works, but it doesn't have ANIMATIONS, it has no transitions, how to do it?
I changed now, because CSS was not well understood. there is both the media quieres and the regular menu.
You can refer to the mdn documentation on css animation at https://developer.mozilla.org/en-US/docs/Web/CSS/transition.
In your case you cannot apply animation to display property, however you can add a animation to opacity, which practically looks like a fade-in/out animation.
This is the fiddle https://jsfiddle.net/e90dL586/ I've updated with opacity for you.
#toggle + .menu {
text-align: center;
width: 100%;
opacity: 0;
overflow: auto;
}
#toggle:checked + .menu {
opacity: 1;
transition: opacity 1s;
height:400px;
}
For more effects, refer the mdn docs.
I have a box that scales to 1.1x when hovered, but because the text becomes blurry, I used filter: blur(0) and that solved the issue (only to FireFox) . By using filter: blur(0) on the parent, the box-shadow property on the children elements stopped working.
I tried using a before and after pseudo-element but that didn't work either. Is there anything I can do to fix my issue?
function myFunction(e) {
if (e.style.transform === "rotateY(180deg)") e.style.transform = "rotateY(0)";
else e.style.transform = "rotateY(180deg)";
}
body{background:mistyrose; padding: 50px;}
.r_card {
height: 250px;
width: 250px;
perspective: 500px;
transition: transform 0.25s;
filter: blur(0);
}
.r_card:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.r_card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: all .2s ease-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.r_card-inner .r_card-header h3 {
font-size: 26px;
}
.r_card-inner .r_card-header p {
margin: 13px 0;
}
.r_card-inner .r_card-description {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.r_card-inner .r_card-description p {
margin: 15px 0;
}
.r_card:hover .r_card-inner {
box-shadow: 2px 2px 1px -3px black;
}
.r_card-front,
.r_card-back {
background: #ffffff;
text-align: center;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
padding: 10px 30px 30px;
border-bottom: 5px solid #E66343;
}
.r_card-front {
color: black;
transform: rotateY(0deg);
}
.r_card-front .r_card-links {
display: flex;
justify-content: space-around;
margin-top: 5px;
font-weight: 600;
font-size: 15px;
}
.r_card-front .r_card-links a {
cursor: pointer;
padding: 6px 10px;
color: #ffffff;
border-radius: 2px;
background: #E66343;
}
.r_card-back {
transform: rotateY(180deg);
}
.r_card3 {
display: grid;
grid-template: repeat(3, 1fr)/auto;
}
<div class="r_card">
<div class="r_card-inner" onclick="myFunction(this)" style="transform: rotateY(0deg);">
<div class="r_card-front r_card3">
<div class="r_card-header">
<h3>Standard</h3>
<p>Standard</p>
</div>
<div class="r_card-image"><img src="#">></div>
<div class="r_card-description">
<p>P Tag</p>
<div class="r_card-links">
More Info<br>
More Info
</div>
</div>
</div>
<div class="r_card-back">
<h1>Peter</h1>
<p>Art.</p>
<p>Ext</p>
</div>
</div>
</div>
Weirdly enough, the code is not the same as what I have but the code is similar. From this result, they are issues I faced while modifying the card like the position of the card when flipping, the text still being blurry, and the drop shadow not appearing.
Thank you.
Chavez
Add
filter: drop-shadow(1px 10px 4px #696982);
to your card. This way you can have both the blur and the shadow around your element.
function myFunction(e) {
if (e.style.transform === "rotateY(180deg)") e.style.transform = "rotateY(0)";
else e.style.transform = "rotateY(180deg)";
}
body{background:mistyrose; padding: 50px;}
.r_card {
height: 250px;
width: 250px;
perspective: 500px;
transition: transform 0.25s;
filter: blur(0);
}
.r_card:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.r_card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: all .2s ease-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.r_card-inner .r_card-header h3 {
font-size: 26px;
}
.r_card-inner .r_card-header p {
margin: 13px 0;
}
.r_card-inner .r_card-description {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.r_card-inner .r_card-description p {
margin: 15px 0;
}
.r_card:hover .r_card-inner {
box-shadow: 2px 2px 1px -3px black;
}
.r_card-front,
.r_card-back {
background: #ffffff;
text-align: center;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
padding: 10px 30px 30px;
border-bottom: 5px solid #E66343;
}
.r_card-front {
color: black;
transform: rotateY(0deg);
filter: drop-shadow(1px 10px 4px #696982);
}
.r_card-front .r_card-links {
display: flex;
justify-content: space-around;
margin-top: 5px;
font-weight: 600;
font-size: 15px;
}
.r_card-front .r_card-links a {
cursor: pointer;
padding: 6px 10px;
color: #ffffff;
border-radius: 2px;
background: #E66343;
}
.r_card-back {
transform: rotateY(180deg);
}
.r_card3 {
display: grid;
grid-template: repeat(3, 1fr)/auto;
}
<div class="r_card">
<div class="r_card-inner" onclick="myFunction(this)" style="transform: rotateY(0deg);">
<div class="r_card-front r_card3">
<div class="r_card-header">
<h3>Standard</h3>
<p>Standard</p>
</div>
<div class="r_card-image"><img src="#">></div>
<div class="r_card-description">
<p>P Tag</p>
<div class="r_card-links">
More Info<br>
More Info
</div>
</div>
</div>
<div class="r_card-back">
<h1>Peter</h1>
<p>Art.</p>
<p>Ext</p>
</div>
</div>
</div>
The code I wrote now has a title with 1 attached, a title with 2 attached, and a comment with 2 attached at any time I press the button.
I don't know how to correct it because I'm writing it after looking at an example.
Among the codes written, there is data-id. The reason why I used this is because I asked another question and tried to graft the code that someone else gave me, but I couldn't do it and couldn't delete it when I posted it on the stackoverflow.
I want to keep as few code as possible.
function dialog() {
var dialogBox = $('.dialog'),
dialogTrigger = $('.dialog__trigger'),
dialogClose = $('.dialog__close'),
dialogTitle = $('.dialog__title'),
dialogContent = $('.dialog__content');
dialogTrigger.on('click', function(e) {
dialogBox.toggleClass('dialog--active');
e.stopPropagation();
var id = $(this).data('id');
});
dialogClose.on('click', function() {
dialogBox.removeClass('dialog--active');
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
dialogBox.removeClass('dialog--active');
}
});
$(document).on('click', function(e) {
if (
$(e.target).is(dialogBox) === false &&
$(e.target).is(dialogTitle) === false &&
$(e.target).is(dialogContent) === false
) {
dialogBox.removeClass('dialog--active');
}
});
}
$(function() {
dialog();
});
* {
box-sizing: border-box;
}
body {
background: #f1f1f1;
color: #333333;
font-family: 'Cairo', sans-serif;
font-size: 16px;
height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.dialog__trigger,
.dialog__action {
border: 3px solid #333333;
background: #f1f1f1;
padding: 15px 20px;
font-size: 1.1rem;
text-transform: uppercase;
display: block;
-webkit-transition: all 150ms ease-out;
transition: all 150ms ease-out;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.dialog__trigger:hover,
.dialog__action:hover {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
-webkit-transition: all 100ms ease-in;
transition: all 100ms ease-in;
box-shadow: 0 5px 10px rgba(51, 51, 51, 0.4);
}
.dialog__trigger:focus,
.dialog__action:focus {
outline: 0;
}
.dialog__trigger:active,
.dialog__action:active {
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}
.dialog {
background: #f1f1f1;
width: 70%;
position: absolute;
left: calc(50% - 35%);
top: 0;
padding: 30px;
box-shadow: 0 10px 30px rgba(51, 51, 51, 0.4);
border: 3px solid #333333;
visibility: hidden;
opacity: 0;
-webkit-transition: all 180ms ease-in;
transition: all 180ms ease-in;
}
#media (max-width: 600px) {
.dialog {
width: 90%;
left: calc(50% - 45%);
}
}
.dialog .dialog--active {
top: 10%;
visibility: visible;
opacity: 1;
-webkit-transition: all 250ms ease-out;
transition: all 250ms ease-out;
}
.dialog .dialog__close {
font-size: 2rem;
line-height: 2rem;
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
padding: 15px;
-webkit-transition: color 150ms ease;
transition: color 150ms ease;
}
.dialog .dialog__close:hover {
color: #E74C3C;
}
.dialog .dialog__title {
font-size: 2rem;
font-family: 'Slabo 27px', serif;
font-weight: 100;
margin: 0;
padding: 0 0 15px 0;
border-bottom: 2px solid #333333;
}
.dialog .dialog__content {
font-size: 1.1rem;
line-height: 2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="dialog__trigger" data-id="#dialog1">OPEN1</button>
<div class="dialog" id="dialog1" title="Dialog Title">
<span class="dialog__close">x</span>
<h2 class="dialog__title">TITLE1</h2>
<p class="dialog__content">CONTENT1</p>
</div>
<button class="dialog__trigger" data-id="#dialog2">OPEN2</button>
<div class="dialog" id="dialog2" title="Dialog Title">
<span class="dialog__close">x</span>
<h2 class="dialog__title">TITLE2</h2>
<p class="dialog__content">CONTENT2</p>
</div>
The first reason your code wasn't working because of a problem in a CSS rule: .dialog .dialog--active {} won't match the element you want it to, because both classnames are on the same DOM element; instead this should be .dialog.dialog--active {} (no space).
But this triggers both dialogs from both buttons; so you also need a javascript change to identify the specific elements for each button. You could use specific IDs and a different function for each button, or you could use the elements' relative position in the document:
$(this).next('.dialog').addClass('dialog--active');
Both fixes are shown below:
function dialog() {
var dialogBox = $('.dialog'),
dialogTrigger = $('.dialog__trigger'),
dialogClose = $('.dialog__close'),
dialogTitle = $('.dialog__title'),
dialogContent = $('.dialog__content');
dialogTrigger.on('click', function(e) {
$(this).next('.dialog').addClass('dialog--active');
e.stopPropagation();
var id = $(this).data('id');
});
dialogClose.on('click', function() {
dialogBox.removeClass('dialog--active');
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
dialogBox.removeClass('dialog--active');
}
});
$(document).on('click', function(e) {
if (
$(e.target).is(dialogBox) === false &&
$(e.target).is(dialogTitle) === false &&
$(e.target).is(dialogContent) === false
) {
dialogBox.removeClass('dialog--active');
}
});
}
$(function() {
dialog();
});
* {
box-sizing: border-box;
}
body {
background: #f1f1f1;
color: #333333;
font-family: 'Cairo', sans-serif;
font-size: 16px;
height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.dialog__trigger,
.dialog__action {
border: 3px solid #333333;
background: #f1f1f1;
padding: 15px 20px;
font-size: 1.1rem;
text-transform: uppercase;
display: block;
-webkit-transition: all 150ms ease-out;
transition: all 150ms ease-out;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.dialog__trigger:hover,
.dialog__action:hover {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
-webkit-transition: all 100ms ease-in;
transition: all 100ms ease-in;
box-shadow: 0 5px 10px rgba(51, 51, 51, 0.4);
}
.dialog__trigger:focus,
.dialog__action:focus {
outline: 0;
}
.dialog__trigger:active,
.dialog__action:active {
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}
.dialog {
background: #f1f1f1;
width: 70%;
position: absolute;
left: calc(50% - 35%);
top: 0;
padding: 30px;
box-shadow: 0 10px 30px rgba(51, 51, 51, 0.4);
border: 3px solid #333333;
visibility: hidden;
opacity: 0;
-webkit-transition: all 180ms ease-in;
transition: all 180ms ease-in;
}
#media (max-width: 600px) {
.dialog {
width: 90%;
left: calc(50% - 45%);
}
}
.dialog.dialog--active {
top: 10%;
visibility: visible;
opacity: 1;
-webkit-transition: all 250ms ease-out;
transition: all 250ms ease-out;
}
.dialog .dialog__close {
font-size: 2rem;
line-height: 2rem;
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
padding: 15px;
-webkit-transition: color 150ms ease;
transition: color 150ms ease;
}
.dialog .dialog__close:hover {
color: #E74C3C;
}
.dialog .dialog__title {
font-size: 2rem;
font-family: 'Slabo 27px', serif;
font-weight: 100;
margin: 0;
padding: 0 0 15px 0;
border-bottom: 2px solid #333333;
}
.dialog .dialog__content {
font-size: 1.1rem;
line-height: 2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="dialog__trigger">OPEN1</button>
<div class="dialog" title="Dialog Title">
<span class="dialog__close">x</span>
<h2 class="dialog__title">TITLE1</h2>
<p class="dialog__content">CONTENT1</p>
</div>
<button class="dialog__trigger">OPEN2</button>
<div class="dialog" title="Dialog Title">
<span class="dialog__close">x</span>
<h2 class="dialog__title">TITLE2</h2>
<p class="dialog__content">CONTENT2</p>
</div>
But I would suggest a lot of other changes. Your code includes some obsolete CSS rules, follows some bad practices (it's not a great idea to handle every event from the document node for example) and is just generally very overcomplicated.
Here's a cleaner example:
$('.dialog__trigger').on('click', function() {
// Add the 'active' class to the next dialog element.
// (You could also just use .show() here)
$(this).next('.dialog').addClass('dialog--active');
});
$('body, .dialog__close').on('click', function() {
// remove the 'active' class from any element, when either the
// body or a close button is clicked.
$('.dialog--active').removeClass('dialog--active');
});
$('#container').on('click', function(e) {
// prevent click events bubbling up to the body
e.stopPropagation();
});
$(document).keyup(function(e) {
// handle the escape key
if (e.keyCode === 27) {
$('.dialog--active').removeClass('dialog--active');
}
});
* {
box-sizing: border-box;
}
body {
background: #f1f1f1;
color: #333333;
font-family: 'Cairo', sans-serif;
font-size: 16px;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.dialog__trigger,
.dialog__action {
border: 3px solid #333333;
background: #f1f1f1;
padding: 15px 20px;
font-size: 1.1rem;
text-transform: uppercase;
display: block;
transition: all 150ms ease-out;
transform: translateY(0px);
}
.dialog__trigger:hover,
.dialog__action:hover {
transform: translateY(-5px);
transition: all 100ms ease-in;
box-shadow: 0 5px 10px rgba(51, 51, 51, 0.4);
}
.dialog__trigger:focus,
.dialog__action:focus {
outline: 0;
}
.dialog__trigger:active,
.dialog__action:active {
transform: translateY(-3px);
}
.dialog {
background: #f1f1f1;
width: 70%;
position: absolute;
left: calc(50% - 35%);
top: 0;
padding: 30px;
box-shadow: 0 10px 30px rgba(51, 51, 51, 0.4);
border: 3px solid #333333;
visibility: hidden;
opacity: 0;
transition: all 180ms ease-in;
}
#media (max-width: 600px) {
.dialog {
width: 90%;
left: calc(50% - 45%);
}
}
.dialog.dialog--active {
top: 10%;
visibility: visible;
opacity: 1;
transition: all 250ms ease-out;
}
.dialog .dialog__close {
font-size: 2rem;
line-height: 2rem;
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
padding: 15px;
transition: color 150ms ease;
}
.dialog .dialog__close:hover {
color: #E74C3C;
}
.dialog .dialog__title {
font-size: 2rem;
font-family: 'Slabo 27px', serif;
font-weight: 100;
margin: 0;
padding: 0 0 15px 0;
border-bottom: 2px solid #333333;
}
.dialog .dialog__content {
font-size: 1.1rem;
line-height: 2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<button class="dialog__trigger">OPEN1</button>
<div class="dialog" title="Dialog Title">
<span class="dialog__close">x</span>
<h2 class="dialog__title">TITLE1</h2>
<p class="dialog__content">CONTENT1</p>
</div>
<button class="dialog__trigger">OPEN2</button>
<div class="dialog" title="Dialog Title">
<span class="dialog__close">x</span>
<h2 class="dialog__title">TITLE2</h2>
<p class="dialog__content">CONTENT2</p>
</div>
</div>
So i know this is so easy for most of people here but i'm learning and i realy hope someone can help me;
I'm making a responsive nav for my website so i want to click the menu buttom so the menu drops from top of the screen. So i did the transform: translateY(-100%), but i have a function to make my menu (classic 3 lines) to turn into an "X" so what can i add to this function to make at the same time the menu appears?. And i don't know why but the transition from 3 hirizontal lines to X works nice but from X to the 3 lines is not working the same way.
DOM
<div id="mobile_menu">
<div class="mobile_menu_lines1"></div>
<div class="mobile_menu_lines2"></div>
<div class="mobile_menu_lines3"></div>
</div>
<nav id="mobile_nav">
<ul id="mobile_links">
<li>INICIO</li>
<li>PORTAFOLIO</li>
<li>NOSOTROS</li>
<li>CONTACTO</li>
</ul>
<ul id="mobile_links_social">
<li><img src="assets/img/svgs/facebook_icon.svg" alt="Facebook logo"/></li>
<li><img src="assets/img/svgs/twitter_icon.svg" alt="Twitter Logo"/></li>
<li><img src="assets/img/svgs/instagram_icon.svg" alt="Instagram logo"/></li>
</ul>
</nav>
CSS
#mobile_menu{
position: absolute;
display: block;
width: 50px;
height: 60px;
float: right;
right: 5px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.mobile_menu_lines1{
max-width: 70%;
align-items: center;
height: 2px;
background-color: white;
margin-top: 18px;
border-radius: 2px;
}
.mobile_menu_lines2, .mobile_menu_lines3{
max-width: 70%;
align-items: center;
height: 2px;
background-color: white;
margin-top: 9px;
border-radius: 2px;
}
.show .mobile_menu_lines1 {
transform: rotate(45deg) translate(11px, 5px);
transition: all 0.3s ease-in-out;
}
.show .mobile_menu_lines2 {
opacity: 0;
transition: all 0.3s ease-in-out;
}
.show .mobile_menu_lines3 {
transform: rotate(-45deg) translate(10px, -5px);
transition: all 0.3s ease-in-out;
}
#mobile_nav{
display: block;
text-align: center;
padding-top:60px;
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
transform: translateY(-100%);
transition: all 0.3s ease-in-out;
}
#mobile_nav #mobile_links li{
padding: 15px 0;
}
#mobile_nav #mobile_links li a{
list-style: none;
text-decoration: none;
color: white;
font-family: "josefin sans";
font-size: 12px;
letter-spacing: 7px;
align-items: center;
text-align: center;
padding: 15px 0;
width:600px;
max-width: 100%
}
#mobile_nav #mobile_links_social li{
padding: 10px 20px;
}
JS
var mobileNavMostrar = document.getElementById('mobile_menu');
mobileNavMostrar.addEventListener('click',function(){
mobileNavMostrar.classList.toggle('show');
})
Thanks in advance.
I tried your code and I think you are missing two things - the css to define how the mobile_nav should change when it is shown, and the javascript to apply that css on click.