Dropdown Bootstrap 3

Question

Dropdown Bootstrap 3

Navigation

#1 by (1 votes)

1

How to put a Bootstrap dropdown menu to display on the right side? Here is a template:

css twitter-bootstrap

asked by anonymous 15.05.2015 / 01:28

1 answer

Problems with Data and Globalize List data in a drop down related to the result of another drop down

score 1 · Accepted Answer

I found an example in the jsfiddle that with some adaptation I think it caters to what you want (I think it's cool and I think which I will also use: D). I put it in snippet , click below in "Run code snippet" , which you can already see working.

$(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><linkhref="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><divclass="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>