Как преобразовать значок гамбургера в меню навигации в X при нажатии?
Опубликовано: 5 Января, 2022
Меню навигации - самый важный раздел веб-сайта. Это помогает в навигации по сайту. Правильная анимация не только улучшает внешний вид сайта, но и обеспечивает удобный интерфейс для клиентов. Следовательно, эта анимация позволит преобразовать три строки или значок гамбургера, как его часто называют, в значок X при нажатии и наоборот.
Код будет содержать 3 разные структуры, которые позволят применить эту анимацию. Тело HTML, тело CSS и тело JavaScript.
Создание структуры: В этом разделе мы создадим базовую структуру с помощью HTML. Мы также добавим ссылку font-awesome для создания линий для создания значка гамбургера.
<!DOCTYPE html>< html > < head > < meta charset = "UTF-8" /> < meta name = "viewport" content = "width=device-width" /> < meta http-equiv = "X-UA-Compatible" content = "ie=edge" /> < link rel = "stylesheet" href = < title > Converting the hamburger icon to X and vice versa </ title ></ head > < body id = "bg-img" > < header > < div class = "menu-btn" > < div class = "btn-line" ></ div > < div class = "btn-line" ></ div > < div class = "btn-line" ></ div > </ div > < nav class = "menu" > < div class = "menu-branding" > < div class = "portrait" > < img src = alt = "" /> </ div > </ div > < ul class = "menu-nav" > < li class = "nav-item current" > < a href = "#" class = "nav-link" > HOME</ a > </ li > < li class = "nav-item" > < a href = "#" class = "nav-link" > ABOUT ME</ a > </ li > < li class = "nav-item" > < a href = "#" class = "nav-link" > MY WORK</ a > </ li > < li class = "nav-item" > < a href = "#" class = "nav-link" > CONTACT ME</ a > </ li > </ ul > </ nav > </ header ></ body > </ html > |
Разработка структуры: В предыдущем разделе мы создали базовую структуру значка гамбургера. В этом разделе мы разработаем структуру с помощью CSS.
<style> /* Styling the menu button */ .menu-btn { position : absolute ; z-index : 3 ; right : 35px ; top : 35px ; cursor : pointer ; transition: all 0.5 s ease-out; } /* Styling the hamburger lines */ .menu-btn .btn-line { width : 28px ; height : 3px ; margin : 0 0 5px 0 ; background : black ; transition: all 0.5 s ease-out; } /* Adding tranform to the X */ .menu-btn.close { transform: rotate( 180 deg); } /* Styling the three lines to make it an X */ .menu-btn.close .btn-line:nth-child( 1 ) { transform: rotate( 45 deg) translate( 5px , 5px ); } .menu-btn.close .btn-line:nth-child( 2 ) { opacity: 0 ; } .menu-btn.close .btn-line:nth-child( 3 ) { transform: rotate( -45 deg) translate( 7px , -6px ); } /* Styling the position of the menu icon */ .menu { position : fixed ; top : 0 ; width : 100% ; opacity: 0.9 ; visibility : hidden ; } .menu. show { visibility : visible ; } /* Adding a transition delay to the 4 items in the navigation menu */ .nav-item:nth-child( 1 ) { transition-delay: 0.1 s; } .nav-item:nth-child( 2 ) { transition-delay: 0.2 s; } .nav-item:nth-child( 3 ) { transition-delay: 0.3 s; } .nav-item:nth-child( 4 ) { transition-delay: 0.4 s; }</style> |
Добавление JavaScript: в этом разделе мы добавим JavaScript, который необходим нам для анимации всех трех строк значка гамбургера. Он добавляет к значку EventListener. Этот EventListener переключает меню, которое должно отображаться при щелчке и должно быть скрыто при щелчке. Он определяет состояние кнопки меню, будь то состояние X или состояние гамбургера.
<script> // select dom items const menuBtn = document.querySelector( ".menu-btn" ); const menu = document.querySelector( ".menu" ); const menuNav = document.querySelector( ".menu-nav" ); const menuBranding = document.querySelector( ".menu-branding" ); const navItems = document.querySelectorAll( ".nav-item" ); // Set the initial state of the menu let showMenu = false ; menuBtn.addEventListener( "click" , toggleMenu); function toggleMenu() { if (!showMenu) { menuBtn.classList.add( "close" ); menu.classList.add( "show" ); menuNav.classList.add( "show" ); menuBranding.classList.add( "show" ); navItems.forEach((item) => item.classList.add( "show" )); // Reset the menu state showMenu = true ; } else { menuBtn.classList.remove( "close" ); menu.classList.remove( "show" ); menuNav.classList.remove( "show" ); menuBranding.classList.remove( "show" ); navItems.forEach((item) => item.classList.remove( "show" )); // Reset the menu state showMenu = false ; } }</script> |
Окончательное решение: окончательное решение - это комбинация кодов HTML, CSS и JavaScript для получения желаемого результата анимации.
<!DOCTYPE html>< html > < head > < meta charset = "UTF-8" /> < meta name = "viewport" content = "width=device-width" /> < meta http-equiv = "X-UA-Compatible" content = "ie=edge" /> < link rel = "stylesheet" href = < title > Converting the hamburger icon to X and vice versa </ title > < style > /* Styling the menu button */ .menu-btn { position: absolute; z-index: 3; right: 35px; top: 35px; cursor: pointer; transition: all 0.5s ease-out; } /* Styling the hamburger lines */ .menu-btn .btn-line { width: 28px; height: 3px; margin: 0 0 5px 0; background: black; transition: all 0.5s ease-out; } /* Adding tranform to the X */ .menu-btn.close { transform: rotate(180deg); } /* Styling the three lines to make it an X */ .menu-btn.close .btn-line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .menu-btn.close .btn-line:nth-child(2) { opacity: 0; } .menu-btn.close .btn-line:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); } /* Styling the position of the menu icon */ .menu { position: fixed; top: 0; width: 100%; opacity: 0.9; visibility: hidden; } .menu.show { visibility: visible; } /* Adding a transition delay to the 4 items in the navigation menu */ .nav-item:nth-child(1) { transition-delay: 0.1s; } .nav-item:nth-child(2) { transition-delay: 0.2s; } .nav-item:nth-child(3) { transition-delay: 0.3s; } .nav-item:nth-child(4) { transition-delay: 0.4s; } </ style ></ head > < body id = "bg-img" > < header > < div class = "menu-btn" > < div class = "btn-line" ></ div > < div class = "btn-line" ></ div > < div class = "btn-line" ></ div > </ div > < nav class = "menu" > < div class = "menu-branding" > < div class = "portrait" > < img src = alt = "" /> </ div > </ div > < ul class = "menu-nav" > < li class = "nav-item current" > < a href = "#" class = "nav-link" > HOME </ a > </ li > < li class = "nav-item" > < a href = "#" class = "nav-link" > ABOUT ME </ a > </ li > < li class = "nav-item" > < a href = "#" class = "nav-link" > MY WORK </ a > </ li > < li class = "nav-item" > < a href = "#" class = "nav-link" > CONTACT ME </ a > </ li > </ ul > </ nav > </ header > < script > // Select dom items const menuBtn = document.querySelector(".menu-btn"); const menu = document.querySelector(".menu"); const menuNav = document.querySelector(".menu-nav"); const menuBranding = document.querySelector(".menu-branding"); const navItems = document.querySelectorAll(".nav-item"); // Set the initial state of the menu let showMenu = false; menuBtn.addEventListener("click", toggleMenu); function toggleMenu() { if (!showMenu) { menuBtn.classList.add("close"); menu.classList.add("show"); menuNav.classList.add("show"); menuBranding.classList.add("show"); navItems.forEach((item) => item.classList.add("show")); // Reset the menu state showMenu = true; } else { menuBtn.classList.remove("close"); menu.classList.remove("show"); menuNav.classList.remove("show"); menuBranding.classList.remove("show"); navItems.forEach((item) => item.classList.remove("show")); // Reset the menu state showMenu = false; } } </ script ></ body > </ html > |
Выход: 