I am trying to hide the border of a collapsible drawer when it is closed. Currently, it still shows the border when it is closed, indicated by the line under each drawer selector. How would I go about hiding it?
HTML:
<button type="button" class="collapsible"> Loose Crimp Issue </button>
<div class="content">
<div class="column">
<p>Check that the wires and crimps are fully inserted into J1, J4, and trandsducer connectors.</p>
</div>
<div class="column">
<img src="../images/looseCrimp.png" alt="Picture of Connectors">
</div>
</div>
CSS:
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: white;
border: solid 1px #D1D3D4;
border-radius: 3px;
}
.collapsible {
background-color: white;
color: #021032;
cursor: pointer;
padding: 14px;
width: 100%;
border: solid 1px #D1D3D4;
border-radius: 6px;
text-align: left;
outline: none;
font-size: 15px;
margin: 5px 0px;
}
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: white;
border: solid 1px #D1D3D4;
border-radius: 3px;
}
.collapsible {
background-color: white;
color: #021032;
cursor: pointer;
padding: 14px;
width: 100%;
border: solid 1px #D1D3D4;
border-radius: 6px;
text-align: left;
outline: none;
font-size: 15px;
margin: 5px 0px;
}
.active, .collapsible:hover {
background-color: #f7f7f7;
}
<button type="button" class="collapsible"> Consult Logs </button>
<div class="content">
<div class="column">
<p>Ensure the disc strength is not at “0”.</p>
</div>
<div class="column">
<img src="../images/discStrength.png" alt="Picture of Logs">
</div>
</div>
I tried to hide and show the border on click. It worked once, then just deleted the border after the first time.
The simplest option is to also set border-width: 0 and apply a transition to it:
const button = document.querySelector('.button')
const collapsible = document.querySelector('.collapsible')
button.addEventListener('click', () => {
const content = collapsible.querySelector('.content')
collapsible.style.setProperty('--maxHeight', `${ content.offsetHeight }px`)
collapsible.classList.toggle('expanded')
})
.button {
background-color: white;
color: #021032;
cursor: pointer;
padding: 14px;
width: 100%;
border: solid 1px #D1D3D4;
border-radius: 6px;
text-align: left;
outline: none;
font-size: 15px;
margin: 5px 0px;
}
.collapsible {
overflow: hidden;
background-color: white;
padding: 0 18px;
border-radius: 3px;
max-height: 0;
border: 0px solid #D1D3D4;
transition:
max-height 0.2s ease-out,
border 0.2s ease-out;
}
.collapsible.expanded {
max-height: var(--maxHeight, 256px);
border-width: 1px;
}
<button type="button" class="button">Loose Crimp Issue</button>
<div class="collapsible">
<div class="content">
<div class="column">
<p>Check that the wires and crimps are fully inserted into J1, J4, and trandsducer connectors.</p>
</div>
<div class="column">
<p>Check that the wires and crimps are fully inserted into J1, J4, and trandsducer connectors.</p>
</div>
<div class="column">
<p>Check that the wires and crimps are fully inserted into J1, J4, and trandsducer connectors.</p>
</div>
</div>
</div>
Alternatively, move the styling of the card (border, border-radius, padding, etc.) to a new child inside the element you are going to collapse (the one that gets the max-height:
const button = document.querySelector('.button')
const collapsible = document.querySelector('.collapsible')
button.addEventListener('click', () => {
const content = collapsible.querySelector('.content')
collapsible.style.setProperty('--maxHeight', `${ content.offsetHeight }px`)
collapsible.classList.toggle('expanded')
})
.button {
background-color: white;
color: #021032;
cursor: pointer;
padding: 14px;
width: 100%;
border: solid 1px #D1D3D4;
border-radius: 6px;
text-align: left;
outline: none;
font-size: 15px;
margin: 5px 0px;
}
.collapsible {
overflow: hidden;
max-height: 0;
transition:max-height 0.2s ease-out;
}
.collapsible.expanded {
max-height: var(--maxHeight, 256px);
}
.content {
background-color: white;
padding: 0 18px;
border-radius: 3px;
border: 1px solid #D1D3D4;
}
<button type="button" class="button">Loose Crimp Issue</button>
<div class="collapsible">
<div class="content">
<div class="column">
<p>Check that the wires and crimps are fully inserted into J1, J4, and trandsducer connectors.</p>
</div>
<div class="column">
<p>Check that the wires and crimps are fully inserted into J1, J4, and trandsducer connectors.</p>
</div>
<div class="column">
<p>Check that the wires and crimps are fully inserted into J1, J4, and trandsducer connectors.</p>
</div>
</div>
</div>
First solution (set border-width: 0) with your original code (without using additional CSS classes):
document.querySelectorAll(".collapsible").forEach((coll) => {
coll.addEventListener("click", () => {
coll.classList.toggle("active");
const content = coll.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
// Add this:
content.style.borderWidth = 0;
} else {
content.style.maxHeight = content.scrollHeight + "px";
// And this:
content.style.borderWidth = "1px";
}
});
});
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
/* Change this: */
transition:
border 0.2s ease-out,
max-height 0.2s ease-out;
background-color: white;
/* And this: */
border: 0px solid #D1D3D4;
border-radius: 3px;
}
.collapsible {
background-color: white;
color: #021032;
cursor: pointer;
padding: 14px;
width: 100%;
border: solid 1px #D1D3D4;
border-radius: 6px;
text-align: left;
outline: none;
font-size: 15px;
margin: 5px 0px;
}
.active, .collapsible:hover {
background-color: #f7f7f7;
}
<button type="button" class="collapsible"> Consult Logs </button>
<div class="content">
<div class="column">
<p>Ensure the disc strength is not at “0”.</p>
</div>
<div class="column">
<img src="../images/discStrength.png" alt="Picture of Logs">
</div>
</div>
You can add a class to the button when it is clicked (using onclick), and use that to modify the CSS for the .collapsible class to remove the border when that class is present. Here's an (untested) example:
HTML:
<button type="button" class="collapsible" onclick="this.classList.toggle('active')">Loose Crimp Issue</button>
<div class="content">
<div class="column">
<p>Check that the wires and crimps are fully inserted into J1, J4, and transducer connectors.</p>
</div>
<div class="column">
<img src="../images/looseCrimp.png" alt="Picture of Connectors">
</div>
</div>
CSS:
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: white;
border: solid 1px #D1D3D4;
border-radius: 3px;
}
.collapsible {
background-color: white;
color: #021032;
cursor: pointer;
padding: 14px;
width: 100%;
border: solid 1px #D1D3D4;
border-radius: 6px;
text-align: left;
outline: none;
font-size: 15px;
margin: 5px 0px;
}
.collapsible.active {
border: none;
}
Related
hello all I am working on image popup that appears after clicking on banner I tried some basic js concept but failed badly . looking forward HELP pps
"""
<!-- popup main -->
<div class="cover">
<div class="contents">
<img src="https://cdn.shopify.com/s/files/1/0605/0680/0349/files/PIGEON_a37dee29-65ce-4314-b624-e468c334fc9d.jpg?v=1664194339" alt="gh" width="100%" height="100%" />
<a class="close" href="#">×</a>
</div>
</div>
<button href="#popup_flight_travlDil3" onclick="show('cover')">kk</button>
<a class="close_flight_travelDl" href="#">×</a>
<script>
$(function(){
$("button-link").click(function(){
$(".cover").fadeIn("300");
})
$(".cover,.close").click(function(){
$(".cover").fadeOut("300");
})
$(".contents").click(function(e){
e.stopPropagation();
})
})
</script>
<style>
.cover {
background: rgba(0, 0, 0, 0.7);
position: fixed;
display: none;
opacity: 100;
z-index: 5;
}
.contents {
background: #fff;
margin: 70px auto;
border: 5px solid #ccc;
border-radius: 30px;
position: relative;
z-index: 5;
padding: 10px;
width: 33%;
height: 10%;
}
.close {
position: absolute;
top: 30px;
right: 20px;
transition: all 200ms;
font-size: 95px;
font-weight: bold;
text-decoration: none;
color: #000000;
}
</style>
"""
LOOKING FOR SOLUTION THAT REPLACE BUTTON WITH THE A CLASS LINK OR ANYOTHER WAY ROUND
replacing button with an img tag and adding eventListener to open or close the popup
let btn = document.querySelector(".btn");
let cover = document.querySelector(".cover");
let closebtn = document.querySelector(".close");
btn.addEventListener("click", () => {
cover.classList.toggle("active")
})
closebtn.addEventListener("click", () => {
cover.classList.remove("active")
})
.cover {
background: rgba(0, 0, 0, 0.7);
position: fixed;
display: none;
opacity: 100;
margin-left: 100px;
z-index: 5;
}
.cover.active {
display: block;
}
.contents {
background: #fff;
margin: 70px auto;
border: 5px solid #ccc;
border-radius: 30px;
position: relative;
z-index: 5;
padding: 10px;
width: 33%;
height: 10%;
}
.close {
position: absolute;
top: -10px;
right: 10px;
transition: all 200ms;
font-size: 65px;
font-weight: bold;
text-decoration: none;
color: #000000;
background-color: transparent;
border: none;
}
<!-- popup main -->
<div class="cover">
<div class="contents">
<img src="https://cdn.shopify.com/s/files/1/0605/0680/0349/files/PIGEON_a37dee29-65ce-4314-b624-e468c334fc9d.jpg?v=1664194339" alt="gh" width="100%" height="100%" />
<button class="close">×</button>
</div>
</div>
<img class="btn" src="https://images.unsplash.com/photo-1657299156538-e08595d224ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwzMXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" alt "">
I'm in need of hiding a div on mouse hover and then show another div instead, I'm trying to achieve this by using css but when I test the code, both divs are hidden. Maybe this can only be achieved using jQuery?
I wrote down this code in pure CSS/HTML:
.responsive-banner {
width: 100%;
height: 154px;
overflow: hidden;
margin: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.responsive-banner a {
text-decoration: none;
color: #fff;
}
.banner-description {
/*width:70%;
height:127px; */
display: flex;
align-items: center;
}
.banner-description-2 {
padding: 7px;
max-height: 127px;
overflow: hidde
}
.banner-title {
font-family: "Roboto", "Arial", sans-serif;
font-size: 1.4rem;
font-weight: bold;
margin-bottom: 5px;
text-shadow: #000 1px 1px 1px;
color: #000;
}
.banner-txt {
font-family: "Roboto", "Arial", sans-serif;
font-size: 1.11rem;
color: #000;
}
.banner-btn {
background: #279fba;
float: right;
margin-left: 20px;
padding: 12px;
font-size: 18px;
border-radius: 4px
}
a.banner-btn {
color: #FF0000;
padding: 3px 5px;
}
a.banner-btn:hover {
color: #5ca5ff;
}
#banneryoutube1 {
bottom: 0;
left: 0;
float: left;
background-image: url(/image1.webp);
background-repeat: no-repeat;
display: inline-block;
cursor: pointer;
width: 246px;
height: 138px;
background-size: 246px 138px;
background-color: transparent;
}
#banneryoutube12 {
bottom: 0;
left: 0;
float: left;
background-image: url(/image2.webp);
background-repeat: no-repeat;
display: inline-block;
cursor: pointer;
width: 246px;
height: 138px;
background-size: 246px 138px;
background-color: transparent;
/* animation: wahooMario 0.12s linear 1;*/
}
#showbannerinarticle1 {
display: block
}
#showbannerinarticle2 {
display: none
}
#showbannerinarticle1:hover {
display: none
}
#showbannerinarticle2:hover {
display: block
}
<div id="showbannerinarticle1" class="responsive-banner">
<a href="/index.html" rel="nofollow" target="_blank">
<div id="banneryoutube1" /></div>
<div class="banner-description">
<div class="banner-description-2">
<div class="banner-title">
1</div>
<div class="banner-txt">LOREM IPSUM
</div>
</div>
</div>
</a>
</div>
<div id="showbannerinarticle2" class="responsive-banner">
<a href="/index2.html" rel="nofollow" target="_blank">
<div id="banneryoutube12" /></div>
<div class="banner-description">
<div class="banner-description-2">
<div class="banner-title">
1</div>
<div class="banner-txt">LOREM IPSUM
</div>
</div>
</div>
</a>
</div>
How can I proceed with this?
Basically when I'm creating is an animated banner.
The issue may be that CSS cannot consider something to be hovered unless it is visible, and so it gets confused.
I would wrap both in another div and target the CSS to the wrapper, like this:
.wrapper:hover .hide-me {
display: none;
}
.show-me {
display:none;
}
.wrapper:hover .show-me {
display: block;
}
<div class="wrapper">
<div class="hide-me">Content 1</div>
<div class="show-me">Content 2</div>
</div>
Heres some workign example you can play with using jquery.
$(document).ready(function(){
$(".div1").hover(function(){
$(".div2").show();
$(".div1").hide();
});
$(".div2").hover(function(){
$(".div1").show();
$(".div2").hide();
});
});
.div1 {
background-color: blue;
cursor: pointer;
color: white;}
.div2 {
background-color: yellow;
display:none;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="div1">
<h1>This is my div 1</h1>
</div>
<div class="div2">
<h1>div 2 is now showing</h1>
</div>
I would use:
document.getElementById('firstDivId').style.display = "none";
document.getElementById('secondDivId').style.display = "block";
// Switch these around when doing the opposite
With two columns (left indicates name; right provide collapse function(a button)), how would you create collapsible content on the next row with full width (covers both columns)?
I am only able to collapse within a certain column. I tried to collapse a row below by creating a new div, but then the collapsing action no longer seems to work.
It should look like this:
Thank you for your help!
JavaScript is from: https://www.w3schools.com/howto/howto_js_collapsible.asp
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
:root {
--colorbggray: rgb(65,65,65);
--colorlightgray: rgb(150,150,150);
--colorcyan: rgb(0, 229, 255);
--colorgreen: rgb(0, 255, 0);
--colorUpGrey: rgb(135,135,135);
--colorLowGrey: rgb(38,38,38);
--colorMidGrey: rgb(95,95,95);
--colorGreen: rgb(11,69,2);
--colorAmber: orange;
--colorRed: red;
}
.verticalmenu-auto {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}
.verticalmenu-auto > div {
border-top: 2px solid var(--colorUpGrey);
border-bottom: 2px solid var(--colorLowGrey);
border-left: 2px solid var(--colorUpGrey);
border-right: 2px solid var(--colorLowGrey);
background: var(--colorMidGrey); color: white;
width: 100px;
padding-top: 8px;
padding-bottom: 8px;
padding-right: 16px;
padding-left: 16px;
margin: 0.5px;
text-align: left;
font-size: 16px;
}
.verticalmenu-auto li, {
border-top: 2px solidauto var(--colorUpGrey);
border-bottom: 2px solid var(--colorLowGrey);
border-left: 2px solid var(--colorUpGrey);
border-right: 2px solid var(--colorLowGrey);
background: var(--colorMidGrey);
}
.collapsible {
background: var(--colorMidGrey); color: white;
cursor: pointer;
width: 100%;
border: none;
text-align: center;
outline: none;
}
.collapsible:after {
content: '\1433';
float: center;
transform: scale(.7, 1);
}
.active:after {
content: "\142F";
transform: scale(1, .7);
}
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.0s ease-out;
grid-column-start: -1;
grid-column-end: 1;
background-color: gray;
}
<body>
<p>On right side open content which is has the width of both columns combined</p>
<ul style="list-style:none;padding-left:0;">
<li>
<div class="verticalmenu-auto">
<div style="flex-grow: 10">Name</div>
<div style="flex-grow: 1; text-align: center">
<button class="collapsible"></button>
<div class='content'>
<p> content</p>
</div>
</div>
</div>
</li>
<li>
<div class="verticalmenu-auto">
<div style="flex-grow: 10">Name</div>
<div style="flex-grow: 1; text-align: center">
<button class="collapsible"></button>
<div class='content'>
<p> content</p>
</div>
</div>
</div>
</li>
A slight change in your JS toggle and also putting content outside the parent div so that it act as block
$(document).ready(function () {
$('.collapsible').on('click', function(event){
event.preventDefault();
// create accordion variables
var accordion = $(this);
var accordionContent = accordion.closest('.verticalmenu-auto').next('.content');
// toggle accordion link open class
accordion.toggleClass("active");
// toggle accordion content
accordionContent.slideToggle(250);
accordionContent.toggleClass("active");
});
});
:root {
--colorbggray: rgb(65,65,65);
--colorlightgray: rgb(150,150,150);
--colorcyan: rgb(0, 229, 255);
--colorgreen: rgb(0, 255, 0);
--colorUpGrey: rgb(135,135,135);
--colorLowGrey: rgb(38,38,38);
--colorMidGrey: rgb(95,95,95);
--colorGreen: rgb(11,69,2);
--colorAmber: orange;
--colorRed: red;
}
.verticalmenu-auto {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}
.verticalmenu-auto > div {
border-top: 2px solid var(--colorUpGrey);
border-bottom: 2px solid var(--colorLowGrey);
border-left: 2px solid var(--colorUpGrey);
border-right: 2px solid var(--colorLowGrey);
background: var(--colorMidGrey); color: white;
width: 100px;
padding-top: 8px;
padding-bottom: 8px;
padding-right: 16px;
padding-left: 16px;
margin: 0.5px;
text-align: left;
font-size: 16px;
}
.verticalmenu-auto li, {
border-top: 2px solidauto var(--colorUpGrey);
border-bottom: 2px solid var(--colorLowGrey);
border-left: 2px solid var(--colorUpGrey);
border-right: 2px solid var(--colorLowGrey);
background: var(--colorMidGrey);
}
.collapsible {
background: var(--colorMidGrey); color: white;
cursor: pointer;
width: 100%;
border: none;
text-align: center;
outline: none;
}
.collapsible:after {
content: '\1433';
float: center;
transform: scale(.7, 1);
}
.collapsible.active:after {
content: "\142F";
transform: scale(1, .7);
}
.content {
display: none;
overflow: hidden;
transition: max-height 0.0s ease-out;
grid-column-start: -1;
grid-column-end: 1;
background-color: #BFBFBF;
padding: 10px;
color: #fff;
}
.content.active {
height: auto;
display: block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p>On right side open content which is has the width of both columns combined</p>
<ul style="list-style:none;padding-left:0;">
<li>
<div class="verticalmenu-auto">
<div style="flex-grow: 10">Name</div>
<div style="flex-grow: 1; text-align: center">
<button class="collapsible"></button>
</div>
</div>
<div class='content'>
<p> content</p>
</div>
</li>
<li>
<div class="verticalmenu-auto">
<div style="flex-grow: 10">Name</div>
<div style="flex-grow: 1; text-align: center">
<button class="collapsible"></button>
</div>
</div>
<div class='content'>
<p> content</p>
</div>
</li>
Are you need like this?
var buttons = document.querySelectorAll('.toggle');
buttons.forEach(function(el) {
el.addEventListener('click', function(event) {
var target = event.target.getAttribute('target');
document.getElementById(target).classList.toggle('expanded');
});
});
table {
width: 100%;
}
table td:nth-child(2) {
width: 100px;
}
.row-detail {
display: none;
}
.expanded {
display: block;
}
<table>
<tr>
<td>Row 1</td>
<td><button class="toggle" target="row-detail-1">Toggle 1</button></td>
</tr>
<tr id="row-detail-1" class="row-detail">
<td colspan="2">This detail from row 1</td>
</tr>
<tr>
<td>Row 2</td>
<td><button class="toggle" target="row-detail-2">Toggle 2</button></td>
</tr>
<tr id="row-detail-2" class="row-detail">
<td colspan="2">This detail from row 2</td>
</tr>
<tr>
<td>Row 3</td>
<td><button class="toggle" target="row-detail-3">Toggle 3</button></td>
</tr>
<tr id="row-detail-3" class="row-detail">
<td colspan="2">This detail from row 3</td>
</tr>
</table>
I've been having a problem with a dropdown menu option. The thing refuses to display when I hover "Store". I've already tried in different ways (in some I was almost lucky, in others not so much) but in the end nothing really worked for me.
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("tituloh").style.fontSize = "15px";
document.getElementById("tituloh").style.marginBottom = "70px";
document.getElementById("tituloh").style.top = "20px";
document.getElementById("header").style.paddingBottom = "0px";
document.getElementById("remove").style.top = "47px";
} else {
document.getElementById("tituloh").style.fontSize = "30px";
document.getElementById("tituloh").style.top = "35px";
document.getElementById("tituloh").style.marginBottom = "100px"
document.getElementById("header").style.paddingBottom = "0px";
document.getElementById("remove").style.top = "50px";
}
}
#body {
margin: 0px;
}
#remove {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
}
.order {
display: inline-block;
}
#remove .opt {
display: inline-block;
color: white;
text-align: center;
font-size: 24px;
padding: 14px 16px;
background-color: black;
text-decoration: none;
}
#remove .opt:hover,
.dropmenu:hover .dropbutton {
background-color: white;
color: black;
}
.dropmenu {
float: right;
}
.dropmenu .dropbutton {
font-size: 24px;
border: none;
outline: none;
color: white;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropcont {
position: absolute;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
display: none;
}
.dropcont .dropitem {
text-decoration: none;
width: 150px;
height: 30px;
margin: 5px 0;
padding-top: 5px;
padding-left: 5px;
display: inline-block;
text-align: left;
}
.dropcont a {
text-decoration: none;
color: black;
font-size: 24px;
}
.dropcont a:hover {
text-decoration: underline;
transition: 0.5s;
}
.dropmenu:hover .dropcont {
display: block;
}
#header {
left: 0;
top: 0;
text-align: center;
padding: 20px 5px;
padding-bottom: 0px;
position: fixed;
width: 100%;
margin: 0px;
padding-left: 0px;
transition: 0.2s;
background-color: black;
background-image: url(header/AvettBrothers-loja.jpg);
background-repeat: no-repeat;
background-position: 0 10%;
background-size: cover;
z-index: 1;
}
#tituloh {
position: relative;
top: 35px;
text-shadow: -5px 5px 10px #000000;
font-size: 30px;
color: white;
transition: 0.3s;
margin-bottom: 100px;
}
.sales {
margin-top: 300px;
}
.thumbnails {
width: 50%;
margin: 0 auto;
text-align: center;
}
#tshirts,
#casacos,
#posters,
#acessorios,
#projects,
#kids {
position: relative;
display: inline;
border: solid red;
padding: 20px 0;
margin-bottom: 100px;
}
img.contrast {
margin: 20px 10px;
filter: contrast(70%) opacity(90%);
border: solid blue;
}
.textimgcentro {
position: absolute;
left: 0;
top: -150%;
width: 100%;
font-size: 30px;
text-align: center;
color: white;
text-shadow: -10px 5px 10px #000000;
border: solid black;
}
#top {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" ; http-equiv="refresh" content="5">
<title>Loja</title>
<link rel="stylesheet" type="text/css" href="loja/loja.css">
<script type="text/javascript" src="loja/loja.js"></script>
</head>
<body>
<div id="header">
<div id="tituloh">
<h1>Store</h1>
</div>
<ul id="remove">
<li class="order">Home</li>
<li class="order">About</li>
<li class="order">Albuns</li>
<li class="order">Tours</li>
<li class="dropmenu, order">
<a href="#link" class="dropbutton, opt">
Store
</a>
<div class="dropcont">
T-Shirts<br>
Jackets<br>
Posters<br>
Accessories<br>
Side Projects<br>
Kids<br>
</div>
</li>
<li class="order">Forum</li>
</ul>
</div>
<br/>
<br/>
<br/>
<div class="sales">Sales</div>
<div class="thumbnails">
<div id="tshirts">
<img src="loja/thumbnails/tshirts.jpg" class="contrast">
<div class="textimgcentro">
T-Shirts
</div>
</div>
<div id="casacos">
<img src="loja/thumbnails/casacos.jpg" class="contrast">
<div class="textimgcentro">
Jackets
</div>
</div>
<div id="posters">
<img src="loja/thumbnails/posters.jpg" class="contrast">
<div class="textimgcentro">
Posters
</div>
</div>
<div id="acessorios">
<img src="loja/thumbnails/acessorio.jpg" class="contrast">
<div class="textimgcentro">
Accessories
</div>
</div>
<div id="projects">
<img src="loja/thumbnails/project.jpg" class="contrast">
<div class="textimgcentro">
Side Projects
</div>
</div>
<div id="kids">
<img src="loja/thumbnails/kids.jpg" class="contrast">
<div class="textimgcentro">
Kids
</div>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<div class="bestsell">
<div id="top">
<h1>Top Products</h1>
</div>
</div>
<hr id="cont"> Contactos Oficiais: <br /><br />
<img src="loja/Contactos/facebook.png" ; height="50" ; width="50" ; title="Facebook" ; alt="Link para Facebook">
<img src="loja/Contactos/insta.png" ; height="50" ; width="50" ; title="Instagram" ; alt="Link para Instagram">
<img src="loja/Contactos/twitter.png" ; height="50" ; width="50" ; title="Twitter" ; alt="Link para Twitter">
</body>
</html>
How can I fix this?
Also, how do I make it so that, while hovering the dropdown menu, "Store" remains with a white background and black text?
Thank you!
I would like to do when clicking outside the menu area when it is already open, it closes itself. If anyone can help me since I do not understand anything JavaScript thanks.. You can see my website that this is being developed as a group project for a final course presentation here and see the button working where says MAIS
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
.collapsible {
cursor: pointer;
border: none;
outline: none;
color: white;
background-color: inherit;
text-decoration: none;
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
font-family: Arial;
display: block;
height: 65px;
padding: 22.5px 16px;
margin-left: 35px;
transition: all .3s;
width: 80px;
}
.collapsible:hover {
color: #08b0ff;
}
.collapsible:active {
color: #08b0ff;
}
.content {
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
top: 65px;
background-color: #f9f9f9;
width: 1170px;
left: -300px;
}
.content {
float: left;
overflow: hidden;
}
.content {
position: absolute;
top: 65px;
background-color: #f9f9f9;
width: 1170px;
left: -300px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1000;
margin: 0 auto;
}
.content .header {
background-color: rgb(60, 60, 60);
;
padding: 16px;
color: white;
height: 70px;
}
<li>
<div class='dropdown'>
<button class='collapsible'>Mais
<i class='fa fa-caret-down' style='float:right; padding-top: 1.5px;padding-bottom: 1.5px;'/>
</button>
<div class='content'>
<div class='bottom-border2' />
<div class='header'>
<h2 style='color:#fff; '>Categorias</h2>
</div>
<div class='row'>
<div class='column'>
<h3 style='color:#fff;'>Inovação</h3>
<div style='background-color: rgb(97, 255, 0);height: 2px; width: 300px; margin: auto;' />
<div id='dpcontent1'>
<a class='center' href='https://trit3k.blogspot.com/search/label/Ci%C3%AAncia'>Ciência</a>
<a class='center' href='#'>Tecnologia</a>
</div>
</div>
<div class='column'>
<h3 style=' color:#fff;'>Computadores</h3>
<div style='background-color: rgb(8, 176, 255);height: 2px; width: 300px; margin: auto;' />
<div id='dpcontent2'>
<a class='center2' href='#'>Hardware</a>
<a class='center2' href='https://trit3k.blogspot.com/search/label/Software'>Software</a>
<a class='center2' href='https://trit3k.blogspot.com/search/label/Internet'>Internet</a>
<a class='center2' href='https://trit3k.blogspot.com/search/label/Smartphone'>Smartphone</a>
<a class='center2' href='#'>Mac</a>
<a class='center2' href='#'>Linux</a>
</div>
</div>
<div class='column'>
<h3 style='color:#fff;'>Gaming</h3>
<div style='background-color: rgb(255, 25, 0);height: 2px; width: 300px; margin: auto;' />
<div id='dpcontent3'>
<a class='center3' href='#'>eSPORTS</a>
<a class='center3' href='https://trit3k.blogspot.pt/search/label/Jogos'>Jogos</a>
<a class='center3' href='#'>Consolas</a>
<a class='center3' href='#'>Lançamentos</a>
</div>
</div>
</div>
</div>
</div>
</li>