Tengo algunos problemas reales al intentar que mi barra lateral / contenido de navegación (usando Bootstrap) se muestre (se expanda) de forma predeterminada en el escritorio y se cierre de forma predeterminada en el móvil y que el icono se muestre solo en el móvil. Parece que no puedo hacer que esto funcione.
<nav class="menu menu-open" id="theMenu">
<div class="menu-wrap">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars menu-close d-lg-none" id="menu-toggle"></i>
</button>
<div id="menu-logo">
<img src="Final_Logo.png" width="210" height="214" alt="">
</div>
<div id="navbarToggleExternalContent">
<ul id="main-menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Writing</a>
<a href="#">Events</a>
<a href="#">Speaking</a>
<a href="#">Music</a>
</ul>
<ul id="social-icons">
<li class="facebook"><a href="#"><i class="fab fa-facebook fa-2x"></i></a></li>
<li class="twitter"><a href="#"><i class="fab fa-twitter fa-2x"></i></a></li>
<li class="instagram"><a href="#"><i class="fab fa-instagram fa-2x"></i></a></li>
</ul>
</div>
</div>
</nav>
He intentado usar este código javascript, pero fue en vano:
$('.menu-close').on('click', function(){
$('#menuToggle').toggleClass('active');
$('body').toggleClass('body-push-toright');
$('#theMenu').toggleClass('menu-open');
alert("Test");
});
javascript
html
css
bootstrap-4
responsive-design
Frank Doe
fuente
fuente
classy agregue un estilo simple bajo consulta de medioswidth:600Respuestas:
Parece que esto se ha respondido aquí: https://stackoverflow.com/a/36289507/378779 Básicamente, agregue una de las
navbar-expand-*clases a su<nav>, por ejemplo:fuente
Puede usar CSS Media Query para ocultar / mostrar contenido en diferentes ventanas / dispositivos.
fuente
Aquí está el enlace que necesita axactly. He creado una pluma para ti. Por favor, mire el enlace a continuación.
https://codepen.io/pgurav/pen/abbQZJL
fuente
He creado un ejemplo para usted, basado en la documentación de bs4 con respecto al contenido externo.
En este ejemplo, el código colapsó desde arriba, en lugar de desde la derecha. De hecho, estoy de licencia e intentaré completar el ejemplo para satisfacer sus necesidades.
JavaScript adicional:
También he creado un violín violín Para verlo en acción, cambie el tamaño de la ventana interna en jsfiddle
fuente
Su código Javascript actual siempre se ejecutará, independientemente del dispositivo. Lo que necesita es una forma de verificar si el dispositivo es una computadora o un teléfono móvil.
Una forma sería usar el navegador
UserAgent:O simplemente puede confiar en el ancho de la ventana (pero las ventanas de escritorio pequeñas se tratarán como la versión móvil):
fuente
Primero solo un par de puntos:
Dijiste barra lateral, pero tu marcado realmente no me parece una barra lateral, parece un topnav receptivo. Trataré de darle sentido lo mejor que pueda, y también demostraré una barra lateral que funciona, en caso de que sea lo que realmente quieres.
Sus elementos de menú están en una
<ul>(lista desordenada) sin ninguno<li>(elementos de la lista). El bootsrap js / css probablemente necesita la<li>s para funcionar correctamente. Técnicamente, un html<ul>sin ninguno<li>es válido, pero el único contenido permitido en a<ul>es<li>s, por lo tanto, los anclajes (o cualquier otra cosa) dentro de a<ul>deben estar contenidos dentro de<li>s para ser válidos.No estoy seguro de qué es exactamente lo que está tratando de hacer con los íconos sociales, así que los ajusté ligeramente de una manera que parece sensata.
Agregué
overflow-y: scroll;el<html>elemento para que cuando abra el menú en una pantalla pequeña no se produzca un cambio si se agrega una barra de desplazamiento. Es posible que no sea necesario según el diseño de su sitio y el diseño del contenido.Entonces, comencemos con un menú receptivo muy básico.
Menú receptivo básico de Bootstrap
Mostrar fragmento de código
Bien, eso se ve bien, pero tenías una imagen en el menú. Así que pondré una imagen en el menú y le daré un poco de CSS para darle estilo. Luego, con la imagen, necesitaremos un poco de CSS adicional para colocar bien los elementos del menú:
Está bien, pero dijiste que era una barra lateral. No estoy tan familiarizado con bootstrap, pero deduzco que ni v3 ni v4 proporcionan una barra lateral de navegación por defecto. Aquí se pueden encontrar varios tutoriales de barra lateral de arranque . Simplemente he usado la versión más básica de los tutoriales vinculados anteriormente para crear un ejemplo aquí.
Barra lateral plegable
Mostrar fragmento de código
fuente