Inicio
Comentar
Imágenes
Webgae
Crear menú vanilla-navbar-menu
HTML
Brand
Home
About Us
Services
Web Design
Web Development
Brand Marketing
SEO and Optimizing
Planning
Basic
Standard
Premium
Professional
Resources
Resource One
Resource Two
Resource Three
Resource Four
Resource Five
Contact Us
Maneje el navegador para ver como cambia el menu en diferentes pantallas
CSS
:root { --color-black: hsl(0, 0%, 10%); --color-white: hsl(0, 0%, 100%); --color-darken: hsl(0, 0%, 23%); --color-pink-100: hsl(339, 96%, 94%); --color-pink-200: hsl(339, 91%, 87%); --color-pink-300: hsl(339, 90%, 81%); --color-pink-400: hsl(339, 85%, 74%); --color-pink-500: hsl(339, 84%, 67%); --color-pink-600: hsl(339, 76%, 59%); --color-pink-700: hsl(339, 76%, 52%); --color-pink-800: hsl(339, 68%, 45%); --color-pink-900: hsl(339, 68%, 38%); --shadow-small: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } *, *::before, *::after { padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; list-style: none; list-style-type: none; text-decoration: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } html { font-size: 100%; -webkit-box-sizing: inherit; box-sizing: inherit; scroll-behavior: smooth; } body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--color-black); background: var(--color-white); } a, button { font-family: inherit; font-size: inherit; line-height: inherit; cursor: pointer; border: none; outline: none; background: none; } img, video { display: block; max-width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; } .container { max-width: 75rem; height: auto; margin: 0 auto; padding: 0 1rem; } .brand { font-family: inherit; font-size: 1.75rem; font-weight: 700; line-height: inherit; color: var(--color-pink-700); text-transform: uppercase; } .header { position: fixed; top: 0; left: 0; width: 100%; height: auto; z-index: 100; margin: 0 auto; background: var(--color-white); -webkit-box-shadow: var(--shadow-medium); box-shadow: var(--shadow-medium); } .header .wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 2rem; max-width: 100%; height: 4rem; margin: 0 auto; } .header .menu > .menu-item { position: relative; display: inline-block; margin: 0 0.75rem; } .header .menu > .menu-item > a { display: block; font-family: inherit; font-size: 1rem; font-weight: 600; line-height: inherit; padding: 1rem 0; border: none; outline: none; color: var(--color-black); text-transform: capitalize; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } .header .menu > .menu-item > a .expand { position: relative; display: inline-block; width: 0.75rem; height: 0.75rem; margin-left: 0.35rem; pointer-events: none; border: none; outline: none; } .header .menu > .menu-item > a .expand:before, .header .menu > .menu-item > a .expand:after { position: absolute; -webkit-box-sizing: inherit; box-sizing: inherit; content: ""; top: 50%; left: 50%; width: 100%; height: 2px; background: var(--color-black); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } .header .menu > .menu-item:hover > a { color: var(--color-pink-700); } .header .menu > .menu-item:hover > a .expand::before, .header .menu > .menu-item:hover > a .expand::after { background: var(--color-pink-700); } .header .menu > .menu-item > a .expand::after { -webkit-transform: translate(-50%, -50%) rotate(-90deg); transform: translate(-50%, -50%) rotate(-90deg); } .header .menu > .menu-item > .sub-menu > .menu-item > a:hover { color: var(--color-pink-700); } .header .menu > .menu-item > .sub-menu { position: absolute; top: 100%; left: -1rem; width: 13rem; height: auto; padding: 0.75rem 0; border: none; outline: none; opacity: 0; visibility: hidden; border-top: 3px solid var(--color-pink-700); background: var(--color-white); -webkit-box-shadow: var(--shadow-medium); box-shadow: var(--shadow-medium); -webkit-transform: translateY(1rem); transform: translateY(1rem); -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } .header .menu > .menu-item > .sub-menu > .menu-item { display: block; } .header .menu > .menu-item > .sub-menu > .menu-item > a { display: block; font-family: inherit; font-size: 1rem; font-weight: 600; line-height: inherit; padding: 0.5rem 1.25rem; color: var(--color-black); text-transform: capitalize; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } .header .burger { position: relative; display: none; width: 2rem; height: 1rem; border: none; outline: none; cursor: pointer; opacity: 0; visibility: hidden; background: none; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } .header .burger-line { position: absolute; display: block; width: 100%; height: 2px; left: 0; border: none; outline: none; opacity: 1; border-radius: 0.25rem; background: var(--color-black); -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 0.25s ease; transition: all 0.25s ease; } .header .burger-line:nth-child(1) { top: 0; } .header .burger-line:nth-child(2), .header .burger-line:nth-child(3) { top: 0.5rem; } .header .burger-line:nth-child(4) { top: 1rem; } .header .overlay { position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 100; opacity: 0; visibility: hidden; background: rgba(0, 0, 0, 0.65); -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } @media only screen and (min-width: 993px) { .header .menu > .menu-item-child:hover > .sub-menu { display: block; opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .header .menu > .menu-item-child:hover > a .expand::after { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } } @media only screen and (max-width: 992px) { .header .overlay.active { display: block; opacity: 1; visibility: visible; } .header .navbar { position: fixed; top: 0; left: -100%; width: 75%; height: 100%; z-index: 999; opacity: 0; overflow-y: auto; visibility: hidden; background: var(--color-white); -webkit-box-shadow: var(--shadow-medium); box-shadow: var(--shadow-medium); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .header .navbar.active { left: 0rem; opacity: 1; visibility: visible; } .header .menu { width: 100%; height: auto; margin: 1rem 0; } .header .menu > .menu-item { display: block; margin: 0; } .header .menu > .menu-item-child > a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header .menu > .menu-item > a { padding: 0.625rem 1.25rem; color: var(--color-black); } .header .menu > .menu-item > a .expand::before, .header .menu > .menu-item > a .expand::after { background: var(--color-black); } .header .menu > .menu-item-child.active > a .expand:after { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } .header .menu > .menu-item > .sub-menu { position: relative; top: auto; left: auto; width: 100%; max-height: 0; padding: 0px; border: none; outline: none; opacity: 1; overflow: hidden; visibility: visible; background: transparent; -webkit-box-shadow: none; box-shadow: none; -webkit-transform: translateY(0px); transform: translateY(0px); } .header .menu > .menu-item > .sub-menu > .menu-item > a { padding: 0.625rem 2rem; color: var(--color-black); } .header .burger { display: block; opacity: 1; visibility: visible; } }
JavaScript
const navbarMenu = document.getElementById('navbar'); const burgerMenu = document.getElementById('burger'); const overlayMenu = document.getElementById('overlay'); // Toggle Menu Function burgerMenu.addEventListener('click', toggleMenu); overlayMenu.addEventListener('click', toggleMenu); function toggleMenu() { navbarMenu.classList.toggle('active'); overlayMenu.classList.toggle('active'); } // Collapse SubMenu Function navbarMenu.addEventListener('click', (e) => { if (e.target.hasAttribute('data-toggle') && window.innerWidth <= 992) { e.preventDefault(); const menuItemHasChildren = e.target.parentElement; // If menu-item-child is Expanded, then Collapse It if (menuItemHasChildren.classList.contains('active')) { collapseSubMenu(); } else { // Collapse the Existing Expanded menu-item-child if (navbarMenu.querySelector('.menu-item-child.active')) { collapseSubMenu(); } // Expanded the New menu-item-child menuItemHasChildren.classList.add('active'); const subMenu = menuItemHasChildren.querySelector('.sub-menu'); subMenu.style.maxHeight = subMenu.scrollHeight + 'px'; } } }); function collapseSubMenu() { navbarMenu.querySelector('.menu-item-child.active .sub-menu').removeAttribute('style'); navbarMenu.querySelector('.menu-item-child.active').classList.remove('active'); } // Fixed Resize Screen Function window.addEventListener('resize', () => { if (this.innerWidth > 992) { // If navbarMenu is Open, then Close It if (navbarMenu.classList.contains('active')) { toggleMenu(); } // If menu-item-child is Expanded, then Collapse It if (navbarMenu.querySelector('.menu-item-child.active')) { collapseSubMenu(); } } });
Puede cambiar código para ver el resultado
Resultado ↓
No hay comentarios:
Publicar un comentario
Entrada más reciente
Entrada antigua
Inicio
Suscribirse a:
Enviar comentarios (Atom)
No hay comentarios:
Publicar un comentario