0

Tenho essa navbar na parte esquerda da minha tela

<div class="main-menu">
  <ul>


   <li>
      <a href="listCadastro.php" onclick="">
        <span class="menu-icon">
          <i class="fa fa-file-text fa-lg"></i> 
        </span>
        <span class="text">
          Cadastros 
        </span>
        <span class="menu-hover"></span>
      </a>
    </li>  
    <li>
      <a href="listCadastro.php" onclick="">
        <span class="menu-icon">
          <i class="fa fa-file-text fa-lg"></i> 
        </span>
        <span class="text">
          Informações 
        </span>
        <span class="menu-hover"></span>
      </a>
    </li>
    <li>
      <a href="listCadastro.php" onclick="">
        <span class="menu-icon">
          <i class="fa fa-file-text fa-lg"></i> 
        </span>
        <span class="text">
          Cartas 
        </span>
        <span class="menu-hover"></span>
      </a>
    </li>
    <li>
      <a href="listCadastro.php" onclick="">
        <span class="menu-icon">
          <i class="fa fa-file-text fa-lg"></i> 
        </span>
        <span class="text">
          Relatórios 
        </span>
        <span class="menu-hover"></span>
      </a>
    </li>

  </ul>
</div>

Gostaria de adicionar submenus de forma que quando clicasse em cadastros por exemplo, esse submenus apareceriam embaixo do botão de cadastros, enquanto os outros botões iriam pra baixo. Há alguma forma de fazê-lo?

1 Resposta 1

1

Você pode utilizar o collapse do próprio bootstrap para fazer isso. Seu exemplo ficaria da seguinte forma:

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
  <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 </head>
<body>
  
          <div class="list-group panel">
              <a href="#submenu1" class="list-group-item sub-item collapsed" data-toggle="collapse" data-parent="#submenu1">Cadastros <span class=" menu-ico-collapse"><i class="glyphicon glyphicon-chevron-down"></i></span></a>
                  <div class="list-group-submenu collapse" id="submenu1" style="height: 0px;">
                    <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">Cadastro 1</a>
                    <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">Cadastro 2</a>
                    <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">Cadastro 3</a>
                    <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">Cadastro 4</a>
                  </div>
             <a href="#" data-toggle="collapse" data-target="#menupos1" class="list-group-item sub-item">Informações </a>
             <a href="#" data-toggle="collapse" data-target="#menupos1" class="list-group-item sub-item">Cartas </a>
             <a href="#" data-toggle="collapse" data-target="#menupos1" class="list-group-item sub-item">Relatórios</a>

</div></body></html>

Veja esse exemplo no JsFiddle.

Fonte: bootply

1
  • Funcionou perfeitamente. Por algum motivo eu não estava sabendo usar o collapse dentro do meu código. Obrigado.
    – Felipe
    Commented 17/10/2015 às 18:23

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 .