SethTrowbridge/devo-book
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

simpler menu animations

Browse Source
This commit is contained in:
TreetopFlyer 2021-08-16 15:34:08 -04:00
parent 913b9d852a
commit bfc8f36ff3
1 changed files with 20 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
index.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1" > <meta name="viewport" content="width=device-width, initial-scale=1" >
<meta charset="utf-8"> <meta charset="utf-8">
<style> <style>
@font-face { @font-face {
@ -302,7 +302,7 @@ nav > .detail
{ {
display:block; display:block;
position:absolute; position:absolute;
width:33px; width:40px;
right:0; right:0;
transition: width 0.4s 0.4s; transition: width 0.4s 0.4s;
} }
@ -311,11 +311,6 @@ nav > .detail
{ {
height:100%; height:100%;
} }
[nav-open] nav > .detail
{
width:100%;
}
nav > .detail.cap nav > .detail.cap
{ {
height:33px; height:33px;
@ -370,62 +365,59 @@ nav .button
} }
nav .button::before, nav .button::after nav .button::before, nav .button::after
{ {
display:block; display:block;
position:absolute; position:absolute;
top:20px; top:20px;
left:0; left:0;
width:100%; width:100%;
text-align: center; box-sizing: border-box;
padding-right:48px;
text-align: right;
text-transform:uppercase; text-transform:uppercase;
font-weight:900; font-weight:900;
transition:left 0.4s; transition:left 0.4s, top 0.4s;
} }
nav .button::before nav .button::before
{ {
box-sizing: border-box;
content:"Menu"; content:"Menu";
transition-delay:0.4s;
text-align:right;
padding-right:45px;
} }
nav .button::after nav .button::after
{ {
content:"Close"; content:"Close";
left:100%; top:180%;
transition-delay: 0.4s;
text-align:left;
padding-left:45px;
} }
[nav-open] nav .button::before [nav-open] nav .button::before
{ {
left:100%; left:180%;
} }
[nav-open] nav .button::after [nav-open] nav .button::after
{ {
left:0%; top:28px;
} }
nav > ul nav > ul
{ {
position: absolute; position: absolute;
padding: 31px;
margin: 0;
top: 50vh; top: 50vh;
left:100%; left:0;
width:100%; width:100%;
box-sizing: border-box;
padding: 0 48px 0 0;
margin: 0;
transform: translateY(-50%); transform: translateY(-50%);
transition:left 0.4s 0.5s; transition:left 0.4s 0.5s;
list-style-type: none; list-style-type: none;
text-align: right;
} }
nav > ul a nav > ul a
{ {
display:block;
padding:10px 0 10px 0;
text-decoration: none !important; text-decoration: none !important;
text-transform: uppercase;
color:black !important; color:black !important;
} }
[nav-open] nav > ul
{
left:0%;
}
.Dim .Dim
{ {
@ -437,7 +429,7 @@ nav > ul a
height: 65px; height: 65px;
width: 100%; width: 100%;
background: #fff; background: #fff;
opacity: 0.8; opacity: 0.9;
transition: height 0.4s; transition: height 0.4s;
} }
[nav-open] .Dim [nav-open] .Dim