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-menu">
<button class="dropdown-button">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<ul class="dropdown-content">
<li>Item 1</a>
<li>Item 2</a>
<li>Item 3</a>
</div>
</div>
</div>

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

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

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

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

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

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