Hice una barra de navegación lateral que, cuando la pantalla cambia de tamaño por debajo de 662 px, mostrará un botón, que al hacer clic mostrará la misma barra de navegación en toda la pantalla.
(He hecho que la navegación desaparezca y el botón aparezca, solo necesito hacerlo para que el botón muestre el botón de navegación cuando se haga clic. También necesitaré un botón de cierre para eso (obviamente). ).
Esto es lo que tengo hasta ahora:
nav { position: fixed; top: 0px; left: 0; width: 400px; height: 100%; background: #fff; color: #111; text-align: center; padding-top: 25px; border: none; border-right: 5px solid #0088ff; z-index: 1; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; display: flex; flex-direction: column; align-items: center; } nav h1, h2, h3, h4, h5, h6 { color: #111; } .show-nav { background: #0088ff; color: #fff; border: none; margin-left: none; top: 200px; margin-top: 200px; display: none; left: 50px; } .show-nav i { color: #fff; } .show-nav a { color: #fff; } @media screen and (max-width: 662px) { nav { display: none; } .show-nav { display: block; } .show-nav:target nav { display: inline; width: 100%; } } <button class="show-nav"><a href="">Navigation</a></button> <nav> <h1>Navigation:</h1> <br> <a href="link.html">Link</a> <a href="link.html">Link</a> <a href="link.html">Link</a> <a href="link.html">Link</a> <a href="link.html">Link</a> <a href="link.html">Link</a> <br> </nav>¿Es eso posible?
Agregue posición e índice a su btn y use el código js:
btn.onclick= function(e){ var nav = document.querySelector("nav"); if (nav.style.display=="inline-block") return nav.style.display = "none"; else return nav.style.display="inline-block"; btn.style.display = "block" }; nav { position: fixed; top: 0px; left: 0; width: 400px; height: 100%; background: #fff; color: #111; text-align: center; padding-top: 25px; border: none; border-right: 5px solid #0088ff; z-index: 1; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; display: flex; flex-direction: column; align-items: center; } nav h1, h2, h3, h4, h5, h6 { color: #111; } .show-nav { background: #0088ff; color: #fff; border: none; margin-left: none; top: 200px; margin-top: 200px; display: none; left: 50px; z-index: 2; position:relative; } .show-nav i { color: #fff; } .show-nav a { color: #fff; } @media screen and (max-width: 662px) { nav { display: none; } .show-nav { display: block; } .show-nav:target nav { display: inline; width: 100%; } } <button id="btn" class="show-nav">Navigation</button> <nav> <h1>Navigation:</h1> <a href="link.html">Link</a> <a href="link.html">Link</a> <a href="link.html">Link</a> <a href="link.html">Link</a> <a href="link.html">Link</a> <a href="link.html">Link</a> </nav>Primero, quitaría la etiqueta de anclaje del botón. Semánticamente, se usa un botón para desencadenar un evento, mientras que una etiqueta de anclaje se usa para vincular al usuario a otra ubicación. Luego, debe agregar un controlador js al botón para poder alternar las clases en los elementos que desea mostrar/ocultar.
<!-- let's give that button a class --> <button class="nav-open-button">Navigation</button> <!-- let's make a close button --> <button class="nav-close-button">X</button> var openButton = document.querySelector('.nav-open-button'), closeButton = document.querySelector('.nav-close-button'), nav = document.querySelector('nav'), navIsOpen = false; openButton.addEventListener('click', function(e) { e.preventDefault(); toggleNav(); }); closeButton..addEventListener('click', function(e) { e.preventDefault(); toggleNav(); }); var toggleNav = function() { if (navIsOpen) { navIsOpen = false; nav.classList.remove('open'); } else { navIsOpen = true nav.classList.add('open'); } }; Luego puede actualizar su css de acuerdo con la clase 'abierta' en el elemento <nav> .