Hamburger menu per mobile

appunti/index.html

@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sito Susanna</title>
 
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" href="../style.css">
 </head>
 
@@ -15,7 +16,9 @@
     <header>
         <nav>
             <div class="nav-item" id="mobile-nav-menu">
-                Bla bla bla
+                <span class="material-icons">
+                    more_vert
+                </span>
             </div>
             <div class="nav-item">
                 <a href="..">Home</a>
@@ -54,6 +57,7 @@
                 Lucreziis</a> e <a href="https://poisson.phc.dm.unipi.it/~baldino/">Francesco Baldino</a>
         </div>
     </footer>
+    <script src="../nav.js"></script>
 </body>
 
 </html>

cv/index.html

@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sito Susanna</title>
 
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" href="../style.css">
 </head>
 
@@ -15,7 +16,9 @@
     <header>
         <nav>
             <div class="nav-item" id="mobile-nav-menu">
-                Bla bla bla
+                <span class="material-icons">
+                    more_vert
+                </span>
             </div>
             <div class="nav-item">
                 <a href="..">Home</a>
@@ -44,6 +47,7 @@
                 Lucreziis</a> e <a href="https://poisson.phc.dm.unipi.it/~baldino/">Francesco Baldino</a>
         </div>
     </footer>
+    <script src="../nav.js"></script>
 </body>
 
 </html>

galleria/index.html

@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sito Susanna</title>
 
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" href="../style.css">
 </head>
 
@@ -15,7 +16,9 @@
     <header>
         <nav>
             <div class="nav-item" id="mobile-nav-menu">
-                Bla bla bla
+                <span class="material-icons">
+                    more_vert
+                </span>
             </div>
             <div class="nav-item">
                 <a href="..">Home</a>
@@ -44,6 +47,7 @@
                 Lucreziis</a> e <a href="https://poisson.phc.dm.unipi.it/~baldino/">Francesco Baldino</a>
         </div>
     </footer>
+    <script src="../nav.js"></script>
 </body>
 
 </html>

index.html

@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sito Susanna</title>
 
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" href="style.css">
 </head>
 
@@ -15,7 +16,9 @@
     <header>
         <nav>
             <div class="nav-item" id="mobile-nav-menu">
-                Bla bla bla
+                <span class="material-icons">
+                    more_vert
+                </span>
             </div>
             <div class="nav-item current">
                 <a href="#">Home</a>
@@ -134,6 +137,8 @@
                 Lucreziis</a> e <a href="https://poisson.phc.dm.unipi.it/~baldino/">Francesco Baldino</a>
         </div>
     </footer>
+
+    <script src="./nav.js"></script>
 </body>
 
 </html>

nav.js

@@ -0,0 +1,11 @@
+
+const $mobileMenuButton = document.querySelector('#mobile-nav-menu');
+
+$mobileMenuButton.addEventListener('click', () => {
+    $mobileMenuButton.classList.toggle('openned');
+});
+
+
+
+
+

spasticate/index.html

@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sito Susanna</title>
 
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" href="../style.css">
 </head>
 
@@ -15,7 +16,9 @@
     <header>
         <nav>
             <div class="nav-item" id="mobile-nav-menu">
-                Bla bla bla
+                <span class="material-icons">
+                    more_vert
+                </span>
             </div>
             <div class="nav-item">
                 <a href="..">Home</a>
@@ -44,6 +47,7 @@
                 Lucreziis</a> e <a href="https://poisson.phc.dm.unipi.it/~baldino/">Francesco Baldino</a>
         </div>
     </footer>
+    <script src="../nav.js"></script>
 </body>
 
 </html>

style.css

@@ -196,20 +196,32 @@ h1, h2, h3, h4 {
 
 /* Mobile */
 
+@media screen and (min-width: 513px) {
+    #mobile-nav-menu {
+        display: none;
+    }
+}
+
 @media screen and (max-width: 512px) {
     header {
         padding: 0;
         height: unset;
     }
+
+    header h1 {
+        padding-left: 1rem;
+    }
     
     nav {
         display: flex;
         flex-direction: column;
 
-        position: absolute;
+        /* position: absolute;
-        top: 0;
+        top: 0; */
 
         z-index: 1;
+
+        background: var(--color-4);
     }
     
     nav .nav-item, nav .nav-item.current {
@@ -222,5 +234,10 @@ h1, h2, h3, h4 {
 
     #mobile-nav-menu {
         display: flex;
+        justify-content: flex-start;
+    }
+
+    #mobile-nav-menu:not(.openned) ~ .nav-item {
+        display: none;
     }
 }