important note before I even ask the question: It was much shorter and simpler for me (therefore you too) to just show the CSS part regarding media queried, because it would be too much useless code/info otherwise. Meaning - please resize your browser to the size mentioned in CSS (width 480px or less) to see what I'm talking about. And no I'm not using bootstrap for this...
My question is next: How am I supposed to make my "hamburger" menu overlay the content (opened onclick) and not push it down?
Even better if it can be done without any JS but remember, sliding effects or easing in/out - not stuff im looking for.
Here is the snippet:
function myFunction() {
var x = document.getElementById("menu");
if (x.style.display === "block") {
x.style.display = "none";
}
else {
x.style.display = "block";
}
}
#media only screen and (max-width: 480px) {
.networks, .sidenav, .image-row, .foot1, .foot3 {
display: none;
}
body {
display: block;
width: 100%;
height: 100%;
background-color: #e1e1e1;
}
.page-wrap {
display: block;
margin-top: 0px;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
z-index: 0;
}
.logo {
display: inline-block;
float: left;
width: 75%;
margin-left: 2.5%;
}
.logoImg {
width: 200%;
}
.menuIcon {
display: inline-block;
float: right;
width: 10%;
margin-top: 6%;
margin-right: 5.5%;
border: none;
z-index: 3;
}
.navButton {
display: block;
width: 100%;
background-color: #e1e1e1;
border: none;
z-index: 3;
}
.navButton:focus {
outline: none;
}
#menu {
display: none;
position: relative;
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 2.5%;
padding-bottom: 2.5%;
z-index: 3;
}
.main {
display: block;
width: 90%;
height: auto;
padding-bottom: 7.5%;
margin-top: 2.5%;
margin-left: 5%;
margin-right: 5%;
z-index: 1;
}
.textbox {
display: block;
width: 95%;
margin-top: 5%;
margin-left: auto;
margin-right: auto;
font-size: 1.25em;
text-align: justify;
}
.myPhoto {
display: block;
width: 50%;
margin-left: auto;
margin-right: auto;
}
.foot2 {
display: block;
width: 100%;
padding-top: 5%;
padding-bottom: 5%;
font-size: 1.25em;
color: #324B64;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href="test.css">
<script src="myScript.js"></script>
<title>Luka Novak</title>
</head>
<body>
<div class="page-wrap">
<div class="header">
<div class="logo">
</div>
<div class="networks">
<img src="facebook-symbol.svg" class="socialnet" alt="facebook">
<img src="instagram-symbol.svg" class="socialnet" alt="instagram">
</div>
<div class="menuIcon">
<button onclick="myFunction()" class="navButton">
<img src="https://cdn3.iconfinder.com/data/icons/gray-toolbar/512/menu-512.png"
alt="menu"
class="iconImg">
</button>
</div>
</div>
<div class="sidenav col-5" id="menu">
about us
services
contact
</div>
<div class="main col-18">
<article class="textbox">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</article>
<div class="image-row">
<div class="image1">
</div>
<div class="image2">
</div>
<div class="image3">
</div>
</div>
</div>
<div class="footer col-24">
<p class="foot1">Some info</p>
<p class="foot2">design by me</p>
<p class="foot3">More info</p>
</div>
</div>
</body>
</html>
And in case that the snippet looks weird (as in jsfiddle, plus not registering menu being clickable at all), here is CodePen link: https://codepen.io/anon/pen/VxmMrJ
(remember to resize the window in codepen too)
Change your position from relative to absolute on the menu id and and change the margin-top to maybe 20%; this should move the menu on top of your information.
Cheers Mate.
Check this code pen link
When you click the button, make its position absolute.This way, it will not interfere with the opened menu.
Add this to your css
.menu-button-enable{
position: absolute;
top: 0px;
right: 0px;
z-index: 4;
}
Add this to js
function myFunction() {
var x = document.getElementById("menu");
var mButton = document.querySelector(".menuIcon");
if (x.style.display === "block") {
x.style.display = "none";
mButton.classList.remove("menu-button-enable");
}
else {
x.style.display = "block";
mButton.classList.add("menu-button-enable");
}
}
The way to layer content on top of each other is by given it the position: absolute;. With that, and some positioning, you can position your menu on top of your content, like so:
Just replace this with the #menu rule in your media-query for 480px and it will work :)
#menu {
position: absolute;
display: none;
width: 90%;
top: 15%;
left: 0;
right: 0;
margin: auto;
height: auto;
z-index: 3;
}
Related
I am not very well versed in HTML and CSS. I am currently building a website and I integrated a sidebar into my web application using Bootstrap, but it has messed my layouts, and I can't seem to figure out how to move the content in a block to the left of side of my sidebar.
Please view the image on this link
[1]: https://i.stack.imgur.com/XFaVv.png
As seen in the picture above, my sidebar is located at the right and my content is located at the below of my sidebar. Below are my codes for my sidebar and the base template.
// Not bringing sidebar when active
const menu_toggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');
// When the button is clicked the sidebar will be active in the following code
menu_toggle.addEventListener('click', () => {
menu_toggle.classList.toggle('is-active');
sidebar.classList.toggle('is-active');
})
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* Sidebar Section */
.app {
display: flex;
min-height: 100vh;
}
.sidebar {
flex: 1 1 0;
max-width: 300px;
padding: 20px;
background: linear-gradient(#ed7014, #fa5b3d);
/* With Scrollbar */
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
overflow-x: hidden;
overflow-y: auto;
/* Scrollable contents if viewport is shorter than content. */
border-right: 1px solid #eee;
}
.sidebar h3 {
font-family: 'Bungee', cursive;
color: #fff;
}
.sidebar .menu {
margin: 0 -1rem;
}
.sidebar .menu .menu-item {
display: block;
padding: 1em;
color: #fff;
text-decoration: none;
transition: 0.2s linear;
}
.sidebar .menu .menu-item:hover,
.sidebar .menu .menu-item.is-active {
color: rgb(255, 238, 151);
;
border-right: 5px solid rgb(255, 238, 151);
}
/* Content Scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: #ffa500;
}
::-webkit-scrollbar-thumb:hover {
background-color: #d67229;
}
/* Content Section */
.content {
flex: 1 1 0;
padding: 2rem;
background: linear-gradient(#dd5713, #d67229);
}
.content img {
width: 100%;
max-width: 300px;
display: block;
margin: auto;
}
.content h1 {
font-family: 'Bungee', cursive;
color: #fff;
margin-bottom: 1rem;
}
.content strong {
font-family: 'Bungee', cursive;
color: #fff;
}
.content p {
text-align: justify;
color: #fff;
}
/* Sample Code Content */
.sample-code {
width: 65%;
background: rgb(255, 238, 151);
padding: 1em;
margin-bottom: 2em;
border-radius: 10px;
box-shadow: 15px 15px;
}
.sample-code p {
color: #000;
}
/* Button Sidebar section */
.menu-toggle {
display: none;
position: fixed;
top: 2rem;
right: 2rem;
width: 60px;
height: 60px;
border-radius: 99px;
background-color: #ed7014;
cursor: pointer;
}
.button {
position: relative;
top: calc(50% - 2px);
left: 50%;
transform: translate(-50%, -50%);
width: 32px;
}
.button>span,
.button>span::before,
.button>span::after {
display: block;
position: absolute;
width: 100%;
height: 4px;
border-radius: 99px;
background-color: #fff;
transition-duration: .25s;
}
.button>span::before {
content: '';
top: -8px;
}
.button>span::after {
content: '';
top: 8px;
}
/* Button Animation */
.menu-toggle.is-active .button>span {
transform: rotate(45deg);
}
.menu-toggle.is-active .button>span::before {
top: 0;
transform: rotate(0deg);
}
.menu-toggle.menu-toggle.is-active .button>span::after {
top: 0;
transform: rotate(90deg);
}
/* Sidebar Footer */
.white-section {
text-align: center;
}
.p-white-sec {
color: #fff;
}
.container-fluid {
padding: 7px 15px;
}
.footer-icon {
margin: 20px 10px;
color: #fff;
}
.footer-icon:hover {
color: #ffa500;
transition: 0.2s linear;
}
/* Mobile Size */
#media (max-width: 1024px) {
/* Sidebar Section */
.sidebar {
max-width: 200px;
}
.sidebar img {
height: 6.5rem;
width: 10rem;
}
}
#media (max-width: 768px) {
/* Sidebar Section */
.menu-toggle {
display: block;
}
.sidebar {
position: fixed;
top: 0;
left: -300px;
height: 100vh;
width: 100%;
max-width: 300px;
transition: 0.2s linear;
}
.sidebar.is-active {
left: 0;
}
.sidebar img {
height: 6.5rem;
width: 10rem;
}
/* Content */
.content {
padding-top: 8rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Codin'up | HTML Course</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;400;900&family=Ubuntu:ital,wght#0,300;1,400;1,700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Bungee&family=Poppins&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.png">
<!-- CSS Stylesheet -->
<link rel="stylesheet" href="/CSS/List of Course/HTML Course.css">
</head>
<body>
<section class="app">
<!-- Button for Sidebar -->
<div class="menu-toggle">
<div class="button">
<span></span>
</div>
</div>
<!-- Sidebar Section -->
<aside class="sidebar">
<a href="/HTML/List of Course/HTML Course.html">
<img src="/Logo/Codin'up Logo (1) White.png" alt="Codin'up">
</a>
<h3>HTML Course</h3>
<nav class="menu">
Home
Courses
</nav>
<hr>
<nav class="menu">
HTML Introduction
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
</nav>
<hr>
<!-- Sidebar Footer -->
<footer class="white-section" id="footer">
<div class="container-fluid">
<i class="fa-brands fa-twitter footer-icon"></i>
<i class="fa-brands fa-facebook-f footer-icon"></i>
<i class="fa-brands fa-instagram footer-icon"></i>
<i class="fa-solid fa-envelope footer-icon"></i>
<p class="p-white-sec">© 2022 ITMAWD21 Group 3</p>
</div>
</footer>
</aside>
<!-- Content Section -->
<main class="content">
<h1>Introduction To HTML</h1>
<img src="/Logo/HTML Logo.png" alt="Codin'up Logo">
<strong>Description</strong>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium ipsa, quod, placeat cupiditate enim hic natus maiores nobis sequi nisi odit voluptas earum quas perspiciatis qui explicabo recusandae ullam quibusdam? Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Dignissimos obcaecati exercitationem voluptatem accusamus, beatae sunt voluptatibus quam odio magnam, mollitia minima dicta distinctio, amet accusantium! Dolore debitis qui quis iusto. Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Accusantium harum corrupti nisi ratione aperiam commodi rerum. Delectus illum suscipit distinctio unde iste veritatis voluptate nulla, enim rem harum ullam rerum. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Ut cumque totam ipsum, quia voluptate quam esse reprehenderit explicabo atque, molestiae doloribus earum repellendus architecto aperiam minima impedit dicta autem laboriosam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique,
corrupti adipisci. Itaque sint, nemo laborum a ratione corrupti laboriosam tenetur soluta pariatur nostrum fuga, earum voluptate ducimus iure ipsum saepe? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae recusandae
iste, molestiae modi ea numquam vero repellat. Doloremque iusto labore nobis placeat perspiciatis optio repellendus eius adipisci voluptas expedita. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor doloremque rem debitis? Sed quod
eligendi inventore deleniti aliquid velit, magni perferendis, quaerat officiis in consequuntur tenetur ipsum animi tempore asperiores.</p>
<!-- Sample Code Content -->
<div class="sample-code">
<p><html></p>
<p><span style="padding-left: 20px;"><head></span></p>
<p><span style="padding-left: 40px;"><title>HTML Course</title></span></p>
<p><span style="padding-left: 20px;"></head></span></p>
<p><span style="padding-left: 20px;"><body></span></p>
<p><span style="padding-left: 40px;"><p>Hello World<p></span></p>
<p><span style="padding-left: 20px;"></body></span></p>
<p></html></p>
</div>
<strong>Code Description</strong>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui iusto, eveniet repudiandae ratione sint harum pariatur id numquam doloremque sequi eaque quo accusamus ab nihil aut alias inventore! Cumque, tempore.</p>
</main>
</section>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/c9df5e490e.js" crossorigin="anonymous"></script>
<!-- Bootstrap JS & External JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="/JS/List of Course/HTML Course.js"></script>
</body>
</html>
Can someone help me fit the content to the right beside my sidebar especially its layout? Thanks for the big help!
I would just apply position: sticky and height: 100vh on the sidebar:
position: sticky;
height: 100vh;
Giving it height: 100vh makes sure the sidebar always stretches to the entire height of the screen. position: sticky works in a similiar fashion to position: fixed but it doesn't affect the document flow in the same way. You can then apply positioning values such as top: 0 and left: 0, but those properties are already applied in your snippet.
// Not bringing sidebar when active
const menu_toggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');
// When the button is clicked the sidebar will be active in the following code
menu_toggle.addEventListener('click', () => {
menu_toggle.classList.toggle('is-active');
sidebar.classList.toggle('is-active');
})
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* Sidebar Section */
.app {
display: flex;
min-height: 100vh;
}
.sidebar {
flex: 1 1 0;
max-width: 300px;
padding: 20px;
background: linear-gradient(#ed7014, #fa5b3d);
/* With Scrollbar */
/* Edit start */
position: sticky;
height: 100vh;
/* Edit end */
top: 0;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
overflow-x: hidden;
overflow-y: auto;
/* Scrollable contents if viewport is shorter than content. */
border-right: 1px solid #eee;
}
.sidebar h3 {
font-family: 'Bungee', cursive;
color: #fff;
}
.sidebar .menu {
margin: 0 -1rem;
}
.sidebar .menu .menu-item {
display: block;
padding: 1em;
color: #fff;
text-decoration: none;
transition: 0.2s linear;
}
.sidebar .menu .menu-item:hover,
.sidebar .menu .menu-item.is-active {
color: rgb(255, 238, 151);
;
border-right: 5px solid rgb(255, 238, 151);
}
/* Content Scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: #ffa500;
}
::-webkit-scrollbar-thumb:hover {
background-color: #d67229;
}
/* Content Section */
.content {
flex: 1 1 0;
padding: 2rem;
background: linear-gradient(#dd5713, #d67229);
}
.content img {
width: 100%;
max-width: 300px;
display: block;
margin: auto;
}
.content h1 {
font-family: 'Bungee', cursive;
color: #fff;
margin-bottom: 1rem;
}
.content strong {
font-family: 'Bungee', cursive;
color: #fff;
}
.content p {
text-align: justify;
color: #fff;
}
/* Sample Code Content */
.sample-code {
width: 65%;
background: rgb(255, 238, 151);
padding: 1em;
margin-bottom: 2em;
border-radius: 10px;
box-shadow: 15px 15px;
}
.sample-code p {
color: #000;
}
/* Button Sidebar section */
.menu-toggle {
display: none;
position: fixed;
top: 2rem;
right: 2rem;
width: 60px;
height: 60px;
border-radius: 99px;
background-color: #ed7014;
cursor: pointer;
}
.button {
position: relative;
top: calc(50% - 2px);
left: 50%;
transform: translate(-50%, -50%);
width: 32px;
}
.button>span,
.button>span::before,
.button>span::after {
display: block;
position: absolute;
width: 100%;
height: 4px;
border-radius: 99px;
background-color: #fff;
transition-duration: .25s;
}
.button>span::before {
content: '';
top: -8px;
}
.button>span::after {
content: '';
top: 8px;
}
/* Button Animation */
.menu-toggle.is-active .button>span {
transform: rotate(45deg);
}
.menu-toggle.is-active .button>span::before {
top: 0;
transform: rotate(0deg);
}
.menu-toggle.menu-toggle.is-active .button>span::after {
top: 0;
transform: rotate(90deg);
}
/* Sidebar Footer */
.white-section {
text-align: center;
}
.p-white-sec {
color: #fff;
}
.container-fluid {
padding: 7px 15px;
}
.footer-icon {
margin: 20px 10px;
color: #fff;
}
.footer-icon:hover {
color: #ffa500;
transition: 0.2s linear;
}
/* Mobile Size */
#media (max-width: 1024px) {
/* Sidebar Section */
.sidebar {
max-width: 200px;
}
.sidebar img {
height: 6.5rem;
width: 10rem;
}
}
#media (max-width: 768px) {
/* Sidebar Section */
.menu-toggle {
display: block;
}
.sidebar {
position: fixed;
top: 0;
left: -300px;
height: 100vh;
width: 100%;
max-width: 300px;
transition: 0.2s linear;
}
.sidebar.is-active {
left: 0;
}
.sidebar img {
height: 6.5rem;
width: 10rem;
}
/* Content */
.content {
padding-top: 8rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Codin'up | HTML Course</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;400;900&family=Ubuntu:ital,wght#0,300;1,400;1,700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Bungee&family=Poppins&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.png">
<!-- CSS Stylesheet -->
<link rel="stylesheet" href="/CSS/List of Course/HTML Course.css">
</head>
<body>
<section class="app">
<!-- Button for Sidebar -->
<div class="menu-toggle">
<div class="button">
<span></span>
</div>
</div>
<!-- Sidebar Section -->
<aside class="sidebar">
<a href="/HTML/List of Course/HTML Course.html">
<img src="/Logo/Codin'up Logo (1) White.png" alt="Codin'up">
</a>
<h3>HTML Course</h3>
<nav class="menu">
Home
Courses
</nav>
<hr>
<nav class="menu">
HTML Introduction
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
HTML Course no.
</nav>
<hr>
<!-- Sidebar Footer -->
<footer class="white-section" id="footer">
<div class="container-fluid">
<i class="fa-brands fa-twitter footer-icon"></i>
<i class="fa-brands fa-facebook-f footer-icon"></i>
<i class="fa-brands fa-instagram footer-icon"></i>
<i class="fa-solid fa-envelope footer-icon"></i>
<p class="p-white-sec">© 2022 ITMAWD21 Group 3</p>
</div>
</footer>
</aside>
<!-- Content Section -->
<main class="content">
<h1>Introduction To HTML</h1>
<img src="/Logo/HTML Logo.png" alt="Codin'up Logo">
<strong>Description</strong>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium ipsa, quod, placeat cupiditate enim hic natus maiores nobis sequi nisi odit voluptas earum quas perspiciatis qui explicabo recusandae ullam quibusdam? Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Dignissimos obcaecati exercitationem voluptatem accusamus, beatae sunt voluptatibus quam odio magnam, mollitia minima dicta distinctio, amet accusantium! Dolore debitis qui quis iusto. Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Accusantium harum corrupti nisi ratione aperiam commodi rerum. Delectus illum suscipit distinctio unde iste veritatis voluptate nulla, enim rem harum ullam rerum. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Ut cumque totam ipsum, quia voluptate quam esse reprehenderit explicabo atque, molestiae doloribus earum repellendus architecto aperiam minima impedit dicta autem laboriosam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique,
corrupti adipisci. Itaque sint, nemo laborum a ratione corrupti laboriosam tenetur soluta pariatur nostrum fuga, earum voluptate ducimus iure ipsum saepe? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae recusandae
iste, molestiae modi ea numquam vero repellat. Doloremque iusto labore nobis placeat perspiciatis optio repellendus eius adipisci voluptas expedita. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor doloremque rem debitis? Sed quod
eligendi inventore deleniti aliquid velit, magni perferendis, quaerat officiis in consequuntur tenetur ipsum animi tempore asperiores.</p>
<!-- Sample Code Content -->
<div class="sample-code">
<p><html></p>
<p><span style="padding-left: 20px;"><head></span></p>
<p><span style="padding-left: 40px;"><title>HTML Course</title></span></p>
<p><span style="padding-left: 20px;"></head></span></p>
<p><span style="padding-left: 20px;"><body></span></p>
<p><span style="padding-left: 40px;"><p>Hello World<p></span></p>
<p><span style="padding-left: 20px;"></body></span></p>
<p></html></p>
</div>
<strong>Code Description</strong>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui iusto, eveniet repudiandae ratione sint harum pariatur id numquam doloremque sequi eaque quo accusamus ab nihil aut alias inventore! Cumque, tempore.</p>
</main>
</section>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/c9df5e490e.js" crossorigin="anonymous"></script>
<!-- Bootstrap JS & External JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="/JS/List of Course/HTML Course.js"></script>
</body>
</html>
I don't know if i understand well but.
Try in the content class to add:
width:100%;
padding-left:300px; (the width of the menu)
.sidebar has a position; fixed.
You could apply styling to the main content <main class="content" style="left: 272px;position: absolute;">. But you must also account for the media queries adjusting the width of the sidebar. E.g.
#media (max-width: 1024px){
.sidebar {
max-width: 200px;
}
main.content {
left: 200px;
}
}
and
#media (max-width: 768px) {
.sidebar {
position: fixed;
top: 0;
left: -300px;
height: 100vh;
width: 100%;
max-width: 300px;
transition: 0.2s linear;
}
main.content {
left: 0;
height: 100%;
}
}
I would also use width property over max-width. To be sure that the content is aligns always as expected.
I have checked the layout maybe you can try using rows and columns to sort it out
<div class="row">
<div class="col-lg-3 col-xs-4">
//Sidebar code
</div>
<div class="col-lg-9 col-xs-8">
//Content code
</div>
</div>
This could be better option and will also be responsive.
If you are not comfortable or familiar then maybe like others suggested you can remove position:fixed styling in .sidebar will solve this problem temporarily
How to apply classList.toggle("active") in reactjs.
i create a two buttons and give onclick function togglePopup and define it at top. but i'm confused how to apply document.getElementById('popup-1').classList.toggle("active")in react. i apply this method in javaScript and i don't know how it is work in react?
Popup.jsx
const Filter = () => {
const togglePopup = () => {
document.getElementById('popup-1').classList.toggle("active")
}
return (
<>
<button className='p-3 border bg-blue-400'>click</button>
<div className="popup" id="popup-1">
<div className="overlay"></div>
<div className="content">
<div className="close-btn" onClick={togglePopup}>×</div>
<h1 className='text-2xl font-bold'>title</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non debitis officia neque nostrum, perspiciatis sed quaerat veritatis numquam, explicabo dolorum aliquam illo dolor at nemo maxime consequatur facilis magni laudantium! Ipsa eveniet quam, illum quos laudantium a placeat temporibus dolores libero pariatur quibusdam atque impedit magnam nam ipsum, rerum sapiente?</p>
</div>
</div>
Popup.css
.popup .overlay{
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
background:rgba(0, 0, 0, 0.7);
z-index: 1;
display: none;
}
.popup .content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
background: #fff;
width: 450px;
height: fit-content;
z-index: 2;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
.popup .close-btn{
position: absolute;
right: 20px;
top: 20px;
width: 30px;
height: 30px;
background: #222;
color: #fff;
font-size: 25px;
font-weight: 600;
line-height:30px;
text-align:center;
border-radius: 50%;
cursor: pointer;
}
.popup:active .overlay{
display: block;
}
.popup:active .content{
transition: all 300ms ease-in-out;
transform: translate(-50%, -50%) scale(1);
}
You should not be querying or manipulating the DOM from React. If you want to toggle a class have your button update your component’s state and then render the markup according to that state.
function MyComponent () {
const [active, setActive] = useState(false);
return (
<div className={active ? 'active' : ''}>
<button onClick={() => setActive(!active)}>Toggle</button>
</div>
)
}
I have pieced together a portfolio website using several tutorials and I can't figure out why the hamburger menu is not visible as it downsizes. It works fine when I take out the main content in the HTML with the sections, but if there is any main content then the burger menu does not appear.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
<title>Portfolio</title>
</head>
<body>
<nav>
<div class="logo">
<h4>Portfolio</h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<main>
<div class="about-area" id="about">
<div class="text-part">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam,
exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis!
Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis
minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio
optio officia suscipit nemo natus!</p>
</div>
</div>
<div class="portfolio-area" id="portfolio">
<div class="text-part">
<h1>Portfolio</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam,
exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis!
Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis
minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio
optio officia suscipit nemo natus!</p>
</div>
</div>
<div class="contact-area" id="contact">
<div class="text-part">
<h1>Contact</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam,
exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis!
Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis
minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio
optio officia suscipit nemo natus!</p>
</div>
</div>
</main>
<script src="app.js"></script>
</body>
</html>
CSS:
* {
margin: 0px; /* Remove unwanted inherent sizing */
padding: 0px;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
nav {
display: flex; /*icons are next to each other */
justify-content: space-around; /* */
align-items: center; /* Center items vertically */
min-height: 8vh;
background-color: #0e9763;
font-family: 'Poppins', sans-serif;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex; /* spreads out text */
justify-content: space-around; /* using flex adds more space around the items using width */
width: 30%;
}
.nav-links li {
list-style: none; /* Removes bullet points */
}
.nav-links a{
color: rgb(226, 226, 226);
text-decoration: none; /* Removes default link colors */
letter-spacing: 3px;
font-size: 14px;
}
.burger {
display: none; /* Hides the burger menu */
cursor: pointer;
}
.burger div { /*the details of the burger menu bars design */
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
/* Main Area Content */
.about-area, .portfolio-area, .contact-area {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
width: 100%;
height: 700px;
}
.text-part {
width: 65%;
height: 80%;
}
h1 {
font-size: 50px;
font-family: 'Audiowide', cursive;
}
p {
font-size: 24px;
line-height: 50px;
}
.about-area {
background: #fefefe;
}
.portfolio-area {
background: #0e9763;
color: #fff;
}
.contact-area {
background: #fefefe;
}
html {
scroll-behavior: smooth;
}
a:hover {
color: #000;
}
/* Quick fix breakpoint between max size and hamburger menu trigger */
#media screen and (max-width:1024px){
.nav-links {
width: 60%;
}
}
#media screen and (max-width:768px){
body {
overflow: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #0e9763;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%); /* Moves content off screen */
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%); /* When button is clicked the nav gets the transform */
}
/* Nav animation */
#keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px,-6px);
}
JS:
const navSlide = () => { //navSlide is = to an anonymous function
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click',() => { //on click run a function
//Toggle Nav
nav.classList.toggle('nav-active');
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation){
link.style.animation = ''
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
}
//Invoke function
navSlide();
Here is a link to the codepen:
https://codepen.io/justadirtgrub/pen/NWGJrde
You need to add z-index css property to class .nav-active to show up in front of main content
const navSlide = () => {
//navSlide is = to an anonymous function
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
const navLinks = document.querySelectorAll(".nav-links li");
burger.addEventListener("click", () => {
//on click run a function
//Toggle Nav
nav.classList.toggle("nav-active");
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = "";
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${
index / 7 + 0.5
}s`;
}
});
//Burger Animation
burger.classList.toggle("toggle");
});
};
//Invoke function
navSlide();
* {
margin: 0px; /* Remove unwanted inherent sizing */
padding: 0px;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
nav {
display: flex; /*icons are next to each other */
justify-content: space-around; /* */
align-items: center; /* Center items vertically */
min-height: 8vh;
background-color: #0e9763;
font-family: "Poppins", sans-serif;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex; /* spreads out text */
justify-content: space-around; /* using flex adds more space around the items using width */
width: 30%;
}
.nav-links li {
list-style: none; /* Removes bullet points */
}
.nav-links a {
color: rgb(226, 226, 226);
text-decoration: none; /* Removes default link colors */
letter-spacing: 3px;
font-size: 14px;
}
.burger {
display: none; /* Hides the burger menu */
cursor: pointer;
}
.burger div {
/*the details of the burger menu bars design */
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
/* Main Area Content */
.about-area,
.portfolio-area,
.contact-area {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
width: 100%;
height: 700px;
}
.text-part {
width: 65%;
height: 80%;
}
h1 {
font-size: 50px;
font-family: "Audiowide", cursive;
}
p {
font-size: 24px;
line-height: 50px;
}
.about-area {
background: #fefefe;
}
.portfolio-area {
background: #0e9763;
color: #fff;
}
.contact-area {
background: #fefefe;
}
html {
scroll-behavior: smooth;
}
a:hover {
color: #000;
}
/* Quick fix breakpoint between max size and hamburger menu trigger */
#media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 768px) {
body {
overflow: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #0e9763;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%); /* Moves content off screen */
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%);
z-index: 100; /* When button is clicked the nav gets the transform */
}
/* Nav animation */
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
<!DOCTYPE html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
<title>Portfolio</title>
</head>
<body>
<nav>
<div class="logo">
<h4>Portfolio</h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<main>
<div class="about-area" id="about">
<div class="text-part">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam,
exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis!
Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis
minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio
optio officia suscipit nemo natus!</p>
</div>
</div>
<div class="portfolio-area" id="portfolio">
<div class="text-part">
<h1>Portfolio</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam,
exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis!
Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis
minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio
optio officia suscipit nemo natus!</p>
</div>
</div>
<div class="contact-area" id="contact">
<div class="text-part">
<h1>Contact</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam,
exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis!
Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis
minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio
optio officia suscipit nemo natus!</p>
</div>
</div>
</main>
</body>
</html>
I've got two different pricing cards:
<div class="card card1" id="open">
<span class=title>Basic</span>
<h1>$99 USD</h1>
<h4>Lorem ipsum dolor sit amet.</h4>
<h2>YOU GET:</h2>
<ul>
<li>Access to AM</li>
<li>Unlimited Households</li>
<li>White-Labeling</li>
</ul>
</div>
<div class="card card2" id="open2">
<span class=title>Pro</span>
<h1>$129 USD</h1>
<h4>Lorem ipsum dolor sit amet.</h4>
<h2>YOU GET:</h2>
<ul>
<li>Cash-Flow Reporting</li>
<li>Beneficiary Visualization</li>
<li>Unlimited TMs</li>
</ul>
</div>
When clicked, each should bring up a different modal:
<div class="modal-container" id="modal_container">
<div class="modal">
<h1>Modal goes here</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consectetur repudiandae quia deleniti nulla, suscipit tempora magnam blanditiis ex culpa mollitia quisquam quod? Dolores, sunt dicta adipisci rem consequuntur fugit repudiandae quia deleniti nulla.</p>
<button id="close">Close me</button>
</div>
<div class="modal-container" id="modal_container2">
<div class="modal">
<h1>Modal 2 goes here</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consectetur repudiandae quia deleniti nulla, suscipit tempora magnam blanditiis ex culpa mollitia quisquam quod? Dolores, sunt dicta adipisci rem consequuntur fugit repudiandae quia deleniti nulla.</p>
<button id="close2">Close me</button>
</div>
All of the ID's are unique. With this JS I am able to bring up the first modal but not the second:
const open = document.getElementById('open');
const modal_container = document.getElementById('modal_container');
const close = document.getElementById('close');
open.addEventListener('click', () => {
modal_container.classList.add('show');
});
close.addEventListener('click', () => {
modal_container.classList.remove('show');
});
I added unique IDs for the second card and modal, but when I pull them into the JS by adding this:
const open2 = document.getElementById('open2');
const modal_container2 = document.getElementById('modal_container2');
const close2 = document.getElementById('close2');
open2.addEventListener('click', () => {
modal_container2.classList.add('show');
});
close2.addEventListener('click', () => {
modal_container2.classList.remove('show');
});
I am not getting the same effect.
Here is the relevant CSS:Added relevant CSS
.modal-container {
background-color: rgba(0,0,0,0.3);
position: fixed;
top:0;
left:0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
}
.modal-container.show {
opacity: 1;
pointer-events: auto;
}
there was some error on your codepen, double body open and close tag, the second modal was inside the first one's container, Ids were duplicated and on the JS side the listeners for the second modal were missing, try this:
const open = document.getElementById('open');
const modal_container = document.getElementById('modal_container');
const close = document.getElementById('close');
const open2 = document.getElementById('open2');
const modal_container2 = document.getElementById('modal_container2');
const close2 = document.getElementById('close2');
open.addEventListener('click', () => {
modal_container.classList.add('show');
});
close.addEventListener('click', () => {
modal_container.classList.remove('show');
});
open2.addEventListener('click', () => {
modal_container2.classList.add('show');
});
close2.addEventListener('click', () => {
modal_container2.classList.remove('show');
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f4efed;
font-family: 'Muli', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
cursor: crosshair;
}
.card {
background-color: #fff;
border-radius: 10px;
padding: 60px 30px;
text-align: center;
max-width: 450px;
min-width: 275px;
margin: 1em;
transition: .2s ease all;
}
.card:hover {
transform: translateY(-20px);
box-shadow: 0 10px 20px rgba(0,0,0,.3);
cursor: pointer;
}
.card1 {
background-image: linear-gradient(to bottom right, #41464d, #2d3137);
color: white;
}
.card2 {
background-image: linear-gradient(to bottom right, #dbb898, #b98351);
color: white;
}
.card .title {
font-size: .8em;
}
.card1 .title{
font-weight: bold;
background-color: #444950;
border-radius: 10px;
padding: 12px 10px;
}
.card2 .title{
font-weight: bold;
background-color: white;
border-radius: 10px;
padding: 12px 10px;
color: #2d3137;
}
h1 {
margin: 30px 0 30px 0;
}
h4 {
font-weight: 100;
font-size: .75em;
}
h2 {
margin: 25px;
font-size: .8em;
}
ul {
font-size: .75em;
line-height: 1.75em;
list-style: none;
}
.modal-container {
background-color: rgba(0,0,0,0.3);
position: fixed;
top:0;
left:0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
}
.modal-container.show {
opacity: 1;
pointer-events: auto;
}
.modal {
background-color: white;
border-radius: 10px;
width: 800px;
max-width: 100%;
padding: 30px 50px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
text-align: center;
}
.modal h1 {
margin: .5em;
}
.modal p {
font-size: 14px;
opacity: 0.7;
}
.modal-container button {
background-color: #444950;
color: white;
border: 0;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
font-size: 14px;
padding: 10px 25px;
margin: 15px 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Pricing Cards</title>
</head>
<body>
<div class="card card1" id="open">
<span class=title>Basic</span>
<h1>$99 USD</h1>
<h4>Lorem ipsum dolor sit amet.</h4>
<h2>YOU GET:</h2>
<ul>
<li>Access to Asset-Map</li>
<li>Unlimited Households</li>
<li>White-Labeling</li>
</ul>
</div>
<div class="card card2" id="open2">
<span class=title>Pro</span>
<h1>$129 USD</h1>
<h4>Lorem ipsum dolor sit amet.</h4>
<h2>YOU GET:</h2>
<ul>
<li>Cash-Flow Reporting</li>
<li>Beneficiary Visualization</li>
<li>Unlimited Target-Maps</li>
</ul>
</div>
<div class="modal-container" id="modal_container">
<div class="modal">
<h1>Modal goes here</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consectetur repudiandae quia deleniti nulla, suscipit tempora magnam blanditiis ex culpa mollitia quisquam quod? Dolores, sunt dicta adipisci rem consequuntur fugit repudiandae quia deleniti nulla.</p>
<button id="close">Close me</button>
</div>
</div>
<div class="modal-container" id="modal_container2">
<div class="modal">
<h1>Modal 2 goes here</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consectetur repudiandae quia deleniti nulla, suscipit tempora magnam blanditiis ex culpa mollitia quisquam quod? Dolores, sunt dicta adipisci rem consequuntur fugit repudiandae quia deleniti nulla.</p>
<button id="close2">Close me</button>
</div>
</div>
</body>
</html>
I was looking to trigger different buttons/modals for each of my sections.
I want on click hit, a modal popup appears with all the article details.
Everything works fine so far but my problem is that my modal is open just once for click.
I was wondering what I have to modify in my Javascript code to make my modal work always open systematically on-click.
Any ideas?
Here my fiddle: https://jsfiddle.net/CAT999/48rd76mp/5/
Snippet code here:
const modalBtns = document.querySelectorAll('.modal-btn');
let overlay;
modalBtns.forEach(btn => {
btn.onclick = function() {
overlay = this.nextElementSibling
overlay.classList.add('overlay--open');
}
})
function closeModal() {
overlay.classList.remove('overlay--open');
}
function onDocumentKeyUp(e) {
if (e.keyCode === 27) {
closeModal();
}
}
function onDocumentClick(e) {
if (e.target === overlay) {
closeModal();
}
}
document.addEventListener('click', onDocumentClick, false);
document.addEventListener('keyup', onDocumentKeyUp, false);
Replace "onclick="document.getElementById('YourModalBox').style.display='none'"" with closeModal() in all close buttons
const modalBtns = document.querySelectorAll('.modal-btn');
let overlay;
modalBtns.forEach(btn => {
btn.onclick = function() {
overlay = this.nextElementSibling
overlay.classList.add('overlay--open');
document.body.classList.add('hidden');
}
})
function closeModal() {
overlay.classList.remove('overlay--open');
document.body.classList.remove('hidden');
}
function onDocumentKeyUp(e) {
if (e.keyCode === 27) {
closeModal();
}
}
function onDocumentClick(e) {
if (e.target === overlay) {
closeModal();
}
}
document.addEventListener('click', onDocumentClick, false);
document.addEventListener('keyup', onDocumentKeyUp, false);
body.hidden{
overflow: hidden;
}
.close-button {
border: none;
display: inline-block;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: red;
text-align: center;
cursor: pointer;
white-space: nowrap
}
.topright {
position: fixed!important;
right: 20px;
top: 20px;
}
*{ z-index: 999999;
margin:0;
padding:0;
}
body, html{
font-size: 16px;
}
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
.img-container {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
padding:20px;
background-color: white;
justify-content: center;
z-index:0;
}
#media only screen and (max-width:800px){
.img-container {
padding:20px;
height: 80vh;
}
}
#media only screen and (max-width:450px){
.img-container {
padding:20px;
height: 82vh;
}
}
#uno{background:purple;}
#due{background: yellow;}
#tre{background:black;}
img {
position:absolute;
border-radius: 20px;
height:100%;
z-index:0;
}
#media only screen and (max-width:800px){
img {
width:95%;
height:80%;
object-fit: cover;
}
}
#media only screen and (max-width:450px){
img {
width:95%;
height:100%;
object-fit: cover;
}
}
.sticky {
position: -webkit-sticky;
position: sticky;
bottom: 20px;
right:20px;
justify-content: space-between;
align-self: flex-end;
margin-left: auto;
}
.sticky-button {
background: none;
-webkit-font-smoothing: antialiased;
-webkit-box-shadow:0 0px 7px rgba(0,0,0,0.4);
box-shadow:0 0px 7px rgba(0,0,0,0.4);
/*padding: 6px 10px;*/
color:white;
font-family:helvetica;
font-weight:600;
font-size: 1rem;
border-radius: 24px;
width: auto;
}
#media only screen and (max-width:800px){
.sticky-button {
width: auto;
font-size: 0.8rem;
}
}
#media only screen and (max-width:450px){
.sticky-button {
width: auto;
font-size: 0.8rem;
}
}
.sticky-button-description {
color: hsla(0,0%,100%,.75);
font-size: 12px;
line-height: 1.4em;
letter-spacing: normal;
font-size: 12px;
line-height: 1.4em;
font-weight:400;
font-family:helvetica;
display:inline;
letter-spacing: normal;
}
#media only screen and (max-width:450px){
.sticky-button-description{
}
}
.sticky-button-break {
padding:0.3rem;
}
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
.break{height:200px;
width:100%;
background:black;
margin:0;
padding:0;}
.break-2{height:900px;
width:100%;
background:red;
margin:0;
padding:0;}
.btn-1 {
border: none;
border-radius: 24px;
color: white;
background-color:#3E3E3E;
padding: 10px 18px;
font-size: 16px;
width: 100%;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
transition: transform .3s ease;
z-index:100;
}
.btn-1:active {
transform: scale(10.9);
opacity:0;
z-index:20;
transition: transform .3s ease;
z-index:100;
}
.btn-2 {
border: none;
border-radius: 24px;
color: white;
background-color:#3E3E3E;
padding: 10px 18px;
font-size: 16px;
width: 100%;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
transition: transform .3s ease;
z-index:50;
}
.btn-2:active {
position:sticky;
transform: scale(10.9);
z-index:50;
}
.btn-3 {
border: none;
border-radius: 24px;
color: white;
background-color:#3E3E3E;
padding: 10px 18px;
font-size: 16px;
width: 100%;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
transition: transform .3s ease;
z-index:30;
}
.btn-3:active {
transform: scale(10.9);
z-index:30;
}
/* Modal */
.overlay {
position: fixed;
overflow: hidden;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: black;/*rgba(0, 0, 0, .55);*/
pointer-events: none;
}
.overlay, .modal {
opacity: 0;
transition: .5s;
}
.overlay--open {
opacity: 1;
pointer-events: auto;
}
.overlay--open .modal {
opacity: 1;
transform: none;
}
.modal {
position: fixed;
width: 100%;
margin: 15vh auto 0;
background: black;
color:#fff;
transform: translateY(80%) scale(.8);
transition-timing-function: cubic-bezier(.3, 0, 0, 1.3);
transition-delay: .4s;
text-align: center;
font-size: 26px;
font-weight:400;
}
/*MODAL TRIGGER*/
/*MODAL TRIGGER*/
<!--1--><!--1--><!--1--><!--1--><!--1--><!--1--><!--1-->
<!--SECTION-1-->
<!-- img-container -->
<!-- img-container -->
<!-- img-container -->
<!-- img-container -->
<div class="img-container" id="uno">
<img src="https://assets.vogue.com/photos/5cd30b6bd2f46d2eca29ab09/master/w_2560%2Cc_limit/virgil-abloh-vogue-june-2019-issue.jpg" alt="Smiley face">
<div class="sticky">
<div class="sticky-button">
<!--MODAL-1-->
<button class='btn-1 modal-btn'>Open Modal</button><div class="overlay" id="YourModalBox">
<span onclick="closeModal()" class="close-button topright">×</span><div class="modal"><span>
Title Description-1 👋 🌎<br>
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt</span></div></div>
<!--MODAL-1-->
</div></div></div>
<!--1--><!--1--><!--1--><!--1--><!--1--><!--1--><!--1-->
<!--2--><!--2--><!--2--><!--2--><!--2--><!--2--><!--2-->
<!--SECTION-2-->
<!-- img-container -->
<!-- img-container -->
<!-- img-container -->
<!-- img-container -->
<div class="img-container" id="due">
<img src="https://i.pinimg.com/originals/90/ec/76/90ec76614129cba11f178821e59a99f8.jpg" alt="Smiley face">
<div class="sticky">
<div class="sticky-button">
<!--MODAL-2-->
<button class='btn-2 modal-btn'>Karl info</button><div class="overlay" id="YourModalBox2">
<span onclick="closeModal()" class="close-button topright">×</span><div class="modal"><span>
Title Description-1 👋 🌎<br>
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt</span></div></div>
<!--MODAL-2-->
</div></div></div>
<!--2--><!--2--><!--2--><!--2--><!--2--><!--2--><!--2-->
<!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3-->
<!-- img-container -->
<!-- img-container -->
<!-- img-container -->
<!-- img-container -->
<div class="img-container" id="tre">
<img src="https://media.gq.com/photos/5da1fd854e024d0009825bfd/4:3/w_2520,h_1891,c_limit/pharrell-williams-cover-gq-november-2019-02-16x9.jpg" alt="Smiley face">
<div class="sticky"><div class="sticky-button">
<!--MODAL-3-->
<button class='btn-3 modal-btn'>Tomoaki Nagao info</button>
<div class="overlay" id="YourModalBox3">
<span onclick="closeModal()" class="close-button topright">×</span>
<div class="modal"><span>Title Description-3 👋 🌎<br>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt</span></div></div>
<!--MODAL-3-->
</div></div></div>
<!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3-->
<!-- REMOVE!! -->
<div class="break-2"></div>
<!-- REMOVE!! -->