Palle XVI menu a tendina

G1gg4N1qq4 · Feb 10, 2024 · 8d83f0d · 8d83f0d
1 parent 9e9c28a
commit 8d83f0d
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -47,13 +47,14 @@
                                 <a href="pagine/biomi.html"> 
                                     Biomi» 
                                 </a>
-                                <div class="menubiomi">
-                                    <ul>
-                                        <li>Foreste</li>
-                                        <li>Oceani</li>
-                                        <li>Montagna</li>
-                                    </ul>
-                                </div>
+                                <ul class="menubiomi">
+                                    <li class="animate">Foreste</li>
+                                    <li class="animate">Montagne</li>
+                                    <li class="animate">Pianure</li>
+                                    <li class="animate">Paludi</li>
+                                    <li class="animate">Deserti</li>
+                                    <li class="animate">Oceani</li>
+                                </ul>
                             </li>
 
                             <li class="Global__header__menu__item">
@@ -287,6 +288,10 @@ <h3 >
                     console.log("ciao")
                 });
 
+                $("#Biomi").hover(function() {
+                    $(".menubiomi").toggleClass("menubiomi--open");
+                    console.log("ciao")
+                });
 
                 $(window).scroll(function() {
 

diff --git a/style.css b/style.css
@@ -150,7 +150,6 @@ main{z-index: 0;}
 }
     /* Global Header Menu */
     .Global__header__menu{
-
         width: 44%;
         list-style: none;
     }
@@ -305,11 +304,6 @@ main{z-index: 0;}
     position: fixed;
 }
 
-
-.menubiomi{
-    display: none;
-}
-
 /* Bottoni Azione */
 .cta{
     /* border: 1px solid red; */
@@ -494,18 +488,40 @@ main{z-index: 0;}
         text-align: center;
     }
 
-#Biomi:hover .menubiomi{
+.menubiomi{
+    display: none;
+}
+.menubiomi--open{
     /* margin: 50px 0px 0px 0px; */
+    display: grid;
+    transition: 0.3s;
+    transition-timing-function: ease;
     position: fixed;
     border: 1px solid black;
-    display: block;
-    width: 100px;
+    max-width: 1350px;
     background:#00841f;
-    padding: 0;
+    padding: 0; 
+
 }
-.menubiomi ul{
+.menubiomi li{
     padding: 0;
-    border: 1px solid red;
+    /* border: 1px solid red; */
+
+}
+.menubiomi li{
+    font-family: 'MinecraftRegular';
+    color: rgb(209, 209, 209);
+    padding: 5px 10px;
+    font-size: 24px;
+    border-bottom: 1px solid black;
+    display: flex;
+    flex-wrap: wrap;
+
+}
+.menubiomi li:hover{
+    color: #000;
+    background:rgba(36,255,255,1);
+
 }
 
 
@@ -639,7 +655,7 @@ Smartphone
             background-color: #000000;
             /* background: #005508; */
         }
-        /* Global HEader Icon Bar */
+        /* Global Header Icon Bar */
         .Global__header__icon-bar{
             display: block;
             width: 30px;