I have bottom fixed footer and content that appears at the bottom too, but I want to make my footer go up when that content is loaded (and kinda stick it to the top of the content). How do I do that?
For styling I'm using SASS
<footer>
<div className="social-icons">
<div className="icon">
<a href="http://fb.me">
<i className="fab fa-facebook-f"></i>
</a>
</div>
<div className="icon">
<a href="https://twitter.com/">
<i className="fab fa-twitter"></i>
</a>
</div>
<div className="icon">
<a href="https://www.linkedin.com/">
<i className="fab fa-linkedin-in"></i>
</a>
</div>
<div className="icon">
<a href="https://plus.google.com/discover">
<i className="fab fa-google-plus-g"></i>
</a>
</div>
</div>
<div class="arrow"></div>
</footer>
sass:
footer
position: fixed
z-index: 10
width: 100vw
bottom: 0
display: flex
justify-content: space-between
box-sizing: border-box
flex-wrap: nowrap
padding: 0 6.25vw 2.6042vw 6.35vw
The content which has to be loaded at the bottom and move the footer up:
<div class="content"></div>
sass
.content
position: absolute
bottom: 0
z-index: 30
height: 6.25vw
width: 100%
background-color: $white
See if this is what you've looking for. Try changing the height of the .content, the footer will always stick to the top of the content part, if there is no content in the .content part, the footer will stick to the bottom of the page.
body{
width: 100vw;
margin:0;
padding:0;
}
.upper-body{
display: flex;
width: 100%;
}
.footer-content{
display: flex;
flex-direction: column;
position: fixed;
z-index: 10;
width: 100vw;
bottom: 0;
justify-content: space-between;
box-sizing: border-box;
flex-wrap: nowrap;
background-color: yellow;
}
footer{
position: relative;
z-index: 10;
width: 100vw;
bottom: 0;
display: flex;
justify-content: space-between;
box-sizing: border-box;
flex-wrap: nowrap;
padding: 0 6.25vw 2.6042vw 6.35vw;
background-color: yellow;
}
.content{
display: flex;
position: relative;
bottom: 0;
z-index: 2;
height: 6.25vw;
width: 100vw;
background-color: gray;
}
<div class="upper-body">
</div>
<div class="footer-content">
<footer>
<div className="social-icons">
<div className="icon">
<a href="http://fb.me">
<i className="fab fa-facebook-f"></i>
</a>
</div>
<div className="icon">
<a href="https://twitter.com/">
<i className="fab fa-twitter"></i>
</a>
</div>
<div className="icon">
<a href="https://www.linkedin.com/">
<i className="fab fa-linkedin-in"></i>
</a>
</div>
<div className="icon">
<a href="https://plus.google.com/discover">
<i className="fab fa-google-plus-g"></i>
</a>
</div>
</div>
<div class="arrow"></div>
</footer>
<div class="content">
</div>
</div>
Related
I have a sidenav menu with some Js, I would like to add the overlay but I don't know how to do it, sorry but I'm a beginner. I tried several ways without success, even with a div that closes all content, but then I took it out because it broke the menu function. Can someone help me ? I appreciate any response, thanks.
const toggle = document.getElementById('toggle');
const sidenav = document.getElementById('sidenav');
document.onclick = function(e){
if(e.target.id !== 'sidenav' && e.target.id !== 'toggle' ) {
toggle.classList.remove('active');
sidenav.classList.remove('active');
}
}
toggle.onclick = function(){
toggle.classList.toggle('active');
sidenav.classList.toggle('active');
}
#toggle {
display: flex;
align-content: center;
justify-content: flex-end;
align-items: center;
font-size: 18px;
margin: 10px;
padding: 10px;
color: black;
border: 1px solid black;
}
#toggle::before {
font-family: fontAwesome;
content:'Menu Closed';
color: black;
}
#toggle.active::before {
font-family: fontAwesome;
content:'Menu Open';
color: black;
}
/*Sidebar*/
.sidenav_box {
margin-top: 10%;
padding: 25px;
}
#sidenav {
position: fixed;
top: 0;
left:-100%;
width: 80%;
height: 100vh;
background: black;
transition: 0.3s;
z-index: 999;
}
#sidenav.active {
left: 0px;
width: 80%;
}
<div id="toggle"></div>
<div id="sidenav">
<div class="sidenav_box">
<div class="user_menu header">
<span class="display name">Ciao [display_name]</span>
<span class="display mail">[display_email]</span>
</div>
<hr class="solid">
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user"></i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping"></i>
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear"></i>
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
When you say div with overlay, do you mean having the background of your nav menu be semi-transparent like so? If so you just need the opacity attribute but you might need to drop the z-index down if you want it to appear behind your other elements like the nav items.
const toggle = document.getElementById('toggle');
const sidenav = document.getElementById('sidenav');
const overlay = document.getElementById('contentOverlay');
document.onclick = function(e) {
if (e.target.id !== 'sidenav' && e.target.id !== 'toggle') {
toggle.classList.remove('active');
sidenav.classList.remove('active');
overlay.classList.remove('active');
}
}
toggle.onclick = function() {
toggle.classList.toggle('active');
sidenav.classList.toggle('active');
overlay.classList.toggle('active');
}
#toggle {
display: flex;
align-content: center;
justify-content: flex-end;
align-items: center;
font-size: 18px;
margin: 10px;
padding: 10px;
color: black;
border: 1px solid black;
}
#toggle::before {
font-family: fontAwesome;
content: 'Menu Closed';
color: black;
}
#toggle.active::before {
font-family: fontAwesome;
content: 'Menu Open';
color: black;
}
/*Sidebar*/
.sidenav_box {
margin-top: 10%;
padding: 25px;
}
#sidenav {
position: fixed;
top: 0;
left: -100%;
width: 50%;
height: 100vh;
background: black;
opacity: 1;
transition: 0.3s;
z-index: 999;
}
#sidenav.active {
left: 0px;
width: 50%;
}
#contentOverlay {
position: fixed;
top: 0;
left: -100%;
width: 100%;
height: 100vh;
opacity: 1;
object-fit: cover;
transition: 0.3s;
z-index: 1;
}
#contentOverlay.active {
left: 0px;
width: 100%;
}
<div id="toggle"></div>
<div id="sidenav">
<div class="sidenav_box">
<div class="user_menu header">
<span class="display name">Ciao [display_name]</span>
<span class="display mail">[display_email]</span>
</div>
</div>
<hr class="solid">
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user"></i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping"></i>
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear"></i>
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
<img src="https://i.imgur.com/rsSBOSd.jpeg" id="contentOverlay" />
the way i add overlay is i wrap all the content within another div and use a ::after , then i color the after element, then i apply a z-index for the content inside to show up on top, something like this -
header .nav-div {
z-index: 1004;
margin-left: 0;
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
transition: clip-path 0.3s linear;
}
header .nav-div::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.75;
}
header .nav-div.active {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
header .nav-div .close {
display: inline-block;
height: 2rem;
position: absolute;
top: 2rem;
right: 2rem;
cursor: pointer;
}
header .nav-div .nav-div-mobile {
z-index: 1005;
background-color: white;
height: 100%;
width: 70%;
}
here .nav-div::after is working as my overlay.
If, I put a opacity on .nav-div this will reduce opacity on all my content inside it. Hence, I put the opacity on the ::after which covers the entire .nav-div, and my main nav tag is inside my .nav-div-mobile(for extra styling purpose).
Putting the .nav-div-mobile on top of the .nav-div is important otherwise it will be behind the colored ::after element
So I've got some code for a drop-down infobox and it has some Javascripts attached to it. It works perfectly but I'm now trying to duplicate it for a second box below, but I'm getting a few bugs.
In order to duplicate this, do I just copy and paste the script and HTML and change:
handleClick() to handleClick2()
drop_down to drop_down2
product_section to product_section2
or is there an easier way to attaching the same Javascript to two boxes?
var show = false;
const handleClick = () => {
const element = document.querySelector(".drop_down");
const product = document.querySelector(".product_section");
if (!show) {
element.innerHTML = `close <i class="fas fa-angle-up"></i>`;
product.style.display = "block";
show = true;
} else {
element.innerHTML = `more info <i class="fas fa-angle-down"></i>`;
product.style.display = "none";
show = false;
}
};
<div style="margin-top: 50px">
<div class="box">
<div class="ranked">
<div class="badge_one">
<h2>1</h2>
</div>
<div class="badge_two">
<p>16% off</p>
</div>
</div>
<img src="https://m.media-amazon.com/images/I/41HiQaqjI-L.jpg" alt="product" class="product_image" />
<div class="overview_section">
<p class="title">
Panasonic Lumix DMC-TZ57EB-K Compact Digital Camera - Black (16 MP, 20x Optical Zoom)
</p>
<p class="company">Panasonic</p>
<a href="#" class="drop_down" onclick="handleClick()">
More info <i class="fas fa-angle-down"></i>
</a>
</div>
<div class="price_section">
<div class="section_one">
<p class="price">
9.9
<span>
<i class="fas fa-check"></i>
</span>
</p>
<div class="btn_block">
<button class="btn">
<span class="btn_label">view product</span>
</button>
</div>
</div>
<div class="section_two">
compare price (2)
Buy it on Amazon
</div>
</div>
</div>
<div class="product_section">
<div class="product_info">
<p class="heading">product hightlights</p>
<ul class="features fa-ul">
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
20x optical zoom lens (24-480mm) with 40x intelligent zoom
</span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 25p mp4 full hd video recording </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 16 megapixel 1/2 33" high sensitivity mos sensor </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
3" 1040k-dot lcd with 180 tilting lcd for self shooting
</span>
</li>
</ul>
<div class="divider"></div>
<div class="heading">
<span>More deals</span>
</div>
<div class="deals">
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
</div>
</div>
</div>
</div>
body {
box-sizing: border-box;
background-color: #f7f7f7;
font-family: montserrat, sans-serif;
}
.box {
position: relative;
width: 80vw;
margin: 0 auto;
display: flex;
justify-content: space-around;
padding: 10px;
background-color: #ffffff;
box-shadow: 0 2px 10px 0 rgba(78, 137, 175, 0.15);
line-height: 28px;
font-size: 20px;
text-align: left;
}
.ranked {
position: absolute;
left: -25px;
top: -25px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.badge_one {
width: 52px;
height: 52px;
background-color: #00113d;
border-radius: 50%;
color: #ffffff;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
z-index: 3;
}
.badge_two {
width: 82px;
height: 32px;
background-color: #e7cd60;
border-radius: 20px;
margin-right: 5px;
margin-left: -20px;
color: black;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
font-size: 12px;
text-align: center;
padding-left: 10px;
}
.product_image {
width: 160px;
height: 100px;
padding: 40px 20px;
}
.overview_section {
display: flex;
flex-direction: column;
justify-content: center;
width: 55%;
}
.title {
color: #8f2e53;
margin-bottom: 10px;
cursor: pointer;
}
.title:hover {
color: #4a90e2;
transition: all 0.4s ease-in-out;
}
.company {
color: #001143;
font-weight: 700;
margin-bottom: 15px;
cursor: pointer;
}
.company:hover {
color: #4a90e2;
transition: all 0.4s ease-in-out;
}
.hide { display: none;
}
.drop_down {
font-size: 18px;
font-weight: 500;
color: #8f2e53;
margin-top: 5px;
cursor: pointer;
text-transform: capitalize;
}
.drop_down:hover {
text-decoration-color: #e7cd60;
}
.price_section {
border-left: 1px solid rgba(78, 137, 175, 0.15);
width: 30%;
/* min-width: 130px; */
margin-left: 25px;
display: flex;
flex-direction: column;
margin-top: 5px;
}
.section_one,
.section_two {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.price {
font-size: 35px;
font-weight: 500;
line-height: 35px;
color: #78c02a;
margin-bottom: 0;
}
.price span {
font-size: 25px;
font-weight: 100;
padding-left: 5px;
}
.btn_block {
width: 100%;
padding: 0 20px;
margin: 10px 0;
text-align: center;
}
.btn {
color: #ffffff;
background-color: #78c02a;
border: none;
text-transform: uppercase;
border-radius: 6px;
padding: 18px 60px;
cursor: pointer;
}
.btn:hover {
background: #92e879;
transition: all 0.4s ease-in-out;
}
.btn:focus {
outline: 0;
}
.btn_label {
font-size: 15px;
font-weight: 400;
letter-spacing: 0.35px;
text-transform: uppercase;
}
.info_one {
color: #999;
cursor: pointer;
font-family: noto sans, sans-serif;
font-size: 14px;
margin-top: 5px;
text-transform: capitalize;
}
.info_two {
color: #17baef;
text-decoration: none;
}
.product_section {
display: none;
width: 81vw;
margin: 0 auto;
border-radius: 4px;
background: #fff;
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.05);
}
.product_info {
border-top: 2px solid #e7cd60;
padding: 25px 50px 25px 70px;
background-color: #e9f5fd;
}
.heading {
font-weight: 500;
font-family: montserrat, sans-serif;
padding: 10px 0;
color: #00113d;
text-transform: capitalize;
font-size: 22px;
}
.features {
color: #00113d !important;
list-style: none;
}
.feature_item {
line-height: 1.5;
font-weight: 300;
font-family: montserrat, sans-serif;
margin: 20px 0;
font-size: 16px;
cursor: pointer;
}
.feature_item:hover {
color: #638043;
transition: all 0.3s ease-in-out;
}
.feature_item i {
color: #78c02a;
}
.divider {
width: 100%;
height: 1px;
margin: 25px 0;
background-color: #e9e9e9;
}
.deals {
display: flex;
flex-direction: row;
justify-content: center;
gap: 2rem;
margin-top: 10px;
}
.deal_item {
display: flex;
flex-direction: column;
align-items: center;
}
.product_logo {
max-width: 70px;
max-height: 40px;
}
.product_price {
height: 40px;
display: flex;
line-height: 1.1;
flex-direction: column;
justify-content: center;
font-size: 20px;
margin: 20px 0;
font-family: "Montserrat", sans-serif;
}
.product_price small {
margin: 0 auto;
font-size: 12px;
}
.product_btn {
color: #ffffff;
background-color: #78c02a;
border: none;
text-transform: uppercase;
border-radius: 6px;
padding: 15px;
cursor: pointer;
}
.product_btn:hover {
background: #92e879;
transition: all 0.4s ease-in-out;
}
.product_btn:focus {
outline: 0;
}
#media only screen and (max-width: 776px) {
.box {
width: 90vw;
position: relative;
flex-direction: column;
margin: 0px auto;
}
.ranked {
left: 15px;
top: 15px;
}
.product_image {
align-self: flex-end;
}
.company {
order: -1;
}
.price_section {
width: 100%;
margin-left: 0px;
}
.section_one {
flex-direction: row;
justify-content: space-between;
padding-left: 10px;
}
.section_two {
flex-direction: row;
justify-content: space-evenly;
margin-bottom: 10px;
}
.info_one {
visibility: hidden;
}
.info_two {
font-size: 15px;
}
.btn_block {
/* width: 40% !important; */
width: 40vw;
}
.btn {
padding: 9px 30px;
}
.overview_section {
width: 100%;
margin: 0 10px;
}
.drop_down {
width: 90vw;
position: absolute;
bottom: -45px;
left: 0;
padding: 10px;
text-align: center;
background-color: #e9f5fd;
color: #1f1740;
font-weight: 900;
text-transform: uppercase;
}
.product_section {
width: 93vw;
}
.product_info {
padding: 20px 5px;
}
.heading {
padding: 10px 0 5px 0px;
font-size: 20px;
}
.features {
margin-left: 5px;
}
.feature_item {
margin: 10px 0;
font-size: 14px;
}
.divider {
margin: 15px 0;
}
.deals {
margin-top: 5px;
}
.product_logo {
max-width: 60px;
max-height: 30px;
margin-top: 5px;
}
.product_price {
font-size: 16px;
margin: 10px 0;
}
.product_btn {
padding: 10px 10px;
}
}
You need to delegate from the outer container
document.getElementById("container").addEventListener("click",function(e) {
const tgt = e.target;
if (tgt.classList.contains("drop_down")) {
e.preventDefault();
const parent = tgt.closest(".box").parentNode; // or give the <div style="margin-top: 50px"> a class
const element = parent.querySelector(".drop_down");
const product = parent.querySelector(".product_section");
product.classList.toggle("hide")
element.innerHTML = product.classList.contains("hide") ? `more info <i class="fas fa-angle-down"></i>` :`close <i class="fas fa-angle-up"></i>`;
}
})
.hide { display:none; }
<div id="container">
<div style="margin-top: 50px">
<div class="box">
<div class="ranked">
<div class="badge_one">
<h2>1</h2>
</div>
<div class="badge_two">
<p>16% off</p>
</div>
</div>
<img src="https://m.media-amazon.com/images/I/41HiQaqjI-L.jpg" alt="product" class="product_image" />
<div class="overview_section">
<p class="title">
Panasonic Lumix DMC-TZ57EB-K Compact Digital Camera - Black (16 MP, 20x Optical Zoom)
</p>
<p class="company">Panasonic</p>
<a href="#" class="drop_down">
More info <i class="fas fa-angle-down"></i>
</a>
</div>
<div class="price_section">
<div class="section_one">
<p class="price">
9.9
<span>
<i class="fas fa-check"></i>
</span>
</p>
<div class="btn_block">
<button class="btn">
<span class="btn_label">view product</span>
</button>
</div>
</div>
<div class="section_two">
compare price (2)
Buy it on Amazon
</div>
</div>
</div>
<div class="product_section hide">
<div class="product_info">
<p class="heading">product hightlights</p>
<ul class="features fa-ul">
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
20x optical zoom lens (24-480mm) with 40x intelligent zoom
</span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 25p mp4 full hd video recording </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 16 megapixel 1/2 33" high sensitivity mos sensor </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
3" 1040k-dot lcd with 180 tilting lcd for self shooting
</span>
</li>
</ul>
<div class="divider"></div>
<div class="heading">
<span>More deals</span>
</div>
<div class="deals">
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div style="margin-top: 50px">
<div class="box">
<div class="ranked">
<div class="badge_one">
<h2>1</h2>
</div>
<div class="badge_two">
<p>16% off</p>
</div>
</div>
<img src="https://m.media-amazon.com/images/I/41HiQaqjI-L.jpg" alt="product" class="product_image" />
<div class="overview_section">
<p class="title">
Panasonic Lumix DMC-TZ57EB-K Compact Digital Camera - Black (16 MP, 20x Optical Zoom)
</p>
<p class="company">Panasonic</p>
<a href="#" class="drop_down">
More info <i class="fas fa-angle-down"></i>
</a>
</div>
<div class="price_section">
<div class="section_one">
<p class="price">
9.9
<span>
<i class="fas fa-check"></i>
</span>
</p>
<div class="btn_block">
<button class="btn">
<span class="btn_label">view product</span>
</button>
</div>
</div>
<div class="section_two">
compare price (2)
Buy it on Amazon
</div>
</div>
</div>
<div class="product_section">
<div class="product_info">
<p class="heading">product hightlights</p>
<ul class="features fa-ul">
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
20x optical zoom lens (24-480mm) with 40x intelligent zoom
</span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 25p mp4 full hd video recording </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 16 megapixel 1/2 33" high sensitivity mos sensor </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
3" 1040k-dot lcd with 180 tilting lcd for self shooting
</span>
</li>
</ul>
<div class="divider"></div>
<div class="heading">
<span>More deals</span>
</div>
<div class="deals">
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
</div>
</div>
</div>
</div>
Here's a basic concept without the use of inline JavaScript on* handlers.
Use the ::after pseudo to style your buttons
Use a state class like .is-active to style the active button
Use a utility class like .u-none to hide the element
Use data-* attribute to store into it the desired target selector
Use JavaScript .addEventListener() and .classList.toggle()
document
.querySelectorAll('[data-toggle]')
.forEach( btn =>
btn.addEventListener('click', ev =>
{
ev.preventDefault()
const el = ev.currentTarget
, target = el.dataset.toggle
;
el.classList.toggle('is-active')
document.querySelector(target).classList.toggle('u-none')
}
)
)
[data-toggle] {
cursor: pointer;
}
[data-toggle]::after {
font-family: "Font Awesome 5 Free";
font-weight: 900; /* Needed for Font Awesome to work */
content: "\f107";
padding-left: 5px;
}
[data-toggle].is-active::after {
content: "\f106";
}
/* Utility classes */
.u-none {
display: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<a data-toggle="#product_23">More info</a>
<div id="product_23" class="u-none">Product section.....</div>
I would pass an argument id to handleClick and use it like :
"drop_down"+id and "product_section"+id
and call handleClick(1) or handleClick(2)
you'd have to copy-paste the html though.
I hope it helped ^^
Edit :
I'll try to make it more clear and make it look less like a comment.
Explaination:
My suggestion is to make the handleClick() not a function that is unique to one element but make it so that it can depends on multiple elements.
But how?
Well I first changed the var show = false (lign 1) to a var show = [] to make it a set of states instead of a state (one state per element).
I then added an argument named a in the handleClick() giving me const handleClick = (a) => {...}. This a will be the id of the element we want to change.
I then add my a to the selected classes: const element = document.querySelector(".drop_down"+a);
const product = document.querySelector(".product_section"+a);
I change the classes names and function accordingly to the previous step:
<a href="#" class="drop_down drop_down1" onclick="handleClick(1)"> //lign 17
<div class="product_section1"> //lign 41
We now change all the show to show[a] in the javascript file
Conclusion and final code
You'd want to make the href="" so it doesn't go up when you click. So here you go I hope it helped ^^
index.html
<div style="margin-top: 50px">
<div class="box">
<div class="ranked">
<div class="badge_one">
<h2>1</h2>
</div>
<div class="badge_two">
<p>16% off</p>
</div>
</div>
<img src="https://m.media-amazon.com/images/I/41HiQaqjI-L.jpg" alt="product" class="product_image" />
<div class="overview_section">
<p class="title">
Panasonic Lumix DMC-TZ57EB-K Compact Digital Camera - Black (16 MP, 20x Optical Zoom)
</p>
<p class="company">Panasonic</p>
<a href="" class="drop_down1" onclick="handleClick(1)">
More info <i class="fas fa-angle-down"></i>
</a>
</div>
<div class="price_section">
<div class="section_one">
<p class="price">
9.9
<span>
<i class="fas fa-check"></i>
</span>
</p>
<div class="btn_block">
<button class="btn">
<span class="btn_label">view product</span>
</button>
</div>
</div>
<div class="section_two">
compare price (2)
Buy it on Amazon
</div>
</div>
</div>
<div class="product_section product_section1">
<div class="product_info">
<p class="heading">product hightlights</p>
<ul class="features fa-ul">
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
20x optical zoom lens (24-480mm) with 40x intelligent zoom
</span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 25p mp4 full hd video recording </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 16 megapixel 1/2 33" high sensitivity mos sensor </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
3" 1040k-dot lcd with 180 tilting lcd for self shooting
</span>
</li>
</ul>
<div class="divider"></div>
<div class="heading">
<span>More deals</span>
</div>
<div class="deals">
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="index.js"></script>
index.js
var show = [];
const handleClick = (a) => {
const element = document.querySelector(".drop_down"+a);
const product = document.querySelector(".product_section"+a);
if (!show[a]) {
element.innerHTML = `close <i class="fas fa-angle-up"></i>`;
product.style.display = "block";
show[a] = true;
} else {
element.innerHTML = `more info <i class="fas fa-angle-down"></i>`;
product.style.display = "none";
show[a] = false;
}
};
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How to place div side by side
(7 answers)
Closed 2 years ago.
I have created these divs that serve as buttons to redirect to a different site page, and for some reason I cannot get them to place side by side. I have tried everything including flexbox, and I cannot seem to get the divs side by side. What am I doing wrong.
IS there an easier way to go about what I want to accomplish? Or is it a simple easy mistake that I looked over.
html, body {
margin: 0;
height: 100%;
}
.img_container {
border: none;
width: 70%;
padding: 10px;
height: auto;
display: block;
justify-content: center;
align-items: center;
}
a {
text-decoration: none;
}
a:link, a:visited {
color: #b3ab7d;
}
a:hover {
color: #b3ab7d;
}
.background {
background: #104723;
width: 150px;
height: 150px;
}
.img {
width: 70%;
display: block;
margin: 0 auto;
}
a {
display: block;
text-align: center;
}
.text{
font-size: 70%;
}
*{
box-sizing: border-box;
}
.center {
justify-content: center;
align-items: center;
}
<div class="center">
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Access Control (AC)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Identification & Authentication (IA)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Media Protection (MP)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Physical Protection (PE)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">System & Communications Protection (SC)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">System & Information Integrity (SI)</span>
</div>
</a>
</div>
</div>
You have forgotten display: flex; in your .center class name.
Check your updated snippet.
html, body {
margin: 0;
height: 100%;
}
.img_container {
border: none;
width: 70%;
padding: 10px;
height: auto;
display: block;
justify-content: center;
align-items: center;
}
a {
text-decoration: none;
}
a:link, a:visited {
color: #b3ab7d;
}
a:hover {
color: #b3ab7d;
}
.background {
background: #104723;
width: 150px;
height: 150px;
}
.img {
width: 70%;
display: block;
margin: 0 auto;
}
a {
display: block;
text-align: center;
}
.text{
font-size: 70%;
}
*{
box-sizing: border-box;
}
.center {
display: flex;
justify-content: center;
align-items: center;
}
<div class="center">
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Access Control (AC)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Identification & Authentication (IA)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Media Protection (MP)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Physical Protection (PE)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">System & Communications Protection (SC)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="https://www.google.com" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">System & Information Integrity (SI)</span>
</div>
</a>
</div>
</div>
Display flex; seems to be missing.
.center {
display: flex;
justify-content: center;
align-items: center;
}
Just remove width from below class and add float left or right as pr need.
.img_container {
border: none;
width: auto;
padding: 10px;
height: auto;
display: block;
justify-content: center;
align-items: center;
float: left;
}
here is the production build https://daotec.herokuapp.com/
this is what i see in my localhost
on hover the button is blue on the production build on hover it turns green and also has a white border where in localhost it has a white border and
the icons are centered where you can see in production build they are not. Does anyone know why this is happening? Also could anyone tell me how to get my container of hectagons to be in the very center of the screen? here is my code
CSS
.icon {
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.hex {
display: flex;
flex-direction: row;
}
.hexs {
justify-content: center;
padding: 30px;
align-content: center;
display: flex;
flex-direction: row;
}
.hex1 {
display: flex;
flex-direction: column;
width: 230px;
}
#fastest {
padding-left: 40px;
}
.para {
width: 200px;
position: absolute;
}
.hexa {
width: 104px;
height: 60px;
background-color: blueviolet;
}
.tri1 {
width: 0;
border-bottom: 30px solid blueviolet;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
.tri2 {
width: 0;
border-top: 30px solid blueviolet;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
.container {
filter: drop-shadow(0 0 0.75rem black);
}
HTML
<div className="head">
<h1>About</h1>
</div>
<hr />
<div className="hexs">
<div className="hex">
<div className="hex1">
<div className="container">
<div className="tri1"></div>
<div className="hexa">
<i className="fas fa-tachometer-alt icon fa-3x"></i>
</div>
<div className="tri2"></div>
</div>
<div className="fast">
<h3 id="fastest">Fast</h3>
</div>
<div>
<p className="para">
Fast load times and lag free interaction, my highest priority.
</p>
</div>
</div>
<div className="hex1">
<div className="container">
<div className="tri1"></div>
<div className="hexa">
<i className="fas fa-laptop-code icon fa-3x"></i>
</div>
<div className="tri2"></div>
</div>
<div>
<h3>Responsive</h3>
<p>My layouts will work on any device, big or small.</p>
</div>
</div>
</div>
<div className="hex">
<div className="hex1">
<div className="container">
<div className="tri1"></div>
<div className="hexa">
<i className="far fa-lightbulb icon fa-3x"></i>
</div>
<div className="tri2"></div>
</div>
<div>
<h3>Intuitive</h3>
<p>Strong preference for easy to use, intuitive UX/UI.</p>
</div>
</div>
<div className="hex1">
<div className="container">
<div className="tri1"></div>
<div className="hexa">
<i className="fas fa-rocket icon fa-3x"></i>
</div>
<div className="tri2"></div>
</div>
<div>
<h3>Dynamic</h3>
<p>
Websites don't have to be static, I love making pages come to
life.
</p>
</div>
</div>
</div>
</div>
Right now I have a sub nav container inside of my "services" menu item. My issue is whenever I hover over the sub nav container, it will show up, but I only want it to display when I hover over the text "services".
I don't know how I am able to solve this because the entire sub nav is located inside of my services text li tags, so no matter where I hover, it always triggers it because everything is located inside of the li "services" tag
Here is a codepen showing issue. https://codepen.io/designextras/pen/RwrqzwN
I only want the sub nav to show when I hover over the text "services", You might have to refresh the screen multiple times to see the issue. If you just move the mouse across the blank white area, it will still trigger the sub nav because that div is being hovered over.
Here is the services li code with the sub nav code inside
<li id="services">Services
<div class="sub-nav" id="sub-nav">
<div class="sub-nav-col left">
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
</div>
<div class="sub-nav-col right">
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
</div>
</div>
</li>
I feel like the only way is to use Javascript and hard code the html through there, but that seems excessive and doesn't make sense for such a simple hover effect.
Let me know what you think
You can use simply display:none to hide your submenu and display:flex in active class to toggle the sub menu. In javascript, you are just using mouseenter event, here you can play with mouseover and mouseout event and make active class toggle on hover. anchor text display value should be inline block for better cursor position.
You can also make this hover functionality without javascript.
Just add this css in your css file.
#services:hover #sub-nav {
display: flex;
}
and remove JS code.
const services = document.querySelector('#services')
const subNav = document.querySelector('#sub-nav')
services.addEventListener('mouseenter', e => {
subNav.classList.add('active')
});
services.addEventListener('mouseout', e => {
subNav.classList.remove('active')
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
-webkit-font-smoothing: antialiased;
}
.global-header {
position: fixed;
top: 0;
width: 100%;
background: red;
z-index: 999;
}
.top {
}
.row {
display: flex;
align-items: center;
height: 80px;
padding: 0;
max-width: 1000px;
margin: 0 auto;
}
.global-logo {
display: inline-block;
}
.nav-menu {
display: inline-block;
vertical-align: top;
margin-top: 22px;
margin-left: 50px;
}
ul {
font-size: 13px;
line-height: 21px;
margin:0;
padding:0;
display: flex;
align-items: center;
}
li:first-child {
margin-left: 0;
}
li {
display: inline-block;
margin-left: 28px;
position: relative;
}
li > a {
font-size: 14px;
text-transform: uppercase;
letter-spacing: .5px;
text-decoration: none;
display: inline-block;
padding:0 0 22px 0;
}
.sub-nav {
background: blue;
border-radius: 5px;
box-shadow: 0 10px 8px 0 rgba(0,0,0,0.2);
display: none;
left: -120px;
padding: 16px;
position: absolute;
top: 100%;
transition: .1s all ease-in-out;
width: 628px;
}
.active{
display: flex;
}
.sub-nav-col {
display: flex;
flex-direction: column;
flex: 1;
max-width: 50%;
background: red;
}
.left {
margin-right: 4px;
}
.right {
margin-left: 4px;
}
.sub-nav-box {
background: #FAFAFA;
border-radius: 3px;
display: flex;
flex: 0 1 auto;
flex-direction: column;
font-size: 14px;
justify-content: center;
margin: 4px 0;
min-height: 100px;
padding: 24px 14px 24px 96px;
position: relative;
transition: .1s all ease-in-out;
text-decoration: none;
}
.icon-background {
height: 64px;
width: 64px;
background: #252222;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 14px;
}
.icon {
color: #fff;
font-size: 20px;
}
.sub-nav-box h4 {
font-size: 12px;
letter-spacing: 0.9px;
line-height: 16px;
margin: 0 0 .5em;
padding: 0;
text-transform: uppercase;
}
.sub-nav-box p {
color: red;
line-height: 16px;
width: 100%;
}
.sub-nav::after {
bottom: 100%;
left: 140px;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border: solid transparent;
border-color: rgba(252,252,252,0);
border-bottom-color: #FCFCFC;
border-width: 20px;
border-radius: 2px;
margin-left: -20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Nav Menu</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
</head>
<body>
<header class="global-header">
<div class="top">
<div class="row">
<div class="global-logo">
Logo
</div>
<nav class="nav-menu">
<ul>
<li>Home</li>
<li id="services">Services
<div class="sub-nav" id="sub-nav">
<div class="sub-nav-col left">
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
</div>
<div class="sub-nav-col right">
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
</div>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>
<script src="app.js"></script>
</body>
</html>