function replace( hide, show ) {
document.getElementById(hide).style.display="none";
document.getElementById(show).style.display="flex";
}
#import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&family=Bebas+Neue&family=Inter:wght#100;200;300;400;600;700;800&family=Roboto:wght#300;400;700&family=VT323&display=swap');
body {
margin: 0;
padding: 0;
}
.all_guidebook {
width: 100%;
position: absolute;
min-height: 1000px;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.title_guidebook {
position: relative;
top: 50px;
justify-content: center;
}
.disposition_guidebook {
width: 1100px;
display: flex;
position: relative;
align-items: flex-start;
top: 55px;
}
.navigation {
width: 286px;
background: var(--bleu);
position: relative;
height: auto;
padding-bottom: 30px;
border-radius: 35px;
margin-right: 15px;
}
.navigation .all_links {
position: relative;
top: 15px;
}
.navigation h1 {
color: white;
font: 45px 'Bebas Neue';
margin: 0;
text-align: center;
position: relative;
top: 15px;
}
.navigation h2 {
color: white;
font: 34px 'Bebas Neue';
position: relative;
background: var(--fushia);
display: flex;
border-radius: 15px;
height: 45px;
padding-top: 2px;
margin-bottom: 26px !important;
width: 247px;
box-sizing: border-box;
top: 20px;
margin: auto;
justify-content: center;
}
.navigation .menu_deroul, #regl {
display: flex;
background: blue;
width: 300px;
}
#reglhover {
display: flex;
background: blue;
width: 300px;
}
#reglhover img, #staffcredshover img, #ctxhover img, #grphover img, #pvrhover img, #syst1hover img, #syst2hover img, #pihover img, #exphover img, #foirehover img {
transform: rotate(135deg);
top: 5px;
position: relative;
left: 7px;
}
.navigation .menu_deroul img {
float: left;
left: 7px;
position: relative;
cursor: pointer;
}
.navigation span {
color: var(--fushiapp);
margin-right: 3px;
font: 20px 'Bebas Neue';
}
.navigation h3 {
color: var(--white);
font: 20px 'Bebas Neue';
}
.wrap_deroul {
display: flex;
flex-direction: column;
position: relative;
top: -18px;
align-items: flex-end;
}
.ancres_deroul {
list-style: none;
display: flex;
flex-direction: column;
align-items: flex-end;
height: 30px;
padding: 0;
color: white;
top: -16px;
font-weight: 200!important;
right: 16px;
font: 16px 'Bebas Neue';
position: relative;
}
.ancres_deroul ul {
margin: 0;
display: flex;
cursor: pointer;
list-style: none;
align-items: flex-end;
flex-direction: column;
}
.ancres_deroul li {transition: .5s;}
.ancres_deroul li a {
text-decoration: none!important;
color: black;
}
.ancres_deroul li:hover {
letter-spacing: .5px;
transition: .5s;
}
<div class="menu_deroul" id="regl" style="display:flex" >
<img src="https://i.ibb.co/cvhdX78/image.png" height="21" width="21" onclick="replace('regl','reglhover')" />
<div class="titre_deroul">
<span>001.</span>
<h3 class="tablinks" onclick="openCity(event, 'reglement')" id="defaultOpen">Règlement</h3>
</div>
</div>
<div id="reglhover" style="display:none">
<img src="https://i.ibb.co/cvhdX78/image.png" height="21" width="21" style="cursor:pointer; transform: rotate(135deg); transition: .5s; transition-duration: 2s;" onclick="replace('reglhover','regl')" />
<div class="wrap_deroul">
<div class="titre_deroul">
<span>001.</span>
<h3 class="tablinks" onclick="openCity(event, 'reglement')">Règlement</h3>
</div>
<div class="ancres_deroul">
<ul>
<li><a onclick="scrollWin()">Inscription & RP</a></li>
<li style="margin-top: -5px;">Discord</li>
</ul>
</div>
</div>
</div>
I have this code, it replaces a div by another when clicking on a button.
I want it to close the showed div when clicking outside the div. For example, if the div "reglhover" is showed, I want it to be replaced by the "hide" status (replaced by "regl") when clicking outside the "reglhover" div. And i want it to work for every occurrence (because i use tabs)... But I can't figure out how to do it. Can someone help me? :(
try
const regl = document.getElementById("regl")
const reglhover = document.getElementById("reglhover")
document.addEventListener("click", (e) => {
if (reglhover.style.display === "flex" && e.target.id != "reglhover") {
reglhover.style.display = "none"
regl.style.display = "flex"
}
})
Related
I'm making a car research/ranking website using React. Coming to the issue, I have 3 cards, with content on it once you hover over it.
It works perfectly well in desktops, but it doesn't properly show content in smaller devices: it overflows to the other section.
To fix this, I have added a media query to it, but it doesn't work either.
Please check my code:
.sec2 {
height: 100vh;
width: 100%;
color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: linear-gradient(to left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
url(https://static.feber.se/article_images/48/81/62/488162_1920.jpg)
no-repeat top center;
}
.wrapper {
display: flex;
width: 90%;
justify-content: space-around;
}
.card {
width: 350px;
height: 370px;
border-radius: 15px;
padding: 1.5rem;
position: relative;
object-fit: fill;
display: flex;
align-items: flex-end;
transition: 0.4s ease-out;
box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.5);
}
.card:hover {
transform: translateY(20px);
}
.card:hover:before {
opacity: 1;
}
.card:hover .info {
opacity: 1;
transform: translateY(0px);
}
.card:before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
border-radius: 15px;
background: rgba(0, 0, 0, 0.6);
z-index: 2;
transition: 0.5s;
opacity: 0;
}
.card img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
border-radius: 15px;
}
.card .info {
position: relative;
z-index: 3;
color: white;
opacity: 0;
transform: translateY(30px);
transition: 0.5s;
}
.card .info h1 {
margin: 0px;
font-size: 2rem;
}
.card .info p {
letter-spacing: 1px;
font-size: 15px;
margin-top: 8px;
}
.card .info button {
padding: 0.6rem;
outline: none;
border: none;
border-radius: 3px;
background: white;
color: black;
font-weight: bold;
cursor: pointer;
transition: 0.4s ease;
}
.card .info button:hover {
background: dodgerblue;
color: white;
}
#media only screen and (min-width: 600px) and (max-width: 768px) {
.wrapper {
flex-direction: column;
justify-content: center;
align-items: center;
}
.card {
height: 270px;
padding: 1rem;
width: 250px;
margin-bottom: 10px;
}
.card .info h1 {
font-size: 1rem;
}
.card .info p {
font-size: 15px;
}
.card .info button {
padding: 0.4rem;
font-weight: normal;
font-size: 12px;
}
}
#media (max-width: 600px) {
.wrapper {
flex-direction: column;
justify-content: center;
align-items: center;
}
.card {
height: 15%;
padding: 0.3rem;
width: 180px;
margin-bottom: 5px;
}
.card .info h1 {
font-size: 1rem;
}
.card .info p {
font-size: 10px;
}
.card .info button {
padding: 0.3rem;
font-weight: normal;
font-size: 10px;
}
}
And
<div>
<header className="sec2" id="section2">
<h1>
What is in this website?
</h1>
<div class="wrapper">
<div class="card">
<img src="https://cdn.jdpower.com/JDPA_2022%20Genesis%20G70%20Red%20Front%20Quarter%20View.jpg" />
<div class="info">
<h1>Car Rankings</h1>
<p>
It contains cars ranked based on body type, done after
comprehensive research.
</p>
<button>Go</button>
</div>
</div>
<div class="card">
<img src="https://i0.wp.com/autonxt.net/wp-content/uploads/2018/01/autocontentexp.com2018-Lincoln-Navigator5-5b1aebecc618f268352b037fb2253a291d670994-1.jpg?resize=2500%2C1500&ssl=1" />
<div class="info">
<h1>Car Reviews</h1>
<p>Contains reviews of selective cars written by us.</p>
<button>Read More</button>
</div>
</div>
<div class="card">
<img src="https://static0.hotcarsimages.com/wordpress/wp-content/uploads/2020/09/AWD-e1600115646672.jpg" />
<div class="info">
<h1>Used Cars/h1>
<p> We rank used cars so that you will only get the best out of it.
</p>
<button>Read More</button>
</div>
</div>
</div>
</header>
</div>
Image in computer: click, and
Image in smaller devices: click
first add the margin: auto in .wrapper class and some margin: 5px; to .card class because this make content in the center and looks good.
.wrapper {
display: flex;
width: 90%;
margin: auto;
justify-content: space-around;
}
.card {
/* your code */
margin: 5px;
}
Now, add just update margin: 15px; of all .card instead of margin-bottom
Here is the full code, https://codesandbox.io/s/laughing-gwen-4i47v5?file=/src/Home.jsx
I have a checkbox, that should trigger the menu to slide in from left side of the screen.The problem is when I got the menu hidden on the left, i can't make the function work. When I click the checkbox icon, it's animation works but nothing else happens. The menu is still hidden and I get no errors.
Here is a snippet of my code:
function showMenuSlider() {
var slider = document.querySelector(".menu-slider");
slider.classList.toggle("menu-slider-show");
var sliderOpacity = document.querySelector(".menu-slider-opacity");
sliderOpacity.classList.toggle("menu-slider-opacity-show")
}
* {
margin: 0;
padding: 0;
font-size: 16px;
font-family: Open Sans;
line-height: 1.6;
display: block;
}
html {
scroll-behavior: smooth;
}
main {
position: relative;
}
header {
width: 100%;
position: fixed;
top: 0;
z-index: 95;
box-shadow: 0px -2px 15px rgba(0, 0, 0, 1);
}
.header-container {
background-color: white;
display: flex;
flex-direction: column;
position: relative;
}
.header-upbar {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 50;
background-color: white;
width: 100%;
margin-top: 9px;
}
.header-upbar p {
font-size: 16px;
font-weight: 500;
color: grey;
}
.header-upbar-item2,
.header-upbar-item3 {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.header-upbar a {
text-decoration: none;
flex-basis: 50%;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
padding: 8px;
border-bottom: 0.5px solid grey;
}
.header-upbar a:first-of-type {
border-right: 0.5px solid grey;
}
.header-upbar-item2 img {
height: 23px;
margin-right: 6px;
}
.header-upbar-item3 img {
height: 23px;
margin: 0px 6px 0px 0px;
}
.header-downbar {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 51;
background-color: white;
}
.header-downbar-logo {
display: flex;
align-content: center;
align-items: center;
justify-content: center;
}
.header-downbar-logo img {
margin: 18px 18px 18px 18px;
height: 30px;
}
.header-downbar-menu {
height: 40px;
width: 40px;
display: block;
position: fixed;
margin: 15px 18px 15px 18px;
z-index: 502;
right: 5px;
top: 50px;
z-index: 100;
}
#menu {
display: none;
}
.icon {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: relative;
}
.icon .menu,
.icon .menu::before,
.icon .menu::after {
content: '';
background-color: rgba(50, 50, 50, 1);
display: block;
position: absolute;
height: 4px;
width: 35px;
transition: background ease .3s, top ease .3s .3s, transform ease .3s;
}
.menu {
top: 17.5px;
}
.menu::before {
top: 12px;
}
.menu::after {
top: -12px;
}
#menu:checked+.menu {
background: transparent;
}
#menu:checked+.menu::before {
transform: rotate(45deg);
}
#menu:checked+.menu::after {
transform: rotate(-45deg);
}
#menu:checked+.menu::before,
#menu:checked+.menu::after {
top: 0;
transition: top ease 0.3s, transform ease 0.3s 0.3s;
}
.menu-slider-opacity {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 98;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider {
width: 200px;
height: 100vh;
background-color: white;
z-index: 99;
position: absolute;
;
top: 0;
left: -100%;
display: block;
}
.menu-slider-show {
left: 0;
}
.menu-slider-opacity-show {
left: 0;
}
<div class="header-downbar-menu" onclick="showMenuSlider()">
<label for="menu" class="icon"><input type="checkbox" id="menu">
<div class="menu"></div>
</label>
</div>
<div class="menu-slider-opacity"></div>
<div class="menu-slider"></div>
<header id="header">
<div class="header-container">
<div class="header-upbar">
<a href="mailto: ">
<div class="header-upbar-item2">
<img src="img/Fenix-e-mail-icon-white.png" alt="">
<p>blablablabla#o2.pl</p>
</div>
</a>
<a href="tel: ">
<div class="header-upbar-item3">
<img src="img/Fenix-phone-icon-white.png" alt="">
<p>+48 999 999 999</p>
</div>
</a>
</div>
<div class="header-downbar">
<div class="header-downbar-logo">
<img src="img/Fenix-logo-black.png" alt="">
</div>
</div>
</div>
</header>
The button is outside the header, because i need it to be on top of the dark opacity behind the menu. In the future I will make a nice white rounded background to it, so it won't invisible.
Of course if you know better way to do it, be my guest. I'm struggling with this for a while...
The problem is that you add the onclick handler on the header-downbar-menu and not on the checkbox. So when clicking the checkbox you also click on header-downbar-menu so the event is triggered twice. So the class is toggled twice ( added/removed in the same time...almost :) )
Add the click event on the input. ( you could use an onchange event instead of the click event to check the state checked or unchecked , that might help you )
function showMenuSlider() {
var slider = document.querySelector(".menu-slider");
slider.classList.toggle("menu-slider-show");
var sliderOpacity = document.querySelector(".menu-slider-opacity");
sliderOpacity.classList.toggle("menu-slider-opacity-show")
}
html {
scroll-behavior: smooth;
}
main {
position: relative;
}
header {
width: 100%;
position: fixed;
top: 0;
z-index: 95;
box-shadow: 0px -2px 15px rgba(0, 0, 0, 1);
}
.header-container {
background-color: white;
display: flex;
flex-direction: column;
position: relative;
}
.header-upbar {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 50;
background-color: white;
width: 100%;
margin-top: 9px;
}
.header-upbar p {
font-size: 16px;
font-weight: 500;
color: grey;
}
.header-upbar-item2,
.header-upbar-item3 {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.header-upbar a {
text-decoration: none;
flex-basis: 50%;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
padding: 8px;
border-bottom: 0.5px solid grey;
}
.header-upbar a:first-of-type {
border-right: 0.5px solid grey;
}
.header-upbar-item2 img {
height: 23px;
margin-right: 6px;
}
.header-upbar-item3 img {
height: 23px;
margin: 0px 6px 0px 0px;
}
.header-downbar {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 51;
background-color: white;
}
.header-downbar-logo {
display: flex;
align-content: center;
align-items: center;
justify-content: center;
}
.header-downbar-logo img {
margin: 18px 18px 18px 18px;
height: 30px;
}
.header-downbar-menu {
height: 40px;
width: 40px;
display: block;
position: fixed;
margin: 15px 18px 15px 18px;
z-index: 502;
right: 5px;
top: 50px;
z-index: 100;
}
#menu {
display: none;
}
.icon {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: relative;
}
.icon .menu,
.icon .menu::before,
.icon .menu::after {
content: '';
background-color: rgba(50, 50, 50, 1);
display: block;
position: absolute;
height: 4px;
width: 35px;
transition: background ease .3s, top ease .3s .3s, transform ease .3s;
}
.menu {
top: 17.5px;
}
.menu::before {
top: 12px;
}
.menu::after {
top: -12px;
}
#menu:checked+.menu {
background: transparent;
}
#menu:checked+.menu::before {
transform: rotate(45deg);
}
#menu:checked+.menu::after {
transform: rotate(-45deg);
}
#menu:checked+.menu::before,
#menu:checked+.menu::after {
top: 0;
transition: top ease 0.3s, transform ease 0.3s 0.3s;
}
.menu-slider-opacity {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 98;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider {
width: 200px;
height: 100vh;
background-color: white;
z-index: 99;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider-show {
left: 0;
}
.menu-slider-opacity-show {
left: 0;
}
<div class="header-downbar-menu">
<label for="menu" class="icon"><input type="checkbox" id="menu" onclick="showMenuSlider()">
<div class="menu"></div>
</label>
</div>
<div class="menu-slider-opacity"></div>
<div class="menu-slider"></div>
<header id="header">
<div class="header-container">
<div class="header-upbar">
<a href="mailto: ">
<div class="header-upbar-item2">
<img src="img/Fenix-e-mail-icon-white.png" alt="">
<p>blablablabla#o2.pl</p>
</div>
</a>
<a href="tel: ">
<div class="header-upbar-item3">
<img src="img/Fenix-phone-icon-white.png" alt="">
<p>+48 999 999 999</p>
</div>
</a>
</div>
<div class="header-downbar">
<div class="header-downbar-logo">
<img src="img/Fenix-logo-black.png" alt="">
</div>
</div>
</div>
</header>
I have been hours trying to align this absurd code. How can I align the menu to the right?
var k = 0;
function fnclick() {
document.documentElement.style.setProperty("--display", k ? "none" : "block");
k = 1 - k;
}
:root {
--display: none;
--width: 30%;
--height: 5%;
--bgcolor1: #222222;
--bgcolor2: #222299;
--bgcolor3: #2222FF;
font-family: Arial;
font-size: 14px;
}
a:hover,
a#mnu:hover {
background-color: var(--bgcolor2);
}
a:active,
a#mnu:active {
background-color: var(--bgcolor3);
}
body {}
a {
display: var(--display, block);
display: block;
width: var(--width);
height: var(--height);
padding: 5px;
background-color: var(--bgcolor1);
text-decoration: none;
text-align: center;
color: #FFFFFF;
}
div#navbar {
border: 1px solid #ff1100;
display: flex;
top: 0px;
right: 0px;
position: fixed;
margin-top: 10px;
margin-right: 10px;
justify-content: center;
align-items: center;
}
a#mnu {
display: block;
width: 10%;
height: var(--height);
padding: 2px;
background-color: var(--bgcolor1);
color: #FFFFFF;
border: 0px;
}
<div id="navbar">
<a id="mnu" onclick="fnclick()">☰</a>
<a id="mnuExit" onclick="mnuRefr()">Exit</a>
<a id="mnuRefr" onclick="mnuRefr()">Refresh</a>
<a id="mnuOpts" onclick="mnuOpts()">Chart Options</a>
<a id="mnuSlct" onclick="mnuSlct()">Select Channels</a>
<a id="mnuSave" onclick="mnuSave()">Save Snapshot</a>
<a id="mnuHalt" onclick="mnuHalt()">Halt Plot</a>
</div>
<div>This absurd text keeps moving with every action of the menu, and do not keep QUIET, since the menu do not float freely over the text....</div>
Let's say I have an element with class alignRight
<div class="alignRight"> My Menu Item </div>
Now write some css for the above element
div.alignRight{
display: flex;
top: 0px;
right: 0px;
position: fixed;
margin-top: 10px;
margin-right: 10px;
justify-content: center;
align-items: center;
}
Here are 3 important lines
top: 0px;
right: 0px;
position: fixed;
I have trouble with my header, when I open this website in a mobile, and click in the burger button the nav menu can't be responsive at all.
The menu is in "position: fixed", and depending on the diferents mobiles I need to change the "top: n%", so I don't know how this can be responsive.
picture of the problem https://i.gyazo.com/7ca78e79ced8784c8e72ebc7090920d3.png
picture image of the problem https://i.gyazo.com/4cda3f4bc256719a4d565e74d131e7a0.png
Link of the website http://maderines.000webhostapp.com/
const ipad = window.matchMedia('screen and (max-width: 658px)');
const menu = document.querySelector('.menu');
const burgerButton = document.querySelector('#burger-menu');
ipad.addListener(validation)
function validation(event) {
if (event.matches) {
burgerButton.addEventListener('click', hideShow);
} else {
burgerButton.removeEventListener('click', hideShow);
}
}
validation(ipad);
function hideShow() {
if (menu.classList.contains('is-active')) {
menu.classList.remove('is-active');
} else {
menu.classList.add('is-active');
}
}
/* start HEADER */
.header {
background-color: rgba(0, 0, 0, 0.692);
color: white;
display: flex;
height: 80px;
width: 100%;
justify-content: space-around;
flex-wrap: wrap;
position: fixed;
z-index: 2;
}
.header figure {
justify-self: center;
padding-top: 5px;
}
.menu {
height: inherit;
}
.header ol {
font-family: inherit;
display: flex;
height: inherit;
font-size: 17px;
}
.header ol li {
height: inherit;
}
.header a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
height: inherit;
padding: 0 10px;
transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
}
.header ol a:hover {
transform: scale(1.2);
opacity: 1;
}
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
}
figure {
margin: 0;
}
.burger-button {
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
display: none;
position: fixed;
left: 10px;
top: 20px;
color: white;
font-size: 28px;
}
/* end HEADER */
/* start Responsive */
#media screen and (max-width:781px) {
.header {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: auto;
align-items: center;
}
}
#media screen and (max-width:658px) {
.burger-button {
display: block;
position: fixed;
z-index: 3;
justify-content: center;
align-self: center;
top: 15px;
}
.header ol {
display: block;
font-size: 20px;
}
.header ol li {
height: 40px;
}
.menu {
position: fixed;
background-color: rgba(0, 0, 0, 0.692);
top: 12%;
left: -300px;
height: auto;
transition: .3s;
}
.menu.is-active {
left: 0;
}
}
#media screen and (max-width:480px) {
.burger-button {
top: 10px;
}
.menu {
top: 12%;
}
}
#media screen and (max-width:425px) {
.menu {
top: 14%;
}
}
#media screen and (max-width:320px) {
.menu {
top: 14vh;
}
.burger-button {
line-height: 40px;
width: 40px;
height: 40px;
left: 10px;
top: 15px;
font-size: 20px;
}
}
<i class="icon-menu burger-button" id="burger-menu"></i>
<div class="fondo">
<header class="header">
<figure class="logo ">
<img src="images/log3o.png" alt="Logo Carpinteria Mader Ranch">
</figure>
<nav class="menu">
<ol>
<li>Inicio</li>
<li>Nuestros trabajos</li>
<li>Contacto</li>
</ul>
</nav>
</header>
If I understood what you try to do, you can just change the menu class from position: fixed; to position: absolute; and set top: 97% to all media sizes, so you should have:
const ipad = window.matchMedia('screen and (max-width: 658px)');
const menu = document.querySelector('.menu');
const burgerButton = document.querySelector('#burger-menu');
ipad.addListener(validation)
function validation(event) {
if (event.matches) {
burgerButton.addEventListener('click', hideShow);
} else {
burgerButton.removeEventListener('click', hideShow);
}
}
validation(ipad);
function hideShow() {
if (menu.classList.contains('is-active')) {
menu.classList.remove('is-active');
} else {
menu.classList.add('is-active');
}
}
/* start HEADER */
.header {
background-color: rgba(0, 0, 0, 0.692);
color: white;
display: flex;
height: 80px;
width: 100%;
justify-content: space-around;
flex-wrap: wrap;
position: fixed;
z-index: 2;
}
.header figure {
justify-self: center;
padding-top: 5px;
}
.menu {
height: inherit;
}
.header ol {
font-family: inherit;
display: flex;
height: inherit;
font-size: 17px;
}
.header ol li {
height: inherit;
}
.header a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
height: inherit;
padding: 0 10px;
transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
}
.header ol a:hover {
transform: scale(1.2);
opacity: 1;
}
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
}
figure {
margin: 0;
}
.burger-button {
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
display: none;
position: fixed;
left: 10px;
top: 20px;
color: white;
font-size: 28px;
}
/* end HEADER */
/* start Responsive */
#media screen and (max-width:781px) {
.header {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: auto;
align-items: center;
}
}
#media screen and (max-width:658px) {
.burger-button {
display: block;
position: fixed;
z-index: 3;
justify-content: center;
align-self: center;
top: 15px;
}
.header ol {
display: block;
font-size: 20px;
}
.header ol li {
height: 40px;
}
.menu {
position: absolute;
background-color: rgba(0, 0, 0, 0.692);
top: 97%;
left: -300px;
height: auto;
transition: .3s;
}
.menu.is-active {
left: 0;
}
}
#media screen and (max-width:480px) {
.burger-button {
top: 10px;
}
.menu {
top: 97%;
}
}
#media screen and (max-width:425px) {
.menu {
top: 97%;
}
}
#media screen and (max-width:320px) {
.menu {
top: 97%;
}
.burger-button {
line-height: 40px;
width: 40px;
height: 40px;
left: 10px;
top: 15px;
font-size: 20px;
}
}
<i class="icon-menu burger-button" id="burger-menu"></i>
<div class="fondo">
<header class="header">
<figure class="logo ">
<img src="http://maderines.000webhostapp.com/images/log3o.png" alt="Logo Carpinteria Mader Ranch">
</figure>
<nav class="menu">
<ol>
<li>Inicio</li>
<li>Nuestros trabajos</li>
<li>Contacto</li>
</ul>
</nav>
</header>
</div>
So it looks like my javascript onclick events are only functioning with ID's but when i call the class "listButton" only the first list item (All Rewards) closes the dropdown div.
When i click on any other list item (Food Rewards, Beverage Rewards, Holiday Rewards, Classes Rewards, TBA) it does not close my dropdown div.
I'm unsure why this is so. Is there another method to complete this? I must use vanilla JS.
var overlay2 = document.getElementById("overlay2");
var dropdown = document.getElementById("rewardsDropdown");
var listButton = document.querySelectorAll(".listButton");
document.getElementById("dropdownButton").onclick = function() {
dropdown.classList.add("open");
overlay2.classList.add("open");
};
function removeOpenRewards() {
dropdown.classList.remove("open");
overlay2.classList.remove("open");
};
for (i = 0; i < listButton.length; i++) {
listButton[i].addEventListener("click", removeOpenRewards);
}
overlay2.addEventListener("click", removeOpenRewards);
document.getElementById("close").addEventListener("click", removeOpenRewards);
#container #activeRewards #mobileDropdown #overlay2 {
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
z-index: 999;
display: none;
}
#container #activeRewards #mobileDropdown #overlay2.open {
display: block;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont {
width: 100%;
height: 59px;
margin: 15px 0 20px 0;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button {
width: 100%;
height: 100%;
background-color: #FAFAFA;
border: 0;
outline: 0;
border-radius: 10px;
color: #696969;
font-size: 18px;
font-family: 'Lato', sans-serif;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 20px;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button:focus {
background-color: #F0F0F0;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button:after {
border-style: solid;
border-width: 2px 2px 0 0;
content: '';
display: inline-block;
width: 5px;
height: 5px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
color: #C7C7C7;
position: absolute;
right: 40px;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button span {
color: #EDAFBD;
font-size: 12px;
margin-left: 15px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown {
width: 100%;
display: none;
}
#container #activeRewards #mobileDropdown #rewardsDropdown.open {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: fixed;
z-index: 1000;
background-color: #FFFFFF;
left: 0;
bottom: 0;
padding-bottom: 30px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #close {
color: #D63A5E;
background-color: #FFFFFF;
border-radius: 20px;
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.16);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.16);
font-size: 20px;
position: absolute;
left: 20px;
top: -45px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 15px;
width: 15px;
padding: 5px 5px 7px 6px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #close:hover {
background-color: #D63A5E;
color: #FFFFFF;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #close:focus {
color: #FFFFFF;
text-decoration: none;
cursor: pointer;
background-color: #AF2B49;
}
#container #activeRewards #mobileDropdown #rewardsDropdown h4 {
color: #505050;
text-align: center;
font-size: 18px;
font-weight: bolder;
margin: 30px 0;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList {
height: 360px;
overflow: scroll;
width: 95%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList::-webkit-scrollbar {
background-color: transparent;
width: 5px;
margin-left: 5px;
padding-left: 5px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList::-webkit-scrollbar-thumb {
background-color: #E0E0E0;
border-radius: 5px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div {
width: 95%;
height: 59px;
margin-top: 5px;
padding-right: 5px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div button {
width: 100%;
height: 100%;
background-color: #FAFAFA;
border: 0;
outline: 0;
border-radius: 10px;
color: #696969;
font-size: 18px;
font-family: 'Lato', sans-serif;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 20px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div button:focus {
background-color: #D63A5E;
color: #FFFFFF;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div button span {
color: #EDAFBD;
font-size: 12px;
margin-left: 15px;
}
<div id="container">
<div id="activeRewards">
<div id="mobileDropdown">
<div id="dropdownButtonCont">
<button id="dropdownButton">All Rewards
<span>(5)</span>
</button>
</div>
<div id="overlay2"></div>
<div id="rewardsDropdown">
<span id="close">×</span>
<h4>Reward Categories</h4>
<div id="dropdownList">
<div>
<button class="listButton">All Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Food Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Beverage Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Holiday Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Classes Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">TBA
<span>(5)</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
The Document method querySelector() returns the first Element within
the document that matches the specified selector, or group of
selectors. If no matches are found, null is returned.
So replace:
document.querySelector(".listButton").addEventListener("click", removeOpenRewards);
with:
var listButtons= document.querySelectorAll(".listbutton");
listButtons.forEach(function(listButton) {
listButton.addEventListener("click", removeOpenRewards);
});