Bootstrap navbar multinivel en CSS puro

Vista prévia

Descripción

Una extensión CSS sólo para el bootstrap que le permite crear menús desplegables multinivel para su componente de barra de navegación bootstrap.

Funcionamiento

Cargue la hoja de estilos principal ' style. css ' en su proyecto de bootstrap.

<link href="bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">

Crea el menú desplegable multinivel usando las listas HTML anidadas como estas:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

<div class="container">



<!-- Brand and toggle get grouped for better mobile display -->



<div class="navbar-header">





<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">







<span class="sr-only">Toggle navigation</span>







<span class="icon-bar"></span>







<span class="icon-bar"></span>







<span class="icon-bar"></span>





</button>





<a class="navbar-brand" href="#">Bootstrap Nav</a>



</div>



<!-- Collect the nav links, forms, and other content for toggling -->



<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">





<ul class="nav navbar-nav">







<li class="active"><a href="#">Home</a></li>







<!-- Level 1 -->







<li class="dropdown">









<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <b class="caret"></b></a>









<ul class="dropdown-menu multi-level">











<li><a href="#">Level 1</a></li>






































 <li class="dropdown-submenu">













<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>













<!-- Level 2 -->













<ul class="dropdown-menu">















<li><a href="#">Level 2</a></li>

































<li class="dropdown-submenu">

















<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>

















<!-- Level 3 -->

















<ul class="dropdown-menu">



















<li><a href="#">Level 3</a></li>



















<li class="dropdown-submenu">





















<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 3</a>





















<!-- Level 4 -->





















<ul class="dropdown-menu">























<li><a href="#">Level 4</a></li>























<li><a href="#">Level 4</a></li>























<li><a href="#">Level 4</a></li>


























</ul>



















</li>

















</ul>















</li>













</ul>











</li>









</ul>







</li>















</ul>







</div>



<!-- /.navbar-collapse -->

</div>

<!-- /.container -->
</nav>