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
fonte
classe estilo-lo sob consulta de mídiawidth:600Respostas:
Parece que isso foi respondido aqui: https://stackoverflow.com/a/36289507/378779 Basicamente, adicione uma das
navbar-expand-*classes ao seu<nav>, por exemplo:fonte
Você pode usar o CSS Media Query para ocultar / mostrar conteúdo em diferentes viewport / dispositivos.
fonte
Aqui está o link do que você precisa axaticamente. Eu criei caneta para você. Por favor, dê uma olhada no link abaixo.
https://codepen.io/pgurav/pen/abbQZJL
fonte
Eu criei um exemplo para você, com base na documentação do bs4 sobre conteúdo externo.
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:
Além disso, criei um violino violino Para vê-lo em ação, por favor redimensionar a janela interna em jsFiddle
fonte
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: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):
fonte
Primeiro, apenas alguns pontos:
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.
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.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.
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:
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
fonte