index.php

@@ -20,13 +20,14 @@ if ($tab == "") {$tab = "home";}
 
     <header>
 
-		<input class="side-menu" type="checkbox" id="side-menu"/>
+
-        <label class="hamb" for="side-menu"><span class="hamb-line"></span></label>
 
         <h1>
               Mellys Weihnachts Kalender
         </h1>
     </header>
+    <input class="side-menu" type="checkbox" id="side-menu"/>
+    <label class="hamb" for="side-menu"><span class="hamb-line"></span></label>
     <nav>
 		<ul>
 			<li><a href="?tab=home" <?php if ($tab == "home")?>>Home</a></li>

src/sass/_mobil.sass

@@ -1,32 +1,44 @@
+$ulBorderM: 3px ridge darkgreen
+    
 .side-menu
     display: none
 
 @media (max-width: 768px)
     nav
-        width: 100%
+        width: 50%
         height: 100%
         position: fixed
+        float: none
         background-color: #fff
-        overflow: hidden
         max-height: 0
-        transition: max-height .5s ease-out
+        transition: max-height 0.4s ease-out
+        border-left: $ulBorderM
+        border-right: $ulBorderM
+        border-radius: 2rem 2rem 0 0
+        overflow: hidden
+        right: 0
+        
 
         ul
             top: 0
             background: none
-            display: block
             border: none
             box-shadow: none
-
-            a:hover
-                background-color: #fff
-
-
-
-
-
             
-    
+
+        li
+            float: none
+            
+            a
+                font-size: 1.2rem
+
+                &:active, &:hover, &:focus, &.active
+                    color: red
+                    text-decoration: underline
+                    transform: scale(1.1)
+                    background-color: lightblue
+                    width: 100%
+            
     header
         height: 1.5rem
         top: 1rem
@@ -36,7 +48,7 @@
             margin: -0.5rem 0rem 0 40px
             display: inline-block
 
-
+    /* --- Hamburg Menü Start ---
         
 
     .hamb
@@ -44,7 +56,7 @@
         cursor: pointer
         float: right
         padding: 30px 20px
-        margin-top: -2rem
+        margin-top: -5rem
         
 
 
@@ -53,7 +65,7 @@
     .hamb-line
         background: black
         display: inline-block
-        height: 2px
+        height: 3px
         position: relative
         width: 24px
 
@@ -84,6 +96,7 @@
     .side-menu:checked ~
         nav
             max-height: 100%
+            
 
         .hamb .hamb-line
             background: transparent