tod
/
odin-default-css-exercises
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement dropdown transition

This commit is contained in:
conor 2021-10-17 22:56:50 +01:00
parent f883283308
commit d7b6741657
4 changed files with 34 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
animation/02-drop-down/index.html
View File

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

37
animation/02-drop-down/solution/solution.css
View File

@ -1,5 +1,7 @@
body { * {
padding: 0;
margin: 0; margin: 0;
font-family: Arial, Helvetica, sans-serif;
} }
.dropdown-container { .dropdown-container {
@ -12,7 +14,6 @@ body {
.dropdown-menu { .dropdown-menu {
position: relative; position: relative;
display: inline-block;
} }
.dropdown-button { .dropdown-button {
@ -22,30 +23,25 @@ body {
border: none; border: none;
} }
.dropdown-content { ul {
visibility: hidden;
position: absolute; position: absolute;
left: -25%; left: -25%;
background-color: rgb(189, 188, 188); background-color: rgb(189, 188, 188);
width: 160px; width: 160px;
display: flex; list-style: none;
flex-direction: column;
/* max-height: 0; */
/* transition: max-height 0.25s ease-out; */
}
a {
font-family: Arial, Helvetica, sans-serif;
color: black;
padding: 12px 16px;
text-decoration: none;
text-align: center; text-align: center;
overflow: hidden;
max-height: 0;
transition: max-height 0.25s ease-out;
} }
.dropdown-menu:hover .dropdown-content { li {
visibility: visible; padding: 16px;
/* max-height: 500px; }
transition: max-height 0.25s ease-out; */
.dropdown-menu:hover ul {
max-height: 500px;
transition: max-height 0.5s ease-out;
} }
.dropdown-menu:hover .dropdown-button { .dropdown-menu:hover .dropdown-button {
@ -53,6 +49,7 @@ a {
background-color: rgb(59, 232, 255); background-color: rgb(59, 232, 255);
} }
.dropdown-content a:hover { .dropdown-content li:hover {
cursor: pointer;
background-color: #ddd; background-color: #ddd;
} }

8
animation/02-drop-down/solution/solution.html
View File

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

22
animation/02-drop-down/style.css
View File

@ -1,5 +1,7 @@
body { * {
padding: 0;
margin: 0; margin: 0;
font-family: Arial, Helvetica, sans-serif;
} }
.dropdown-container { .dropdown-container {
@ -12,7 +14,6 @@ body {
.dropdown-menu { .dropdown-menu {
position: relative; position: relative;
display: inline-block;
} }
.dropdown-button { .dropdown-button {
@ -22,20 +23,15 @@ body {
border: none; border: none;
} }
.dropdown-content { ul {
visibility: hidden;
position: absolute; position: absolute;
left: -25%; left: -25%;
background-color: rgb(189, 188, 188); background-color: rgb(189, 188, 188);
width: 160px; width: 160px;
display: flex; list-style: none;
flex-direction: column;
}
a {
font-family: Arial, Helvetica, sans-serif;
color: black;
padding: 12px 16px;
text-decoration: none;
text-align: center; text-align: center;
} }
li {
padding: 16px;
}