Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

rafaeldupalio

sub-menu com bootstrap

Recommended Posts

Galera criei um botam com dropdown e queria criar um submenu dentro desse dropdown, a estrutura seria administrativo _ acesso_cadastrar acesso, listar acesso;funcionarios,painel de controle.
segue o codigo:

<div class="btn"><!-- inicio btn group -->
<div class="btn-group dropdown">
<button type="button" class="btn btn-primary">Administrativo</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Acesso</a>
<ul class="dropdown-menu" >
<li><a href="administrativo.php?link=2">Cadastrar Acesso</a></li>
<li><a href="administrativo.php?link=3">Listar Acesso</a></li>
</ul>
</li>
<li><a href="#">Funcionários</a></li>
<li><a href="#">Painel de Controle</a></li>
</ul>
</div>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Entao vou deixar a resposta aqui caso alguem precise desta ajuda, clar anterando os links para melhor atende los.

code:
1º passo é criar um style para o nosso sub-menu:

<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
</style>

2º é criar o script que faz o sub:
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
3º é incluir ele no html para executa lo, no meu caso criei um botão segue o codigo.:

<div class="btn-group dropdown"> <!-- inicio botao adm -->
<button type="button" class="btn btn-primary">Administrativo</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Acesso<span class="caret"></span></a>
<ul class="dropdown-menu dropdown-toggle" >
<li><a href="administrativo.php?link=2">Cadastrar Acesso</a></li>
<li><a href="administrativo.php?link=3">Listar Acesso</a></li>
</ul>
<li class="dropdown-submenu">
<a class="test" tabindex="-2" href="#">Funcionários<span class="caret"></span></a>
<ul class="dropdown-menu dropdown-toggle" >
<li><a href="#">Cadastrar Funcionário</a></li>
<li><a href="#">Listar Funcionário</a></li>
</ul>
</li>
</li>
</div><!-- fim botao adm -->

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.