I have created a website (i'm fairly new to using html on a website.... i normally just use images and text) and i want 3 drop down boxes independently selectable which will go to 3 different pages
the problem is, all the lists work in coding, but when i click on any buttons it only selects the top list
3 drop down boxes
how the drop looks when you select any button
this is the coding ive used....there are 120 different class links, for each dropdown
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #005eb8;
color: white;
margin-left: 98px;
padding: 5px;
font-size: 17px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #004a90;
}
.dropdown {
position: absolute;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
margin-left: 98px;
background-color: #f4f7f8;
min-width: 50px;
height: 440px;
overflow-y: scroll;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 1px 6px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #005eb8; color:white;}
.show {display: block;}
</style>
</head>
<body>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">--- Select ---</button>
<div id="myDropdown1" class="dropdown-content">
<a class="links" href="https://www.glossopnorthendafc.co.uk/2019-20t.html">2019-20</a>
<a class=”links” href="https://www.glossopnorthendafc.co.uk/1890-91t.html">1890-91</a>
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown1").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
thanks in advance
Chris
UPDATE
ok. many thanks for the help. i've manages to get the 3 different buttons to go to the 3 different sections, however the last issue is that the top 2 buttons do not close when clicking anywhere else on the page.... but the bottom button does. this is the code.... Can anyone suggest script to close the top two? the webpage is https://www.glossopnorthendafc.co.uk/history.html
<br>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn1 {
background-color: #005eb8;
color: white;
margin-left: 86px;
padding: 5px;
font-size: 17px;
border: none;
cursor: pointer;
}
.dropbtn1:hover, .dropbtn1:focus {
background-color: #004a90;
}
.dropdown1 {
position: absolute;
display: inline-block;
}
.dropdown-content1 {
display: none;
position: absolute;
margin-left: 91px;
background-color: #f4f7f8;
min-width: 50px;
height: 440px;
overflow-y: scroll;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content1 a {
color: black;
padding: 1px 6px;
text-decoration: none;
display: block;
}
.dropdown1 a:hover {background-color: #005eb8; color:white;}
.show {display: block;}
</style>
</head>
<body>
<div class="dropdown1">
<button onclick="myFunction1()" class="dropbtn1">--- Select ---</button>
<div id="myDropdown1" class="dropdown-content1">
<a class="links" href="https://www.glossopnorthendafc.co.uk/2019-20r.html">2019-20</a>
<a class=”links” href="https://www.glossopnorthendafc.co.uk/2018-19r.html">2018-19</a>
<a class=”links” href="https://www.glossopnorthendafc.co.uk/1890-91r.html">1890-91</a>
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction1() {
document.getElementById("myDropdown1").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn1')) {
var dropdowns = document.getElementsByClassName("dropdown-content1");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
<br>
<br>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn2 {
background-color: #005eb8;
color: white;
margin-left: 86px;
padding: 5px;
font-size: 17px;
border: none;
cursor: pointer;
}
.dropbtn2:hover, .dropbtn2:focus {
background-color: #004a90;
}
.dropdown2 {
position: absolute;
display: inline-block;
}
.dropdown-content2 {
display: none;
position: absolute;
margin-left: 91px;
background-color: #f4f7f8;
min-width: 50px;
height: 440px;
overflow-y: scroll;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content2 a {
color: black;
padding: 1px 6px;
text-decoration: none;
display: block;
}
.dropdown2 a:hover {background-color: #005eb8; color:white;}
.show {display: block;}
</style>
</head>
<body>
<div class="dropdown2">
<button onclick="myFunction2()" class="dropbtn2">--- Select ---</button>
<div id="myDropdown2" class="dropdown-content2">
<a class="links" href="https://www.glossopnorthendafc.co.uk/2019-20t.html">2019-20</a>
<a class=”links” href="https://www.glossopnorthendafc.co.uk/2018-19t.html">2018-19</a>
<a class=”links” href="https://www.glossopnorthendafc.co.uk/1890-91t.html">1890-91</a>
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction2() {
document.getElementById("myDropdown2").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn2')) {
var dropdowns = document.getElementsByClassName("dropdown-content2");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
<br>
<br>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn3 {
background-color: #005eb8;
color: white;
margin-left: 86px;
padding: 5px;
font-size: 17px;
border: none;
cursor: pointer;
}
.dropbtn3:hover, .dropbtn3:focus {
background-color: #004a90;
}
.dropdown3 {
position: absolute;
display: inline-block;
}
.dropdown-content3 {
display: none;
position: absolute;
margin-left: 91px;
background-color: #f4f7f8;
min-width: 50px;
height: 440px;
overflow-y: scroll;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content3 a {
color: black;
padding: 1px 6px;
text-decoration: none;
display: block;
}
.dropdown3 a:hover {background-color: #005eb8; color:white;}
.show {display: block;}
</style>
</head>
<body>
<div class="dropdown3">
<button onclick="myFunction3()" class="dropbtn3">--- Select ---</button>
<div id="myDropdown3" class="dropdown-content3">
<a class="links" href="https://www.glossopnorthendafc.co.uk/2019-20s.html">2019-20</a>
<a class=”links” href="https://www.glossopnorthendafc.co.uk/2018-19s.html">2018-19</a>
<a class=”links” href="https://www.glossopnorthendafc.co.uk/1890-91s.html">1890-91</a>
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction3() {
document.getElementById("myDropdown3").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn3')) {
var dropdowns = document.getElementsByClassName("dropdown-content3");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
<br>
I only see a single <div class="dropdown"> in your example, but I assume there are more in your code. If that's the case, bear in mind HTML ids are intended to be unique. Try changing the myDropdown1 to a class and selecting in in your JavaScript using getElementsByClassName.
Reach out on Twitter if you'd like direct help. Up The Hillmen!
Related
I want to add specific icons or png's to the dropdown list next to the text. Firefox no longer supports a background-image style inline to do this. I have looked around but all the ways are outdated.
This is the codepen link with an example Link
The code is this if needed.
HTML
<div>
<select>
<option value="Cat">
<img src="https://www.w3schools.com/images/lamp.jpg" alt="cat icon">
Cat</option>
<option value="Dog">
<img src="https://www.w3schools.com/images/lamp.jpg" alt="dog icon">
Dog</option>
<option value="Bird">
<img src="https://www.w3schools.com/images/lamp.jpg" alt="bird icon">
Bird</option>
<option value="Mouse">
<img src="https://www.w3schools.com/images/lamp.jpg" alt="mouse icon">
Mouse</option>
</select>
</div>
CSS
select {
padding: 5px 25px;
font-size: 20px;
border: none;
background:grey;
border-radius: 5px;
color: azure;
}
div{
position: absolute;
top:20%;
width:100%;
left: 50%;
margin: auto 0;
}
What i would advice you to do is not to use a <select> as a menu, but a <div> with <a> tags or a <ul> with <li> tags, here's a working example:
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
image<br><img src="https://www.w3schools.com/images/lamp.jpg">
font awesome<br><i class="fas fa-phone"></i>
</div>
</div>
Here is the whole code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
</head>
<body>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
image<br><img src="https://www.w3schools.com/images/lamp.jpg">
font awesome<br><i class="fas fa-phone"></i>
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
You could use divs and Javascript:
let dropdown = document.querySelector(".dropdown");
let selectCountry = dropdown.querySelector(".select-country");
let options = dropdown.querySelector(".options");
let optionItems = options.querySelectorAll("div");
const toggleDropdown = () => {
if (window.getComputedStyle(options).display == "none") {
options.style.display = "block";
}
else {
options.style.display = "none";
}
}
selectCountry.addEventListener("click", toggleDropdown);
const chooseOption = (option) => {
console.log(option.getAttribute("data-value"));
toggleDropdown();
}
optionItems.forEach(function(option, i) {
option.addEventListener("click", function(){chooseOption(option)});
});
const closeDropdown = (e) => {
if (e.target.parentNode.className !== "dropdown") {
options.style.display = "none";
}
}
document.addEventListener("click", closeDropdown);
.dropdown {
width: 200px;
background-color: #fff;
border: 1px solid #e2e2e2;
}
.dropdown .options {
display: none;
}
.dropdown .options div {
position: relative;
height: 30px;
padding: 5px 5px 5px 50px;
cursor: pointer;
line-height: 30px;
}
.dropdown .options div:nth-of-type(2n+1){
background-color: #efefef;
}
.dropdown .options div:before {
content: "";
width: 32px;
height: 24px;
background-image: url(https://i.ibb.co/3C5F68J/flags.png);
background-repeat: no-repeat;
position: absolute;
left: 5px;
top: 8px;
}
.dropdown .options div.sp:before {
background-position: 0 0;
}
.dropdown .options div.en:before {
background-position: 0 -47px;;
}
.dropdown .options div.fr:before {
background-position: 0 -95px;
}
.dropdown .options div.it:before {
background-position: 0 -143px;
}
.dropdown div.select-country {
position: relative;
height: 30px;
padding: 5px 50px 5px 5px;
cursor: pointer;
line-height: 30px;
border: 1px solid #e2e2e2;
}
.dropdown div.select-country:before {
content: "";
width: 32px;
height: 24px;
background-image: url(https://i.ibb.co/3C5F68J/flags.png);
background-repeat: no-repeat;
background-position: 0 -191px;
position: absolute;
right: 5px;
top: 8px;
}
<div class="dropdown">
<div class="select-country">-- select contry --</div>
<div class="options">
<div class="sp" data-value="sp">Spain</div>
<div class="en" data-value="en">England</div>
<div class="fr" data-value="fr">France</div>
<div class="it" data-value="it">Italy</div>
</div>
</div>
I have a dropDown menu and when the drop list is open is overlapping the div below, I wish to push the div below down when the dropdown is open, I've try with flex, grid, flexgrow, grid rows, positions relative/absolute, and I can't find any solution.
here is the HTML code:
<div class="container">
<div class="dropContainer">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</div>
<div class="inputContainer">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" />
</div>
</div>
and the CSS:
.container{
display: flex;
flex-direction: column;
height: 100vh;
}
.dropContainer{
display: block;
height: 100%;
margin-bottom: 2rem;
}
.inputContainer{
display: block;
height: 100%;
top: 5rem;
}
/* dropDown Menu */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
padding-bottom: 140px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.show {display: block; }
and here is the code example working: https://codepen.io/raulcosalux/pen/VwzGyYO
kind regards,
Using absolute positioning will not regard for content underneath. With that being said, you have to use position: relative; on your dropdown menu in order to allow the input or any other content below to adjust when the menu opens.
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.container{
display: flex;
flex-direction: column;
height: 100vh;
}
.dropContainer{
display: block;
height: 100%;
margin-bottom: 2rem;
}
.inputContainer{
display: block;
height: 100%;
position: sticky;
}
/* dropDown Menu */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f1f1f1;
min-width: 160px;
padding-bottom: 140px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.show {display: block; }
<div class="container">
<div class="dropContainer">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</div>
<div class="inputContainer">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" />
</div>
</div>
Change the position of the dropdown container that holds the menu to relative, then remove the padding you have on it. Remove this => padding-bottom: 140px; and change this => .dropdown-content { position: absolute; } to .dropdown-content { position: relative; }, this will push the content down below the menu element and the padding will no longer cover its content.
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.container{
display: flex;
flex-direction: column;
height: 100vh;
}
.dropContainer{
display: block;
margin-bottom: 2rem;
}
.inputContainer{
display: block;
height: 100%;
top: 5rem;
}
/* dropDown Menu */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.show {
display: block;
}
<div class="container">
<div class="dropContainer">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</div>
<div class="inputContainer">
<label for="fname">First name: </label>
<input type="text" id="fname" name="fname" />
</div>
</div>
I also removed the height on the dropContainer as well.
I kindly ask you for help, I would like the submenus to open in slide in the same screen overlapping in the drop vertical menu, because I have many rows and submenus to insert and use the back button to go back in the submenus when they are overlapped.
They do not have to open in cascade like it is now, or sideways, but when I click car the submenu must completely overlap the main menu, and then use the back buttons to go back in the menu go, is it possible?
the back button does not work for me..
I would like the submenus to open to pages, then overlapping each other and using the back button to go back through the menus
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
.sidenav {
height: 250px;
width: 300px;
z-index: 1;
top: 200px;
left: 0;
background-color: #444;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a,
.dropdown-btn {
padding: 14px 8px 6px 16px;
text-decoration: none;
font-size: 17px;
color: #8c8c8c;
display: block;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
margin-left: 2px;
}
.sidenav a:hover,
.dropdown-btn:hover {
color: #f1f1f1;
background: #555;
border-left: 3px solid #f1d120;
margin-left: -1px;
}
.main {
margin-top: -460px;
margin-left: 310px;
font-size: 20px;
padding: 10px 50px;
}
.active {
background-color: grey;
color: white;
}
.dropdown-container {
display: none;
background-color: #4c4c4c;
padding-left: 8px;
}
<div class="sidenav">Brand <button class="dropdown-btn">Car <strong>
</strong> </button>
<div class="dropdown-container">° renault ° citoren</div>
<br /><br /><br />
<button>back</button>
So i made a Watchlist which is actually just a picture gallery and a menu right now. but on the second, the bigger screen the pictures are overlaying my menu.
https://imgur.com/a/FUycbCo
well i think that its because i used px instead of % or smth like that so i tried changing it but the problem is finding out where. some of the tags dont even work with % for some reason. also im not even sure that thats the problem. thats just a guess from me.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="new.css">
<title>HTML</title>
</head>
<body>
<div class="menu">
<button class="untermenu">TV</button>
<div class="untermenu-links">
am schauen
geschaut
wird geschaut
</div>
<button class="untermenu">Anime</button>
<div class="untermenu-links">
am schauen
geschaut
wird geschaut
</div>
</div>
<div class="gallery">
<img src="https://m.media-amazon.com/images/I/A121lm-WoYL._AC_UY218_.jpg" alt="Shadowhunters">
<div class="desc"><p>Staffel 2/3<br>Folge 20/20<br>am schauen</p></div>
</div>
<div class="gallery">
<img src="https://m.media-amazon.com/images/I/81b+18Wg5dL._AC_UY218_.jpg" alt="Brooklyn Nine Nine">
<div class="desc"><p>Staffel 5/6<br>Folge 22/22<br>am schauen</p></div>
<script>
var untermenu = document.getElementsByClassName("untermenu");
var i;
for (i = 0; i < untermenu.length; i++)
{
untermenu[i].addEventListener("click", function()
{
this.classList.toggle("active");
var untermenuContent = this.nextElementSibling;
if (untermenuContent.style.display === "block")
{
untermenuContent.style.display = "none";
}
else
{
untermenuContent.style.display = "block";
}
});
}
</script>
</body>
</html>
CSS:
body
{
background-color: #e2e2e0;
}
h1
{
font-family: Arial, "Times new roman";
position: relative;
left: 170px;
}
.menu
{
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #111;
padding-top: 50px;
}
.menu a, .untermenu
{
padding: 8px 15px 10px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
cursor: pointer;
}
div.gallery
{
position: relative;
left: 9%;
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 230px;
}
div.gallery:hover
{
border: 1px solid #777;
}
div.gallery img
{
width: 100%;
height: 10em;
}
div.desc
{
padding: 15px;
text-align: center;
background-color: white;
}
p
{
padding: 0;
margin: 0;
line-height: 1.5;
}
.menu a:hover, .untermenu:hover
{
color: #f1f1f1;
}
.untermenu-links
{
display: none;
background-color: #262626;
}
.active
{
background-color: #093802;
color: white;
}
#kleiner
{
font-size: 15px;
}
i expect it to look nice
it doesnt look nice.
I would suggest you to post the whole HTML and CSS somewhere here or maybe on share a codepen, so that we can debug your code.
Also, I would suggest you to use grid and flex for making layouts for your website. For example I can see that your design structure can we implemented using basic grid and flex . The implementation in your case would be basic and it would be a good start for you. Consider learning them.
I have made changes in your code, added flex and grid. I have also implimented a responsiveness code, so that if the screen size reduces things still look good.
https://codepen.io/bhanusinghR/pen/LYPbazK?editors=1100
Code used:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="new.css">
<title>HTML</title>
</head>
<body>
<div class="body-wrapper">
<div class="menu">
<button class="untermenu">TV</button>
<div class="untermenu-links">
am schauen
geschaut
wird geschaut
</div>
<button class="untermenu">Anime</button>
<div class="untermenu-links">
am schauen
geschaut
wird geschaut
</div>
</div>
<div>
<div class="gallery">
<img src="https://m.media-amazon.com/images/I/A121lm-WoYL._AC_UY218_.jpg" alt="Shadowhunters">
<div class="desc"><p>Staffel 2/3<br>Folge 20/20<br>am schauen</p></div>
</div>
<div class="gallery">
<img src="https://m.media-amazon.com/images/I/81b+18Wg5dL._AC_UY218_.jpg" alt="Brooklyn Nine Nine">
<div class="desc"><p>Staffel 5/6<br>Folge 22/22<br>am schauen</p></div>
</div>
</div>
CSS
body
{
background-color: #e2e2e0;
padding:0px;
margin:0px;
}
.body-wrapper{
display: grid;
grid-template-columns: 18% auto;
grid-template-rows:auto;
}
h1
{
font-family: Arial, "Times new roman";
position: relative;
left: 170px;
}
.menu
{
min-width: 100%;
top: 0;
left: 0;
background-color: #111;
padding-top: 50px;
height: 100vh;
}
.menu a, .untermenu
{
padding: 8px 15px 10px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
cursor: pointer;
}
div.gallery
{
position: relative;
left: 9%;
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 230px;
}
div.gallery:hover
{
border: 1px solid #777;
}
div.gallery img
{
width: 100%;
height: 10em;
}
div.desc
{
padding: 15px;
text-align: center;
background-color: white;
}
p
{
padding: 0;
margin: 0;
line-height: 1.5;
}
.menu a:hover, .untermenu:hover
{
color: #f1f1f1;
}
.untermenu-links
{
display: none;
background-color: #262626;
}
.active
{
background-color: #093802;
color: white;
}
#kleiner
{
font-size: 15px;
}
#media only screen and (max-width: 600px) {
.body-wrapper {
display: flex;
flex-direction: column;
}
.menu {
height:100%;
padding-top: 0px;
display: flex;
}
}
I have created your layout using basic simple use of grid and flex.
EDIT: I couldn't find any solution without JS so I implemented it with JavaScript (solution as answer).
I am trying to create a slide-open-dropdown without any JavaScript. I've googled a bit but could not find any solutions using either a fixed height, using a fixed max-height or well.. JavaScript.
What I've done:
My Elements are the same height as my container so I could just use 3 times the height but now I have another constant.
Code:
.dropdown_menu {
display: inline-block;
font-family: Arial;
position: relative;
}
.dropdown_title {
background-color: #505050;
color: white;
margin: 0;
padding: 20px 50px;
}
.dropdown_content {
background-color: #646464;
position: absolute;
width: 100%;
z-index: 1;
height: 0;
overflow: hidden;
transition: height .3s;
}
.dropdown_content > * {
color: white;
display: block;
padding: 20px 0;
text-align: center;
text-decoration: none;
}
.dropdown_content > *:hover {
background-color: #7D7D7D;
}
.dropdown_menu:hover .dropdown_content {
height: 300%;
}
<div class="dropdown_menu">
<p class="dropdown_title">Dropdown</p>
<div class="dropdown_content">
Option 1
Option 2
Option 3
</div>
</div>
Is it possible to create this?
Use max-height instead of height, and set the max height on hover to a very big one. Also note that the transition time is relative to the full maximum height so you'll have to set a longer transition time.
.dropdown_menu {
display: inline-block;
font-family: Arial;
position: relative;
}
.dropdown_title {
background-color: #505050;
color: white;
margin: 0;
padding: 20px 50px;
}
.dropdown_content {
background-color: #646464;
position: absolute;
width: 100%;
z-index: 1;
max-height: 0;
overflow: hidden;
transition: max-height 1s;
}
.dropdown_content > * {
color: white;
display: block;
padding: 20px 0;
text-align: center;
text-decoration: none;
}
.dropdown_content > *:hover {
background-color: #7D7D7D;
}
.dropdown_menu:hover .dropdown_content {
max-height: 1000px;
}
<div class="dropdown_menu">
<p class="dropdown_title">Dropdown</p>
<div class="dropdown_content">
Option 1
Option 2
Option 3
</div>
</div>
<div class="dropdown_menu">
<p class="dropdown_title">Dropdown</p>
<div class="dropdown_content">
Option 1
Option 2
Option 3
Option 4
Option 5
</div>
</div>
So I worked out a solution with JavaScript and will provide it for future use :)
Here is my code:
"use strict";
document.querySelectorAll('.aDropdown').forEach(dropdown => {
let body = dropdown.children[1];
let titleHeight = dropdown.children[0].clientHeight;
dropdown.style.height = titleHeight + "px";
// Mouse enter listener
dropdown.addEventListener('mouseenter', () => {
// Variables
let bodyHeight = 0;
let selectionAmount = body.children.length;
// Get the height of all children
for(let i = 0; i < selectionAmount; i++)
bodyHeight += body.children[i].clientHeight;
// Set the container to a certain height
dropdown.style.height = (titleHeight + bodyHeight) + "px";
});
// Mouse leave listener
dropdown.addEventListener('mouseleave', () => {
dropdown.style.height = titleHeight + "px";
});
});
body {
background-color: white;
font-family: Arial;
}
/* ABOVE THIS IS JUST PAGE STYLING */
.aDropdown {
background-color: rgb(255, 255, 255);
border-radius: 5px;
border: 1px solid rgb(165, 165, 165);
display: inline-block;
overflow: hidden;
position: relative;
transition: height .3s;
}
.aDropdown > .title {
margin: 0;
padding: 10px 20px;
}
.aDropdown > .body > * {
display: block;
text-decoration: none;
color: black;
text-align: center;
padding: 10px;
background-color: white;
transition: background-color .5s;
}
.aDropdown > .body > *:hover {
background-color: rgb(225, 225, 225);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="aDropdown">
<p class="title">DropDown</p>
<div class="body">
Item
Item
Item
</div>
</div>
<script src="./index.js"></script>
</body>
</html>