How can I allow the user to switch to page dark theme without using any third-party libraries? (This question answers provide only external libraries, but I want to do it without them.)
:root {
--bg-color: #cfd8dc;
--text-color: #212121;
}
[data-theme="dark"] {
--bg-color: #263238;
--text-color: #e0e0e0;
}
body {
color: var(--text-color);
background-color: var(--bg-color);
font-family: "Playfair Display";
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
}
.toggle-button {
-webkit-appearance: none;
outline: none;
width: 200px;
height: 100px;
background-color: #212121;
border-radius: 50px;
position: relative;
transition: .4s;
}
.toggle-button:before{
content: "";
position: absolute;
height: 100px;
width: 100px;
border-radius: 50px;
top: 0;
bottom: 0;
background-color: #bdbdbd;
transition: .4s;
}
.toggle-button:checked {
background-color: #bdbdbd;
}
.toggle-button:checked:before {
transform: translate(100%);
background-color: #212121;
transition: .4s;
}
<script>
const toggleSwitch = document.querySelector('.toggle-button');
function switchTheme(e) {
if(e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
} else {
document.documentElement.setAttribute('data-theme', 'light');
}
}
toggleSwitch.addEventListener('change', switchTheme, false);
</script>
<nav>
<h1>Light Theme/Dark Theme Selector</h1>
</nav>
<div class="container">
<h2 style="margin-right:20px">Light</h2>
<input type="checkbox" class="toggle-button">
<h2 style="margin-left:20px;">Dark</h2>
</div>
If you want it to allow two designs of the web, use HTML class on html node:
function makeDark() {
document.body.parentNode.classList.remove("light")
document.body.parentNode.classList.add("dark")
}
function makeLight() {
document.body.parentNode.classList.add("light")
document.body.parentNode.classList.remove("dark")
}
.dark {
color: #fff;
background: #012;
}
.light {
color: #000;
background: #def;
}
.dark input {
appearance: none;
background: #000;
color: #fff;
}
<!doctype html>
<html class="dark" lang="en">
<head>
<meta charset=utf8>
<title>Foo</title>
</head>
<body>
<p>Some text</p>
<input value=input text>
<button onclick=makeDark()>Dark</button>
<button onclick=makeLight()>Light</button>
</body>
</html>
You then would also want to store the status in a cookie.
Related
I want to separate the text styling from my header and body. How can I achieve this? I also want to keep the text in the heading inside my hero/background. I also need to add the appropriate media queries or flex's I assume? I am new to coding so please be weary that I am unfamiliar with all the terminology and coding elements. I am in coding bootcamp. I appreciate your help and tips.
* {
margin:0;
padding: 0;
}
/* Header Start */
#vanta-canvas {
width: 100vw;
height: 50vh;
}
.inner_header {
width: 100%;
height: 100%;
margin: 0 auto;
text-align: center;
position: relative;
top: 75px;
}
.flex {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
flex-wrap: nowrap;
align-content: normal;
}
.highlight {
color: blue;
font-family: cursive;
-webkit-font-smoothing: antialiased;
}
body {
color: #fff;
font-family: cursive;
-webkit-font-smoothing: antialiased;
font-size: 25px;
background-color: #b4b4b4;
}
button {
background-color: transparent;
border-radius: 45% 3px;
color: #b4b4b4;
padding: 10px 20px;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
margin: 0 auto;
text-align: center;
position: relative;
top: 90px;
-webkit-font-smoothing: antialiased;
transition: all 0.3s;
}
button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.3s;
}
button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.3s;
}
button:hover, button:focus{
background-color: grey;
color: blue;
}
button:hover span {
padding-right: 25px;
}
button:hover span:after{
opacity: 1;
right: 0;
}
/* Header End */
<!DOCTYPE html>
<html lang="en_US">
<head>
<meta charset="UTF-8" />
<title>Portfolio</title>
<link rel="stylesheet" href="./assets/css/style.css" >
</head>
<body>
<div id="vanta-canvas">
<header>
<h1 class="inner_header" class="flex">
Hello, I'm
<span class="highlight">Brian Mojica.</span>
<br>
I'm a full-stack web develop.
</h1>
<button class="flex" style="vertical-align:middle"><span>
View My Work
</span></button>
</header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta#latest/dist/vanta.waves.min.js"></script>
<script>
VANTA.WAVES({
el: "#vanta-canvas",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 100.00,
minWidth: 100.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x102
})
</script>
</div>
<nav>
Test
</nav>
</body>
</html>
If what you want is a line divider, you can use the <hr> tag.
There are different style attributes you can add, too.
<hr class="dashed">
<hr class="dotted">
<hr class="solid">
<hr class="rounded">
I hope this helps.
Edit:
Sorry, I didn't read your question close enough.
You can add
header {
(css)
}
Just like you have
body {
(css)
}
I want my website to be responsive and adjust to any device. I'm using glitch.com to create this website. For example on mac os, when I set my website to full screen there is a scrolling bar even thought I don't want there to be one. How can I achieve a responsive website? I've tried scaling my website down when on different devices but it wont work. Also, I provided some images and code below (including my website).
Website:
https://runturtle.glitch.me/
Code:
#import url("https://fonts.googleapis.com/css2?family=Rubik&display=swap");
#fname {
margin-bottom: 10px;
}
h1 {
font-weight: bold;
color: #dde6d8;
}
* {
font-family: "Rubik";
user-select: none;
}
form {
margin: auto;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: #a0a0a0;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type="number"] {
-moz-appearance: textfield;
}
h1 {
align-items: center;
}
h3 {
color: #dde6d8;
}
input {
margin: 0 auto;
border: none;
color: black;
background-color: rgb(white);
width: 50%;
height: 15px;
outline: none;
padding: 9px 10px;
border-radius: 4px;
}
button {
color: #183505;
border: none;
cursor: pointer;
padding: 5px 10px;
background-color: #4d7135;
outline: none;
border-radius: 4px;
}
button:hover {
opacity: 0.8;
}
button:active {
cursor: loading;
}
body {
margin: 0;
padding: 0;
background: #1f2f15;
font-family: ubuntu;
color: white;
}
header {
display: flex;
align-items: center;
background: #486b2c;
}
header img {
width: 50px;
background: white;
border-radius: 5px;
margin: 0 20px 0 40px;
}
.dashboard {
width: 150px;
height: 800px;
position: absolute;
left: 10px;
top: 81px;
}
.home {
opacity: 1;
width: 150px;
}
article {
background: #131b0b;
width: 50%;
margin: 20px auto;
border-radius: 10px;
padding: 10px;
}
hr,
article .date {
color: #a0a0a0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Run Turtle</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img
src="https://cdn.glitch.com/1c916b3c-8432-490c-9650-264f03c95b9e%2Frss-icon.png?v=1630185994030"
width="50px"
/>
<h1><strong>Run Turtle</strong></h1>
</header>
<main>
<article class="dashboard">
<h1>Dashboard</h1>
<hr />
<button
onClick="window.location.href='https://runturtle.glitch.me';"
class="home"
>
Home
</button>
<br />
<br />
<button
onClick="window.location.href='register.html';"
class="register"
>
Register
</button>
</article>
<article>
<h1>Welcome to Run Turtle</h1>
<hr />
<p>
Welcome to Run Turtle. Navigate Run Turtle with the dashboared on the
left.
</p>
</article>
</main>
<script src="index.js"></script>
</body>
</html>
Here's an image of when the browser is resized:
You can use the Bootstrap Grid System for a responsive website. The layout is in the form of rows and columns that can be adjusted depending on the device size.
Here's the documentation link.
Personally, I like AMP (Accelerated Mobile Pages.) I myself use it for my site and it works good with page layouts.
AMP has a page on how to set up your HTML document to make a responsive mobile page. Here is the article
I suggest you to follow #media rule. CSS Grid Layout Module will help you to solve the arisen problem. For an example I have put a solution code.
screenshot_1 screenshot_2
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
header {
display: flex;
align-items: center;
background: #486b2c;
}
header img {
width: 50px;
background: white;
border-radius: 5px;
margin: 0 20px 0 40px;
}
.menu {
float: left;
width: 25%;
text-align: center;
}
.menu article {
background-color: #1f2215;
padding: 8px;
height: 800px;
margin-top: 7px;
display: block;
width: 100%;
color: black;
}
input {
margin: 0 auto;
border: none;
color: black;
width: 50%;
height: 15px;
outline: none;
padding: 9px 10px;
border-radius: 4px;
}
button {
color: #183505;
border: none;
cursor: pointer;
padding: 5px 10px;
background-color: #4d7135;
outline: none;
border-radius: 4px;
}
button:hover {
opacity: 0.8;
}
button:active {
cursor: loading;
}
body {
margin: 0;
padding: 0;
background: #1f2f15;
font-family: ubuntu;
color: white;
}
.main {
float: left;
width: 60%;
padding: 0 20px;
}
h1 {
font-weight: bold;
color: #dde6d8;
}
#media only screen and (max-width: 620px) {
.menu,
.main {
width: 100%;
}
.menu {
height: 200px;
}
.main {
background: #1f2f15;
height: 600px;
}
}
</style>
</head>
<body style="font-family:Verdana;">
<div>
<header>
<img src="https://cdn.glitch.com/1c916b3c-8432-490c-9650-264f03c95b9e%2Frss-icon.png?v=1630185994030"
width="50px" />
<h1><strong>Run Turtle</strong></h1>
</header>
</div>
<div>
<div class="menu">
<article>
<h1>Dashboard</h1>
<hr />
<button>
Home
</button>
<br />
<br />
<button>
Register
</button>
</article>
</div>
<div class="main">
<h1>Welcome to Run Turtle</h1>
<hr />
<p>
Welcome to Run Turtle. Navigate Run Turtle with the dashboared on the
left.
</p>
</div>
</div>
When the code below renders in ANY browser, the user agent stylesheet is overriding the form.example in my CSS for the search button. The button is appearing small and not the same size as the input box as it used to. I have confirmed this using the browser console. It's strange because the same CSS has been working fine for months and I haven't changed anything. It stopped working all of a sudden. Strangely, when I run the same code in https://www.codeply.com/p it seems to render correctly.
Here is code:
body {
margin: 0;
height: 100%;
font-family: Courier New, monospace; color: white;
}
{
box-sizing: border-box;
font-family: Courier New, monospace; color: white;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
font-family: Courier New, monospace;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: rgb(48, 10, 36);
color: black;
}
/* Style the content */
.content {
background-color: rgb(48, 10, 36);
padding: 10px;
height: 100%; /*Should be removed. Only for demonstration */
}
table,
td {
border: 1px solid #333;
}
thead,
tfoot {
background-color: #333;
color: #fff;
}
/* Style the footer bar */
.footer {
overflow: hidden;
background-color: #333;
font-family: Courier New, monospace;
}
/* Style the footer links */
.footer a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.footer a:hover {
background-color: rgb(48, 10, 36);
color: black;
}
/* Style the footer
.footer {
background-color: #333;
padding: 10px;
color: white;
}
*/
/* Style the search box */
input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;/* CSS for search file */
body {
font-family: Courier New, monospace;
}
* {
box-sizing: border-box;
}
form.example
width: 80%;
background: #f1f1f1;
}
}
table.example
width: 100%;
background: #f1f1f1;
}
form.example button {
float: left;
width: 30%;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
form.example button:hover {
background: #0b7dda;
}
form.example::after {
content: "";
clear: both;
display: table;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ramster</title>
<link rel="stylesheet" href="/static/index.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, height=100%">
</head>
<body>
<div class="topnav">
Home
Leagues
Teams
Players
</div>
<div class="content">
<h2>Ramster</h2>
<p>A place to play</p>
<form class="example" method="post" action="" style="margin:left;max-width:600px">
<input type="text" placeholder="Search by team or player" name="name">
<button type="submit">Search</button>
</form>
<p></p>
</div>
<div class="content">
<table class="example">
<thead>
<tr>
<th colspan="1">Name</th>
<th colspan="1">Position</th>
<th colspan="1">Team</th>
<th colspan="1">Buy</th>
</tr>
</thead>
{% for item in data %}
<tbody>
<tr>
<td>{{item[1]}}</td>
<td>{{item[2]}}</td>
<td>{{item[3]}}</td>
<td>Buy</td>
{% endfor %}
</tr>
</tbody>
</table>
</div>
<div class="topnav">
Login
Register
Logout
</div>
</body>
</html>
You missed the { in form.example and got one closing } to much after it. Therefore its missing on input[type=text] {
Should work:
form.example {
width: 80%;
background: #f1f1f1;
}
input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;/* CSS for search file */
}
JSFiddle
OR
body {
margin: 0;
height: 100%;
font-family: Courier New, monospace; color: white;
}
{
box-sizing: border-box;
font-family: Courier New, monospace; color: white;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
font-family: Courier New, monospace;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: rgb(48, 10, 36);
color: black;
}
/* Style the content */
.content {
background-color: rgb(48, 10, 36);
padding: 10px;
height: 100%; /*Should be removed. Only for demonstration */
}
table,
td {
border: 1px solid #333;
}
thead,
tfoot {
background-color: #333;
color: #fff;
}
/* Style the footer bar */
.footer {
overflow: hidden;
background-color: #333;
font-family: Courier New, monospace;
}
/* Style the footer links */
.footer a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.footer a:hover {
background-color: rgb(48, 10, 36);
color: black;
}
/* Style the footer
.footer {
background-color: #333;
padding: 10px;
color: white;
}
*/
/* Style the search box */
input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;/* CSS for search file */
}
body {
font-family: Courier New, monospace;
}
* {
box-sizing: border-box;
}
form.example {
width: 80%;
background: #f1f1f1;
}
table.example {
width: 100%;
background: #f1f1f1;
}
form.example button {
float: left;
width: 30%;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
form.example button:hover {
background: #0b7dda;
}
form.example::after {
content: "";
clear: both;
display: table;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ramster</title>
<link rel="stylesheet" href="/static/index.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, height=100%">
</head>
<body>
<div class="topnav">
Home
Leagues
Teams
Players
</div>
<div class="content">
<h2>Ramster</h2>
<p>A place to play</p>
<form class="example" method="post" action="" style="display:inline;">
<input type="text" placeholder="Search by team or player" name="name">
<button type="submit">Search</button>
</form>
<p></p>
</div>
<div class="content">
<table class="example">
<thead>
<tr>
<th colspan="1">Name</th>
<th colspan="1">Position</th>
<th colspan="1">Team</th>
<th colspan="1">Buy</th>
</tr>
</thead>
{% for item in data %}
<tbody>
<tr>
<td>{{item[1]}}</td>
<td>{{item[2]}}</td>
<td>{{item[3]}}</td>
<td>Buy</td>
{% endfor %}
</tr>
</tbody>
</table>
</div>
<div class="topnav">
Login
Register
Logout
</div>
</body>
</html>
It seems there an update in the API or something.
I would suggest to set the overwritten styles an !important flag and/or try a browser style-reset:
td /*!important flag*/
{
border: 1px solid #333 !important;
}
*, html /*set every element an initial style (style-reset)*/
{
margin: 0;
padding: 0;
}
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>