diff --git a/src/css/nav/menu.css b/src/css/nav/menu.css index eb95f0e..d90c418 100644 --- a/src/css/nav/menu.css +++ b/src/css/nav/menu.css @@ -1,28 +1,43 @@ #menu { color: white; - transform: scale( 0 ); - transform-origin: top right; - transition: all 1s; + transition: width 0.8s, height 1s, border-bottom-left-radius 0.7s; position: fixed; top: 0; right: 0; - width: 100vw; - height: 100vh; + height: 0; + width: 0; cursor: default; background-color: rgb(18, 12, 59); -} - -#menu.open { - transform: scale( 1 ); + border-bottom-left-radius: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; } +#menu.open { + transition: width 1s, height 0.8s, border-bottom-left-radius 1.1s; + width: 100vw; + height: 100vh; + border-bottom-left-radius: 0; +} + .menu-container { width: 80%; height: 80%; + opacity: 0; + transition: all 0.3s; +} + +.menu-container.shown { + width: 80%; + height: 80%; + opacity: 1; + transition: all 1s cubic-bezier(1, 0, 0, 1); +} + +.bottom-note { + display: none; } .menu-main { @@ -30,11 +45,11 @@ justify-content: center; align-items: center; width: 100%; - flex-wrap: wrap; + flex-direction: column; } .menu-category { - padding: 2vw; + padding: 1vw; transition: all 1s; transition-delay: 0.5s; } @@ -42,12 +57,13 @@ /* TODO: Make multiple steps for this TODO: Optimise for mobile devices (scale vertically) */ -.menu-category:hover { - padding-right: 15vw; +.menu-cateogry-active { + padding-right: 20vw; transition-delay: 0s; } .category-list { + background-color: rgb(18, 12, 59); transition: all 0.5s; transform: scaleY( 0 ); position: absolute; @@ -57,9 +73,75 @@ justify-content: flex-start; align-items: flex-start; flex-direction: column; + padding-bottom: 5%; } -.menu-category:hover .category-list { +.category-list-active { transform: scaleY( 1 ); transition-delay: 0.5s; +} + +/* + Menu sub items +*/ +.category-item { + padding: 0.5%; + text-decoration: none; + color: white; + background-color: rgba( 0, 0, 0 ,0 ); + width: 100%; + transition: all 1s; +} + +.category-item:hover { + width: 100%; + padding: 1vh 1vw; + background-color: rgb(0, 125, 156); +} + +@media only screen and ( min-width: 999px ) { + .menu-main { + flex-direction: row; + } + + .menu-category { + padding: 2vw; + } + + /* TODO: Make multiple steps for this + TODO: Optimise for mobile devices (scale vertically) */ + + .menu-category:hover { + padding-right: 15vw; + transition-delay: 0s; + } + + .menu-category:hover .category-list { + transform: scaleY( 1 ); + transition-delay: 0.5s; + } + + /* + Menu sub items + */ + + .category-item:hover { + width: 100%; + padding: 1vh 1vw; + background-color: rgb(0, 125, 156); + } + + .bottom-note { + font-family: monospace; + position: fixed; + width: 100%; + bottom: 5%; + left: 0; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + font-size: 75%; + transition: all 1s; + } } \ No newline at end of file diff --git a/src/menu.html b/src/menu.html index 0c3c05f..2384d70 100644 --- a/src/menu.html +++ b/src/menu.html @@ -12,21 +12,25 @@
-
-
+
+
-