quatuorbellefeuille.com

commit 87822e841f8ece0256b7dc30d65fece509517c5a
parent 03629bb44b541ba63b61c6f03bf3b6a7d34e64ef
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Wed, 30 Dec 2020 23:47:22 +0100

Settle on a transition for dropdown display

Diffstat:
M
commun.css
 | 
28
+++++++++-------------------

1 file changed, 9 insertions(+), 19 deletions(-)
diff --git a/commun.css b/commun.css
@@ -76,7 +76,6 @@ nav li.dropdown {
     position: relative;
 }
 nav li.dropdown ul {
-    display: none;
     position: absolute;
     padding-left: 0;
     width: 100%;
@@ -84,22 +83,14 @@ nav li.dropdown ul {
     background: lightgrey;
     z-index: 1;
 
-    /* TODO: transition? ⚠ display: block */
-
-    /* overflow: hidden; */
-    /* max-height: 0; */
-    /* transition: max-height 0.5s; */
-
-    /* transform: scaleY(0); */
-    /* transform-origin: top; */
-    /* transition: transform 0.5s; */
-
+    overflow: hidden;
+    max-height: 0;
+    transition: max-height 0.5s;
 }
 nav li.dropdown:hover ul {
-    display: block;
-    /* TODO: transition? ⚠ redundant display: block */
-    /* max-height: 100vh; */
-    /* transform: scaleY(1); */
+    /* ⚠ Magic constant: must be big enough to show the whole dropdown,
+       but not too big otherwise the transition will be "delayed". */
+    max-height: 5em;
 }
 nav li.dropdown > ul > li {
     list-style-type: none;
@@ -112,16 +103,15 @@ nav li.dropdown > ul > li a {
     padding-inline-start: 10%;
 }
 nav li.dropdown > ul > li a img {
-    width: 32px;
-    height: 32px;
+    width: 1em;
+    height: 1em;
 }
 
-
 .current {
     background-color: white;
 }
 
-nav ol li a {
+nav li a {
     text-decoration: none;
 }