Expandable Navbar

Navigation
0

I have this navbar on the left side 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 would like to add submenus so that when I clicked on records for example, this submenus would appear underneath the register button, while the other buttons would go down. Is there any way to do it?

    
asked by anonymous 14.10.2015 / 16:32

1 answer

1

You can use the bootstrap collapse 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>

See this example in JsFiddle.

Source: bootply

    
14.10.2015 / 19:21
Do not lose the input text when switching pages Show a DIV and hide another if the parameter in the url is a default parameter