Design comparison
Solution retrospective
Hi everyone, there are some problems on this challenge, the mobile menu is not good, because I don't know the javascript yet and I didn't arrange in the right order with flexbox on the mobile version. But I will progress and change these mistakes. Good day to all
Community feedback
- @CarlosRubio9827Posted over 3 years ago
Excuse me for my writting in English, but dont is my native languaje. Hi, in the section of menu you have to use javascript and a property of css that don't is common In the part of HTML, after of tag "<body>", you should put this (it have of be the first after tag body):
<section class="menu"> <ul> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Projects</a></li> <li class="menu-contact"><a href="#">Contact</a></li> </ul> </section> In the CSS, is important that use the property position: absolute and opacity: 0, and the keyframes is for the transitions. ".menu{ position: absolute; background: var(--White); height: 430px; width: 89vw; top: 110px; left: 0; right: 0; margin: auto; opacity: 0; } .menu-desactive{ animation: example1 1s linear forwards; } @keyframes example1 { 0%{ opacity: 1; } 100%{ opacity: 0; } } .menu-active{ animation: example 1s linear forwards; } @keyframes example { 0%{ opacity: 0; } 100%{ opacity: 1; } } .menu::before{ position: absolute; content:""; width: 0px; height: 0px; top: -25px; right: 0px; border-top: 50px solid transparent; border-left: 50px solid transparent; border-right: 50px solid var(--White); }" And in the javascript, you have to access al DOM and add event to the element that have the class hamburger-menu: This part of HTML is for the first section, I add the images in CSS. " <section class="orange"> <p class="orange-title">sunnyside</p> <span class="orange-menu"></span> <p class="orange-description">WE ARE CREATIVES</p> <span class="orange-arrowDown"></span> </section>" " const orangeMenu = document.querySelector('.orange-menu'); orangeMenu.addEventListener('click', ()=>{ const menu = document.querySelector('.menu'); if(menu.classList.contains('menu-active')){ menu.classList.remove('menu-active'); menu.classList.add('menu-desactive'); }else{ menu.classList.add('menu-active'); menu.classList.remove('menu-desactive'); } })"1@Shiryu790Posted over 3 years ago@CarlosRubio9827 No hay problema, puedes escribirme en Español también, fue mi segunda lengua en la escuela. Gracias por tu consejo. Buenas tardes
1
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord