punkfairie/odin-css-exercises
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update with comments in solution.css

Browse source
This commit is contained in:
conor 2021-10-17 23:17:42 +01:00
parent 05b66966ce
commit 84d5b9d887
4 changed files with 21 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
animation/02-drop-down/index.html
View file

@ -10,8 +10,8 @@
<body> <body>
<div class="dropdown-container"> <div class="dropdown-container">
<div class="dropdown-menu"> <div class="dropdown-menu">
<button class="dropdown-button">Dropdown</button> <button>Dropdown</button>
<ul class="dropdown-content"> <ul>
<li>Item 1</a> <li>Item 1</a>
<li>Item 2</a> <li>Item 2</a>
<li>Item 3</a> <li>Item 3</a>

22
animation/02-drop-down/solution/solution.css
View file

@ -16,7 +16,7 @@
position: relative; position: relative;
} }
.dropdown-button { button {
background-color: rgb(108, 238, 255); background-color: rgb(108, 238, 255);
padding: 16px; padding: 16px;
font-size: 16px; font-size: 16px;
@ -30,26 +30,36 @@ ul {
width: 160px; width: 160px;
list-style: none; list-style: none;
text-align: center; text-align: center;
overflow: hidden;
max-height: 0;
transition: max-height 0.25s ease-out;
} }
li { li {
padding: 16px; padding: 16px;
} }
/* SOLUTION */
/* disclaimer: duplicating the `ul` element here isn't best practice.
In your solution you probably put it right inside the existing `ul`,
which _is_ the best practice.
We separated it out here to make it extra clear what has changed. */
ul {
overflow: hidden;
max-height: 0;
transition: max-height 0.25s ease-out;
}
.dropdown-menu:hover ul { .dropdown-menu:hover ul {
max-height: 500px; max-height: 500px;
transition: max-height 0.5s ease-out; transition: max-height 0.5s ease-out;
} }
.dropdown-menu:hover .dropdown-button { button:hover {
cursor: pointer; cursor: pointer;
background-color: rgb(59, 232, 255); background-color: rgb(59, 232, 255);
} }
.dropdown-content li:hover { ul li:hover {
cursor: pointer; cursor: pointer;
background-color: #ddd; background-color: #ddd;
} }

4
animation/02-drop-down/solution/solution.html
View file

@ -10,8 +10,8 @@
<body> <body>
<div class="dropdown-container"> <div class="dropdown-container">
<div class="dropdown-menu"> <div class="dropdown-menu">
<button class="dropdown-button">Dropdown</button> <button>Dropdown</button>
<ul class="dropdown-content"> <ul>
<li>Item 1</a> <li>Item 1</a>
<li>Item 2</a> <li>Item 2</a>
<li>Item 3</a> <li>Item 3</a>

2
animation/02-drop-down/style.css
View file

@ -16,7 +16,7 @@
position: relative; position: relative;
} }
.dropdown-button { button {
background-color: rgb(108, 238, 255); background-color: rgb(108, 238, 255);
padding: 16px; padding: 16px;
font-size: 16px; font-size: 16px;