Barra lateral aberta por padrão na área de trabalho, fechada no celular

9

Estou com problemas para tentar exibir meu conteúdo da barra lateral / navegação (usando o Bootstrap) para mostrar (ser expandido) por padrão na área de trabalho e fechado por padrão no celular e ter o ícone exibido apenas no celular. Parece que não consigo fazer isso funcionar.

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

Eu tentei usar esse código javascript, mas sem sucesso:

 $('.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
fonte
Ei, adicionei um comentário à sua pergunta com a solução exata. Codepen criado para você, para que você possa verificar o código e a saída. Por favor, olhe
— Priyanka
Você tem outro CSS?
— Codeply-er
Add simples classe estilo-lo sob consulta de mídiawidth:600
— Awais

Respostas:

1

Você pode usar o CSS Media Query para ocultar / mostrar conteúdo em diferentes viewport / dispositivos.

— Muhamad D. Fahrezi
fonte
0

Aqui está o link do que você precisa axaticamente. Eu criei caneta para você. Por favor, dê uma olhada no link abaixo.

    <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
fonte
0

Eu criei um exemplo para você, com base na documentação do bs4 sobre conteúdo 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>

Nesse exemplo, o código é recolhido da parte superior - em vez da direita. Na verdade, estou de licença e tentarei concluir o exemplo para atender às suas necessidades.

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();
})

Além disso, criei um violino violino Para vê-lo em ação, por favor redimensionar a janela interna em jsFiddle

— MattOpen
fonte
0

Seu código Javascript atual sempre será executado, independentemente do dispositivo. O que você precisa é uma maneira de verificar se o dispositivo é um computador ou um telefone celular.

Uma maneira seria usar o 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");
    }
});

Ou você pode simplesmente confiar na largura da janela (mas pequenas janelas da área de trabalho serão tratadas como a versão móvel):

if(window.innerWidth <= 767) { // a certain threshold value, in pixels
    //mobile
    //do something
}
— Anis R.
fonte
Cheirar a cadeia do User Agent leva a um código difícil de manter. As consultas de mídia são muito melhores.
— Kmoser
O que é "difícil de manter" em uma string? De qualquer forma, você pode agrupar essa verificação em uma função, para que sempre que precisar atualizar a sequência, você tenha apenas uma linha de código para editar.
— Anis R.
Além disso, você não pode usar consultas de mídia CSS para nomes de classe de alternância como o OP quer
— Anis R.
As sequências do agente do usuário dos dispositivos mudam com o tempo à medida que novos dispositivos são produzidos. Isso resulta em um código que é interrompido toda vez que um novo dispositivo é introduzido. Claro, você pode agrupar isso em uma função, mas ainda é necessário alterá-la sempre que um novo dispositivo for introduzido. É melhor segmentar os dispositivos pelo tamanho (usando consultas de mídia CSS), não pela string do agente do usuário. Nenhuma atualização é necessária quando um novo dispositivo é introduzido. O OP não queria necessariamente alternar nomes de classes; essa foi a melhor tentativa de solução, e que acredito ser inferior às consultas da mídia.
— precisa saber é
0

Primeiro, apenas alguns pontos:

  1. Você disse que a barra lateral, mas sua marcação não parece realmente uma barra lateral para mim, parece um topnav responsivo. Tentarei entender o melhor que puder e demonstrarei uma barra lateral de trabalho também, caso seja o que você realmente deseja.

  2. Seus itens de menu estão em uma <ul>(lista não ordenada) sem nenhum <li>(itens de lista). O bootsrap js / css provavelmente precisa de <li>s para funcionar corretamente. Tecnicamente, um <ul>sem nenhum <li>é um html válido, mas o único conteúdo permitido em a <ul>é <li>s, portanto, as âncoras (ou qualquer outra coisa) dentro de um <ul>devem estar contidas em <li>s para serem válidas.

  3. Não tenho certeza do que exatamente você está tentando fazer com os ícones sociais, então apenas os ajustei de uma maneira que pareça sensata.

  4. Eu adicionei overflow-y: scroll;o <html>elemento para que, quando você abrir o menu em uma tela pequena, ele não cause alterações se uma barra de rolagem for adicionada. Pode não ser necessário, dependendo do design do site e do layout do conteúdo.

Então, vamos começar com um menu responsivo muito básico.

Menu responsivo básico de inicialização

Mostrar snippet de código

Ok, parece bom, mas você tinha uma imagem no menu. Então, vou colocar uma imagem no menu e dar um pouco de CSS para estilizá-la. Em seguida, com a imagem, precisaremos de um pouco de CSS extra para posicionar bem os elementos do menu:

  1. Posicione o botão hambúrguer para que fique na parte inferior da barra de navegação. Vou usar os 200px da imagem e subtrair alguns rem. Você pode alterar top: calc(100px - 1rem);para top: 1rem;para colocar o hambúrguer em cima ou bottom: 1rem;se quiser que ele fique na parte inferior da nav, mesmo quando aberto. Ou simplesmente exclua toda essa regra para usar o padrão de autoinicialização que coloca o hambúrguer no meio vertical.

  2. Posicione os itens de menu para que também fiquem na parte inferior da barra de menus quando não estiverem recolhidos.

  3. posicione também os ícones sociais na parte inferior, mas empurre-os para o lado direito.

  4. Os números 2 e 3 acima só devem ser aplicados acima do ponto de interrupção médio quando o menu não for recolhido, portanto, eu os colocarei em uma consulta de mídia para segmentar mais de 768px (ponto de interrupção médio do bootstrap). Isso também pode ser feito com bootstraps sass breakpoint mixins, mas usaremos apenas o CSS simples aqui. Você pode ver o posicionamento desses elementos na regra de consulta @media no css, onde você pode alterá-lo para empurrá-los para o topo da barra. Ou simplesmente remova essas regras para reverter para os padrões de autoinicialização, que centralizam verticalmente os elementos do menu e coloca os ícones sociais abaixo deles. Você também pode colocar os ícones sociais em <li>elementos dentro do menu, <ul>se quiser que eles caiam diretamente no menu, como os outros itens de menu.

com imagem no menu

Mostrar snippet de código

Ok, mas você disse que era uma barra lateral. Não estou familiarizado com o bootstrap, mas entendo que nem a v3 nem a v4 fornecem uma navegação na barra lateral por padrão. Vários tutoriais da barra lateral de inicialização podem ser encontrados aqui . Simplesmente usei a versão mais básica dos tutoriais vinculados acima para criar um exemplo aqui.

Barra lateral dobrável

Mostrar snippet de código

— Veneseme Tyras
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.