-1

Eu construí uma sidebar customizada para o meu painel. Dentro dessa sidebar, eu tenho alguns itens de menu. Quando a minha tela está pequena, eu faço com que todas as opções de menu desapareçam, e que mostre apeas uma opção de menu específica. Essa opção de menu específica é utilizada como um botão que faz com que todos os itens de menu apareçam novamente.

A minha sidebar:

inserir a descrição da imagem aqui

Quando a minha tela está pequena, a sidebar fica dessa maneira:

inserir a descrição da imagem aqui

Para montar a sidebar eu utilizo o código abaixo:

<div class="card-body">

<a id="shmenulinks" class="nav-link" style="border-radius: 0.25rem; cursor: pointer; width: 100%;" data-toggle="collapse" aria-expanded="true" aria-controls="menulinks" data-target="#menulinks"><i class="fa fa-bars" aria-hidden="true"></i> Open/Close menu</a>

<div id="menulinks" class="nav nav-pills" >
<a style="width: 100%;" href="https://codepen.io/" target="blank" class="nav-link "><i class="fa fa-home" aria-hidden="true"></i> Home</a>
<a style="width: 100%;" href="https://codepen.io/" target="blank" class="nav-link "><i class="fa fa-line-chart" aria-hidden="true"></i> Projects</a>
<a style="width: 100%;" href="https://codepen.io/" target="blank" class="nav-link "><i class="fa fa-suitcase" aria-hidden="true"></i> Jobs</a>
<a style="width: 100%;" href="https://codepen.io/" target="blank" class="nav-link "><i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
</div>

</div>

Para fazer os itens aparecer/desaparecer eu utilizo essa lógica CSS abaixo:

@media screen and (min-width: 992px) {

#shmenulinks {
display: none;
}
#menulinks {
display: block;
}
}

@media screen and (max-width: 991px) {
#shmenulinks {
display: block;
}
#menulinks {
display: none;
}

}

Meu problema é quando a tela está pequena e o menu colapsado, o botão que eu utilizo para fazer os itens do menu aparecerem novamente não funciona.

O CODEPEN: https://codepen.io/neyelson-alves/pen/ZEGbdJB

O que devo fazer?

1 Resposta 1

2

Faltou adicionar a classe .collapse na div do menu:

<div id="menulinks" class="nav nav-pills collapse">

E não precisa colocar display: none no CSS nessa div, pois o controle disso fica à cargo do próprio Collapse do Bootstrap. Remova o código abaixo do CSS:

#menulinks {
display: none;
}

Teste:

@media screen and (min-width: 992px) {
   #menulinks {
      display: block;
   }

   #shmenulinks {
      display: none;
   }

}

@media screen and (max-width: 991px) {
   #shmenulinks {
      display: block;
   }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class="card-body">

   <a id="shmenulinks" class="nav-link" style="border-radius: 0.25rem; cursor: pointer; width: 100%;" data-toggle="collapse" aria-expanded="true" aria-controls="menulinks" data-target="#menulinks"><i class="fa fa-bars" aria-hidden="true"></i> Open/Close menu</a>
   
   <div id="menulinks" class="nav nav-pills collapse">
      <a style="width: 100%;" href="https://codepen.io/" target="blank" class="nav-link "><i class="fa fa-home" aria-hidden="true"></i> Home</a>
      <a style="width: 100%;" href="https://codepen.io/" target="blank" class="nav-link "><i class="fa fa-line-chart" aria-hidden="true"></i> Projects</a>
      <a style="width: 100%;" href="https://codepen.io/" target="blank" class="nav-link "><i class="fa fa-suitcase" aria-hidden="true"></i> Jobs</a>
      <a style="width: 100%;" href="https://codepen.io/" target="blank" class="nav-link "><i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
   </div>

</div>

Referência:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .