Expandable navbar

Asked

Viewed 252 times

0

I have this navbar on the left of my screen 

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

I’d like to add submenus so that when clicked on registrations for example, this submenus would appear under the sign-in button, while the other buttons would go down. Is there any way to do it?

twitter-bootstrap

1 answer

1


You can use the Collapse bootstrap itself to do this. Your example would look like this:

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

Look at this example in Jsfiddle.

Source: bootply

  • It worked perfectly. For some reason I wasn’t able to use Collapse within my code. Thank you.

Browser other questions tagged twitter-bootstrap

You are not signed in. Login or sign up in order to post.