1

Como colocar um menu Dropdown do Bootstrap para exibir do lado direito? Segue um modelo:

inserir a descrição da imagem aqui

3
  • Nossa, que modelo irritante! :-)
    – gustavox
    Commented 14/05/2015 às 23:33
  • hahahahahahahhaha, Desculpa. Não foi minha intenção! Só pra ilustrar mesmo! kkkkkk Commented 14/05/2015 às 23:35
  • Agora sim! :) +1
    – gustavox
    Commented 15/05/2015 às 0:22

1 Resposta 1

1

Encontrei um exemplo no jsfiddle que com alguma adaptação acho que atende ao que você quer (acho legal e acho até que vou usar também :D). Coloquei no snippet, clique aí embaixo em "Executar trecho de código", que já dá pra você ver funcionando.

$(function(){
	$(".dropdown-menu > li > a.trigger").on("click",function(e){
		var current=$(this).next();
		var grandparent=$(this).parent().parent();
		if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
			$(this).toggleClass('right-caret left-caret');
		grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
		grandparent.find(".sub-menu:visible").not(current).hide();
		current.toggle();
		e.stopPropagation();
	});
	$(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
		var root=$(this).closest('.dropdown');
		root.find('.left-caret').toggleClass('right-caret left-caret');
		root.find('.sub-menu:visible').hide();
	});
});
.dropdown-menu>li
{	position:relative;
	-webkit-user-select: none; /* Chrome/Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
	/* Rules below not implemented in browsers yet */
	-o-user-select: none;
	user-select: none;
	cursor:pointer;
}
.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    display:none;
    margin-top: -1px;
	border-top-left-radius:0;
	border-bottom-left-radius:0;
	border-left-color:#fff;
	box-shadow:none;
}
.right-caret:after,.left-caret:after
 {	content:"";
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    display: inline-block;
    height: 0;
    vertical-align: middle;
    width: 0;
	margin-left:5px;
}
.right-caret:after
{	border-left: 5px solid #ffaf46;
}
.left-caret:after
{	border-right: 5px solid #ffaf46;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div class="dropdown" style="position:relative">
	<a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Click Here <span class="caret"></span></a>
	<ul class="dropdown-menu">
		<li>
			<a class="trigger right-caret">Level 1</a>
			<ul class="dropdown-menu sub-menu">
				<li><a href="#">Level 2</a></li>
				<li>
					<a class="trigger right-caret">Level 2</a>
					<ul class="dropdown-menu sub-menu">
						<li><a href="#">Level 3</a></li>
						<li><a href="#">Level 3</a></li>
						<li>
							<a class="trigger right-caret">Level 3</a>
							<ul class="dropdown-menu sub-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>
				<li><a href="#">Level 2</a></li>
			</ul>
		</li>
		<li><a href="#">Level 1</a></li>
		<li><a href="#">Level 1</a></li>
	</ul>
</div>

3
  • 1
    Funcionou perfeitamente! Adaptei ao meu estilo! Tanks;) Commented 15/05/2015 às 0:09
  • Legal, agora muda aquela imagem! :-)
    – gustavox
    Commented 15/05/2015 às 0:12
  • Andrew, não se esqueça de aceitar a resposta, para que a pergunta seja marcada como resolvida. É só clicar no sinal que fica abaixo da caixa de votação. Se tiver alguma dúvida, veja este tópico: meta.pt.stackoverflow.com/questions/1078/… Abraços.
    – gustavox
    Commented 16/05/2015 às 7:30

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 .