finalizado header pag principal

jedahee · jedahee · commit e3ba8b0d7611 · 2021-02-01T21:41:24.000+01:00
diff --git a/app.js b/app.js
@@ -0,0 +1,19 @@
+var boton_menu = document.getElementById("boton_menu");
+var img_menu = document.getElementById("img_menu");
+var nav = document.getElementById("nav");
+var activo = true;
+
+boton_menu.addEventListener("click", () => {
+    boton_menu.classList.toggle('hacerAnimacion');
+    
+    //toggle style
+    if (activo) {
+        img_menu.style.opacity = 0;
+        nav.style.transform = 'translateY(0%)';
+        activo = false;
+    } else {
+        img_menu.style.opacity = 1;
+        nav.style.transform = 'translateY(-100%)';
+        activo = true;
+    }
+});
diff --git a/index.html b/index.html
@@ -10,6 +10,12 @@
 <body>
     <header>
         <button id="boton_menu"><img id="img_menu" src="img/boton_menu.svg" alt="Imagen menu hamburguesa"></button>
+        <nav id="nav">
+            <a href="#" class="item_menu">Inicio</a>
+            <a href="#" class="item_menu">Proyectos</a>
+            <a href="#" class="item_menu">Cursos</a>
+            <a href="#" class="item_menu">Contacto</a>
+        </nav>
     </header>
     <main>
         
@@ -18,5 +24,7 @@
     <footer>
 
     </footer>
+
+    <script src="app.js"></script>
 </body>
 </html>
diff --git a/style.css b/style.css
@@ -1,6 +1,9 @@
+@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');
+
 html, body {
     height: 100%;
     margin: 0;
+    font-family: 'Raleway', sans-serif;
 }
 
 header {
@@ -15,11 +18,14 @@ header {
 #img_menu {
     padding: 5px;
     border-radius: 7px;
-    transition: opacity 0.3s ease-in-out;
+    transition: opacity 0.35s ease-in-out;
     height: 32px;
+    z-index: 0;
 }
 
 #boton_menu {
+    position: absolute;
+    z-index: 1;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -39,14 +45,59 @@ header {
     transition: transform 0.3s ease-in-out;
 }
 
-#boton_menu:hover #img_menu {
-    opacity: 0;
-}
-
-#boton_menu:hover::after {
+.hacerAnimacion::after {
     transform: rotate(45deg);
 }
 
-#boton_menu:hover::before {
+.hacerAnimacion::before {
     transform: rotate(-45deg);
-}
+}
+
+#nav {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    box-sizing: border-box;
+    height: auto;
+    width: 100%;
+    z-index: 0;
+    overflow: hidden;
+    transform: translateY(-100%);
+    transition: transform 0.3s ease-in-out;
+}
+
+.item_menu {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 2em;
+    height: 70px;
+    width: 100%;
+    background-color: #484848;
+    text-decoration: none;
+    text-emphasis: none;
+    color: white;
+    border-bottom: 1px solid white;
+    z-index: 0;
+}
+
+
+.item_menu::before {
+    content: " ";
+    position: absolute;
+    display: block;
+    height: 70px;
+    width: 100%;
+    background-color: #E04545;
+    transform: translateY(500px);
+    z-index: -1;
+    transition: transform 0.4s ease-in-out;
+
+}
+
+.item_menu:hover::before {
+    transform: translateY(0%);
+}
