Navbar expandible cuando haga clic en iconos

Hola a todos así que quiero hacer algo bastante simple. Quiero hacer un menú lateral que tenga iconos en él. Cuando haga clic en esos iconos debe ampliar la navegación. Similar a cómo canva.com hace su navegación cuando usted entra en un proyecto. Comience con un pequeño navbar con iconos como se muestra en la primera imagen y finalmente vaya a la totalidad expandida como en la segunda imagen.

enter image description here

enter image description here

Tengo el siguiente código que usé como punto de partida y que tipo de obras pero se expande en la palanca si alguien sabe una buena manera de hacer una barra lateral como esta o cómo conseguir mi barra lateral para expandirse en clic por favor hágamelo saber gracias.

ver código completo https://codepen.io/Kamilica/pen/XRbvaL

Pregunta hecha hace 3 años, 4 meses, 28 días - Por javajedi

2 Respuestas:

  • Para lograr un navbar expandible al hacer clic en los iconos, puedes utilizar JavaScript para agregar y quitar una clase que controle la expansión de la navegación. Aquí te muestro un ejemplo de cómo puedes modificar tu codigo para lograr esto:

    • Agrega una clase adicional al menú lateral que controlará la expansión:
    html
    • Agrega un contenedor adicional para los iconos en la barra lateral:
    html
    • Agrega el script de JavaScript que detectará clic en los iconos y expandirá el menú lateral:
    html
    • Define el estilo CSS para la clase "expanded" que expandirá el menú lateral:
    css
.expanded {
  width: 250px; / Define el ancho que deseas cuando esté expandido /
}

    Con estos cambios, al hacer clic en los iconos en la barra lateral, se expandirá el menú lateral. Puedes ajustar el ancho y la apariencia del menú expandido según tus necesidades. Espero que esta solución te sea de utilidad.

    Respondida el Dec 18, 2020 a las 16:52 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Para crear una barra lateral expandible al hacer clic en los iconos, puedes utilizar una combinación de CSS y JavaScript. Aquí tienes un código de ejemplo que puedes utilizar como punto de partida:

    HTML:

    html

    CSS:

    css
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100vh;
  background-color: f5f5f5;  transition: all 0.3s ease-in-out;
}

.sidebar-header {
  padding: 10px;
  background-color: 
    333;
      color: 
    fff;
    }

.sidebar-toggle {
  float: right;
  font-size: 1.5rem;
  cursor: pointer;
}

.sidebar-content {
  padding: 10px;
  overflow: auto;
}

.sidebar-nav {
  list-style-type: none;
  padding: 0;
}

.sidebar-nav li {
  margin-bottom: 10px;
}

.sidebar-nav li a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: 
    333;
    }

.sidebar-nav li a:hover {
  background-color: 
    eee;
    }

.sidebar.expanded {
  width: 250px;
}

.sidebar.collapsed {
  width: 60px;
}

    JavaScript:

    javascript
const sidebar = document.querySelector('.sidebar');
const sidebarToggle = sidebar.querySelector('.sidebar-toggle');

sidebarToggle.addEventListener('click', () => {
  sidebar.classList.toggle('expanded');
});

    Explicación:

    El HTML define la estructura de la barra lateral, con un encabezado, contenido y un botón de alternancia. El CSS define el estilo de la barra lateral, incluyendo su posición, tamaño y comportamiento de expansión/colapsiado. El JavaScript escucha el evento de clic en el botón de alternancia y alterna la clase "expandido" en la barra lateral, lo que hace que se expanda o colapse.

    Personalización:

    Puedes personalizar la barra lateral para que se adapte a tus necesidades editando el HTML, CSS y JavaScript. Por ejemplo, puedes cambiar el ancho de la barra lateral, añadir más enlaces al menú de navegación o utilizar diferentes iconos.

    Consideraciones:

    Asegúrate de que el contenido de la barra lateral es lo suficientemente visible cuando está colapsada. Ten en cuenta el espacio disponible en la pantalla cuando expandas la barra lateral. Considera utilizar un efecto de animación más suave para la expansión/colapsiado.

    Respondida el Dec 18, 2020 a las 17:03 - por Gemini

    Votos positivos: 0 | Votos negativos: 0