Bootstrap striped dropdown menu - html

What's the best way to achieve "striped" menu items in a Bootstrap dropdown menu? I want alternating menu items to have a slightly different background shading to make dropdown items that span multiple lines more obviously a single item.

You can use Pseudo Classes. See example
.dropdown-menu > li:nth-child(odd) {
background: #f5f5f5;
}
.dropdown-menu > li:nth-child(even) {
background: #a94442;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Something else here
</li>
<li>Something else here
</li>
<li>Something else here
</li>
<li>Something else here
</li>
</ul>
</div>
</div>
<hr>

Related

How to make bootstrap dropdown open initially and can't be closed thereafter

I know it's hard to provide the code for my question but I would like to know how to make Bootstrap dropdown menu can't be closed (remain open) after it has been opened by default?
Thank you
You have to use 2 functions one onclick dropdown and one onclick body
use e.stopPropagation(); to prevent closing...
var flag=true;
$( ".dropdown-toggle" ).click(function(e) {
if (!flag)
e.stopPropagation();
else
flag=false;
});
$(document).on('click', ':not(.dropdown)', function(e) {
if ($(this).closest('.dropdown').length == 0) {
e.stopPropagation();
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
This solution stops propagation on the Bootstrap hide (hide.bs.dropdown) event, which stops it from continuing on to the hidden (hidden.bs.dropdown) event. You may read more into it here: http://css-tricks.com/dangers-stopping-event-propagation/
I personally prefer this way also because it uses the built in Bootstrap dropdown events, which could be found here: http://getbootstrap.com/javascript/#dropdowns-events
$(function () {
$('.dropdown.keep-open').on({
"shown.bs.dropdown": function () {
$(this).data('closable', false);
},
"click": function (event) {
$(this).data('closable', false);
},
"hide.bs.dropdown": function (event) {
temp = $(this).data('closable');
$(this).data('closable', true);
return temp;
}
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<h3>Default behaviour</h3>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<hr/>
<h3>Preventing bootstrap dropdown from closing on click</h3>
<div class="dropdown keep-open">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

Bootstrap 3.3 navbar drop-down text overflowing container

I am trying to create a notification widget like that used in Facebook, or Stack Overflow using the drop-down element of bootstrap. The contents are now breaking and flowing out of the container.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" style="width: 300px">
<li>Action</li>
<li>Another action</li>
<li>Something else here Something else here Something else here Something else here Something else here Something else here Something else here Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</nav>
My list item looks like this:
<li><a>
<div class="row">
<div class="col-md-4">
<img/>
</div>
<div class="col-md-8">
<b>Title</b><br />
<span>Description</span>
</div>
</div>
</a>
</li>
I tried adding clearfix and assigning the width to the span, but nothing helps.
All you need to do is add this to your css, it will make the content of your a wrap nicely:
.navbar .nav li .dropdown-menu li a {
white-space: normal;
}
codepen
By default Bootstrap tries to wrap all the text inside the dropdown using white-space: nowrap;. You can undo that with white-space: normal;.
.dropdown-menu>li>a {
white-space: normal !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" style="width: 300px">
<li>Action</li>
<li>Another action</li>
<li>Something else here Something else here Something else here Something else here Something else here Something else here Something else here Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</nav>

position dropdown button and dropdown menu in center?

<div class="dropup center-block">
<button class="btn btn-info dropdown-toggle center-block" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About Me<span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-header">Dropup stuff</li>
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
added center-block to both div and button, but unable to get the dropup menu positioned center.
A similar thing can be found at "Dropdown Position" in this page. The button is aligned left, but the menu is right. I'm able to align the menu right but not center.
Please help!
A little trick add some css rules,text-center with dropdown class and dropdown-menu-center to the list.
source: https://stackoverflow.com/a/28078054/6142097
.dropdown-menu-center {
left: 50% !important;
right: auto !important;
text-align: center !important;
transform: translate(-50%, 0) !important;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<div class="container">
<h2>Dropdowns</h2>
<div class="dropdown text-center">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-center">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li class="divider"></li>
<li>About Us</li>
</ul>
</div>
</div>
Try adding a margin-left
<div class="dropup center-block" style="margin-left: 49%;">
The solution is to use 'dropdown-menu-center" class instead of 'center-block'.
here is your solution
https://jsfiddle.net/7urwr62j/
<div class="text-center">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
<style>
.dropdown{
display: inline-block;
}
</style>

How do I create a text link with a drop down menu in Bootstrap?

I tried,
<div class = "btn-group" style="display:inline;">
<a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="fa fa-star-o" aria-hidden="true"></span> Rate
</a>
<ul class="dropdown-menu">
<li>Action</li>
</ul>
</div>
The problem with this is that the text link has a gradient around it which I don't like. How can I disable the gradient using CSS or is there some elegant way to do this? For some reason, copying this in jsfiddle doesn't work.
You can make background-color of link to be transparent.
/* hide menu link background color */
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
background-color: transparent !important;
}
/* hide menu link background color */
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
background-color: transparent !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

adding a drop down button alongside with my other buttons

I have some buttons in navigation bar:
http://jsfiddle.net/wKHaT/8/
<div class="mynav">
<ul class="nav nav-pills">
<li class="">AAA</li>
<li class="">BBB</li>
<li class="">CCC</li>
<li class="">DDD</li>
<li class="">EEE</li>
</ul>
</div>
<!-- Split button -->
<div class="btn-group mynav">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
The number of my buttons are too much so I should use drop-down buttons. Here there are two problems:
1- the style of my drop down button does not look like the other buttons. any way to solve it? (drop-down button should not appear with bigger size)
2- the other problem is that i want by clicking on my button it goes to a link. i can do it by onclick but onclick is not a seo friendly way.
For #1, Adjust the styling on your pills to match the button:
.nav-pills li a {padding: 7px 15px; font-weight: bold;}
OR vice-versa:
a.btn {padding: 4px 15px;}
button.dropdown-toggle {padding: 4px 8px;}
For #2, make your button an anchor instead:
Action
http://jsfiddle.net/isherwood/wKHaT/14
http://jsfiddle.net/isherwood/wKHaT/15
1.
try this for your style:
[http://jsfiddle.net/wKHaT/10/][1]
2.
onclick event souldn't do negativ rating for your seo