Barra lateral abierta por defecto en el escritorio, cerrada en el móvil

9

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
Oye, he agregado un comentario sobre tu pregunta con la solución exacta. Codepen creado para usted para que pueda verificar el código y la salida. Por favor, mira
— Priyanka
¿Tienes otro CSS?
— Codeply-er
Agregue classy agregue un estilo simple bajo consulta de medioswidth:600
— Awais

Respuestas:

1

Puede usar CSS Media Query para ocultar / mostrar contenido en diferentes ventanas / dispositivos.

— Muhamad D. Fahrezi
fuente
0

Aquí está el enlace que necesita axactly. He creado una pluma para ti. Por favor, mire el enlace a continuación.

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="theMenu">
  <a class="navbar-brand" id="menu-logo">
            <img src="Final_Logo.png" width="210" height="214" alt="">
          </a>      
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto" id="main-menu">
            <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="#">About</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Writing</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Events</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Speaking</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Music</a></li>
            <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>
  </nav>

https://codepen.io/pgurav/pen/abbQZJL

— Priyanka
fuente
0

He creado un ejemplo para usted, basado en la documentación de bs4 con respecto al contenido externo.

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark navbar-expand-lg">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

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:

var externalContent = $('#navbarToggleExternalContent'),
    execOnResize = function(){
// also the next line was only for use in jsfiddle
// in the real world you need to use window.outerWidth
// 992 pixel is the width of breakpoint corresponding to the class "navbar-expand-lg". Feel free to adapt it to fit your needs.
    if(window.innerWidth >= 992){
        externalContent.addClass('show');
    }else{
        externalContent.removeClass('show');
    }
};
// the next line was only addded for jsfiddle       
execOnResize();

window.onresize = function(event) {
    execOnResize();
};

window.addEventListener('load', function() {
    execOnResize();
})

También he creado un violín violín Para verlo en acción, cambie el tamaño de la ventana interna en jsfiddle

— MattOpen
fuente
0

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:

$('.menu-close').on('click', function(){
    if(navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
        //mobile
        $('#menuToggle').toggleClass('active');
        $('body').toggleClass('body-push-toright');
        $('#theMenu').toggleClass('menu-open');
        alert("Test");
    }
});

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):

if(window.innerWidth <= 767) { // a certain threshold value, in pixels
    //mobile
    //do something
}
— Anis R.
fuente
Oler la cadena del Agente de usuario conduce a un código que es difícil de mantener. Las consultas de los medios son mucho mejores.
— kmoser
¿Qué es "difícil de mantener" acerca de una cadena? De todos modos, puede ajustar esta verificación en una función, de modo que siempre que necesite actualizar la cadena, solo tenga una línea de código para editar.
— Anis R.
Además, no puede usar consultas de medios CSS para alternar nombres de clase como lo desea el OP
— Anis R.
Las cadenas del Agente de usuario de dispositivos cambian con el tiempo a medida que se producen nuevos dispositivos. Eso da como resultado un código que se rompe cada vez que se introducen nuevos dispositivos. Claro, puede envolver eso en una función, pero aún así requiere que lo cambie cada vez que se introduce un nuevo dispositivo. Es mejor apuntar a los dispositivos por su tamaño (usando consultas de medios CSS), no por la cadena de agente de usuario. No se requieren actualizaciones cuando se introduce un nuevo dispositivo. OP no necesariamente quería alternar los nombres de clase; ese fue su mejor intento de solución, y creo que es inferior a las consultas de los medios.
— kmoser
0

Primero solo un par de puntos:

  1. 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.

  2. 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.

  3. 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.

  4. 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ú:

  1. Coloque el botón de hamburguesa de modo que quede en la parte inferior de la barra de navegación. Usaré los 200 px de la imagen y restaré algunos rem. Puede cambiar top: calc(100px - 1rem);a top: 1rem;para colocar la hamburguesa en la parte superior, o bottom: 1rem;si desea que la hamburguesa se pegue al fondo del navegador incluso cuando está abierta. O simplemente elimine toda esa regla para usar el valor predeterminado de arranque que coloca la hamburguesa en el medio vertical.

  2. Coloque los elementos del menú para que descansen también en la parte inferior de la barra de menús cuando no estén plegados.

  3. Posicione los iconos sociales en la parte inferior también, pero empújelos hacia el lado derecho.

  4. Los números 2 y 3 anteriores solo deberían aplicarse por encima del punto de interrupción medio cuando el menú no está colapsado, por lo que los pondré en una consulta de medios para apuntar a más de 768px (punto de interrupción medio de bootstrap). Esto también se puede hacer con bootstraps sass breakpoint mixins, pero solo usaremos CSS simple aquí. Puede ver el posicionamiento de estos elementos dentro de la regla de consulta @media en el CSS, donde puede cambiarlo para empujarlos a la parte superior de la barra. O simplemente elimine esas reglas para volver a los valores predeterminados de bootstrap, que centra verticalmente los elementos del menú y coloca los iconos sociales debajo de ellos. También puede poner los iconos sociales en <li>elementos dentro del menú <ul>si solo desea que los iconos caigan directamente en el menú como los otros elementos del menú.

con imagen en el menú

Mostrar fragmento de código

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

— Veneseme Tyras
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.