I have the following snippet that rotates .caret on a dropdown-toggle click. This rotates the .caret without issue, however it also rotates all of the other .caret on the page. Will I need to write a click function for every individual .caret and .dropdown-toggle on the page or can I have one that works independently?
Also, is there a way in which I can stop the dropdown-menu closing when and item within it has been clicked?
$(document).ready(function() {
$(".dropdown-toggle").click(function() {
$(".caret").toggleClass('rotate-180');
});
});
ul {
list-style: none;
}
.caret {
-moz-transition: transform 1s;
-webkit-transition: transform 1s;
transition: transform 1s;
}
.rotate-180 {
transform: rotate(-180deg);
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<ul>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
</body>
in bootstrap +v4 just add style:
.dropdown-toggle[aria-expanded="true"]:after {
transform: rotate(180deg);
}
/*for animation*/
.dropdown-toggle:after {
transition: 0.7s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<li class="nav-item dropdown" >
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdowns" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdowns">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html><!-- roiket -->
See below it works
Edit:
I updated my answer to a more better approach to cover all scenarios, and for the last thing you have asked in your OP about preventing the menu to close, can be done in 2 ways
Bind click event to the dropdown and prevent propagation if it is already open.
You have to remove the data-toggle="dropdown" attribute and implement open and closing of the menu yourself. But I think that would require more lines of code than the one used in the code snippet.
$(document).ready(function() {
$('.dropdown').on('hidden.bs.dropdown', function(e) {
$(this).find('.caret').toggleClass('rotate-180');
});
$('.dropdown').on('shown.bs.dropdown', function(e) {
$(this).find('.caret').toggleClass('rotate-180');
});
//this is to avoid the menu from closing if clicked inside the menu
$('body').on("click", ".dropdown-menu", function(e) {
$(this).parent().is(".open") && e.stopPropagation();
});
});
ul {
list-style: none;
}
.caret {
-moz-transition: transform 1s;
-webkit-transition: transform 1s;
transition: transform 1s;
}
.rotate-180 {
transform: rotate(-180deg);
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<ul>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
</body>
In bootstrap 3 whenever you click on the dropdown list when it's opening, class="open" appears so I tried this code and it worked just fine!
.open>a>.caret{
transform: rotate(180deg);
transition: all ease-out 0.4s;
}
Try this
$(document).ready(function () {
$( ".dropdown-toggle" ).click( function() {
$(this).children(".caret").toggleClass('rotate-180');
});
$( ".dropdown-menu" ).click( function() {
$(this).siblings().children(".caret").toggleClass('rotate-180');
});
$(document).click(function(e){
if(!e.target.closest("ul") && $(".caret").hasClass("rotate-180")){
$(".caret").removeClass('rotate-180');
}
})
});
$(document).ready(function () {
$( ".dropdown-toggle" ).click( function() {
$(this).children(".caret").toggleClass('rotate-180');
});
$( ".dropdown-menu" ).click( function() {
$(this).siblings().children(".caret").toggleClass('rotate-180');
});
$(document).click(function(e){
if(!e.target.closest("ul") && $(".caret").hasClass("rotate-180")){
$(".caret").removeClass('rotate-180');
}
})
});
ul {
list-style: none;
}
.caret {
-moz-transition: transform 1s;
-webkit-transition: transform 1s;
transition: transform 1s;
}
.rotate-180 {
transform: rotate(-180deg);
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<ul>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
</body>
Try this.
$(document).ready(function () {
$( ".dropdown-toggle" ).click( function(){
$(this).children(".caret").toggleClass('rotate-180');
});
});
$(document).on("click", function(event){
var $trigger = $(".caret");
if($trigger !== event.target && !$trigger.has(event.target).length){
$(".caret").removeClass('rotate-180');
}
});
ul {
list-style: none;
}
.caret {
-moz-transition: transform 1s;
-webkit-transition: transform 1s;
transition: transform 1s;
}
.rotate-180 {
transform: rotate(-180deg);
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<ul>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
</body>
Related
I want submenu in my dropdown menu to be closed when dropdown menu closed.
But now submenu remains open if I toggle dropdown menu again.
https://plnkr.co/edit/YUmUGHctRlypUq1BNA0p?p=preview
HTML
<nav id="sideNavBar">
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
Dropdown<span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Submenu-1<span class="caret"></span>
<ul class="dropdown-menu">
<li>
Item-1
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
JS
$(document).ready(function() {
var $links = $('.dropdown-submenu a.test').on("click", function(e) {
var submenu = $(this).next();
$subs.not(submenu).hide()
submenu.toggle();
//$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
var $subs = $links.next();
});
You could do something like this
$('.droptown-toggle').on('click', function(e) {
$('.dropdown-submenu .dropdown-menu').hide();
});
PS. I presume droptown-toggle is a typo but I'm using the class name you have.
Try below code. Ignore 'Script error.' it is just snippet code bug. But my code is working fine.
$(document).ready(function() {
var $links = $('.dropdown-submenu a.test').on("click", function(e) {
var submenu = $(this).next();
$subs.not(submenu).hide();
submenu.toggle();
//$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
var $subs = $links.next();
$('.dropdown-toggle').on('click', function(e) {
$('.dropdown-submenu .dropdown-menu').hide();
});
});
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
<link data-require="bootstrap#*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<style>
body {
padding-top: 60px;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
#media (max-width: 979px) {
/* Remove any padding from the body */
body {
padding-top: 0;
}
}
</style>
<script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="bootstrap" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2">
<nav id="sideNavBar">
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
Dropdown<span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Submenu-1<span class="caret"></span>
<ul class="dropdown-menu">
<li>
Item-1
</li>
<li>
Item-2
</li>
<li>
Item-3
</li>
</ul>
</li>
<li class="dropdown-submenu">
Submenu-2<span class="caret"></span>
<ul class="dropdown-menu">
<li>
Item-1
</li>
<li>
Item-2
</li>
<li>
Item-3
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<div class="container">
</div>
</div>
<!-- /container -->
</body>
</html>
I have some dropdowns that contain multiple elements that I would like to collapse if open when any other menu item is clicked. Here is what I have so far:
<head>
<meta charset="utf-8">
<title>Test</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Master CSS -->
<link rel="stylesheet" href="master.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="wrapper">
<nav class="sidebar" id="sidebar-id">
<ul class="list-unstyled nav components">
<li class="active"><i class="glyphicon glyphicon-home"></i>Home</li>
<li>
<i class="glyphicon glyphicon-briefcase"></i>About
<ul class="collapse list-unstyled" id="aboutSubmenu">
<li>Pages 1</li>
<li>Pages 2</li>
<li>Pages 3</li>
</ul>
</li>
<li>
<i class="glyphicon glyphicon-duplicate"></i>Pages
<ul class="collapse list-unstyled" id="pagesSubmenu">
<li>Pages 1</li>
<li>Pages 2</li>
<li>Pages 3</li>
</ul>
</li>
<li><i class="glyphicon glyphicon-link"></i> Portfolio</li>
<li><i class="glyphicon glyphicon-send"></i>Contact</li>
</ul>
</nav>
<!-- end sidebar -->
</body>
As you can see when you click on 'About' or 'Pages' their dropdown opens, however they do not close unless you click on the specific heading again. I would like any open dropdown to close, unless you click on the dropdowns heading, in which case all dropdowns will close and then the correct dropdown shall open.
Here you go with a solution
$('a').click(function(){
if(!$(this).next('ul').hasClass('in')) {
$('.collapse').each(function(){
$(this).removeClass('in');
});
}
});
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<div class="wrapper">
<nav class="sidebar" id="sidebar-id">
<ul class="list-unstyled nav components">
<li class="active"><i class="glyphicon glyphicon-home"></i>Home</li>
<li>
<i class="glyphicon glyphicon-briefcase"></i>About
<ul class="collapse list-unstyled" id="aboutSubmenu">
<li>Pages 1</li>
<li>Pages 2</li>
<li>Pages 3</li>
</ul>
</li>
<li>
<i class="glyphicon glyphicon-duplicate"></i>Pages
<ul class="collapse list-unstyled" id="pagesSubmenu">
<li>Pages 1</li>
<li>Pages 2</li>
<li>Pages 3</li>
</ul>
</li>
<li><i class="glyphicon glyphicon-link"></i> Portfolio</li>
<li><i class="glyphicon glyphicon-send"></i>Contact</li>
</ul>
</nav>
Hope this will help you.
I want to do drag and drop. I got the idea from this Jquery Link.
My code also working fine, if I apply the same code without changing anything. Now I want to change the ID name of UI tag. Once I changed, the drag and drop is not working.
Here is my code
Aspx code
$(function() {
$("#ColumnNamesSortable, #sortable2").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
#ColumnNamesSortable,
#sortable2 {
border: 1px solid #846868;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#ColumnNamesSortable li,
#sortable2 li {
margin: 0 5px 5px 5px;
padding: 5px!important;
font-size: 0.9em;
width: 155px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<ul id="ColumnNamesSortable" class="connectedSortable"> //change id name from sortable1 to ColumnNamesSortable (not working)
<li class="ui-state-default">StoreID</li>
<li class="ui-state-default">ItemLookupCode</li>
<li class="ui-state-default">ExtendedDescription</li>
<li class="ui-state-default">SubDescription1</li>
<li class="ui-state-default">Department</li>
<li class="ui-state-default">Category</li>
<li class="ui-state-default">SupplierCode</li>
<li class="ui-state-default">SupplierName</li>
<li class="ui-state-default">TotalQuantity</li>
<li class="ui-state-default">ExtendedPrice</li>
<li class="ui-state-default">ExtendedCost</li>
<li class="ui-state-default">Profit</li>
<li class="ui-state-default">UnitOfMeasure</li>
<li class="ui-state-default">CustomerAccountNumber</li>
<li class="ui-state-default">CustomerName</li>
</ul>
<br />
<ul id="sortable2" class="connectedSortable"> // this one is working
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ul>
I want to create four drag and drop. For example
ColumnNamesSortable
DataField
ColumnField
RowField
Why when I change the name of Id of particular tag it's not working. And it doesn't show any error on console.
Here is a working example. Any sortable li can be dragged and dropped into another.
Just add all the id's to the selector and instantiate sortable.
$("#ColumnNamesSortable, #sortable2, #ColumnField, #RowField").sortable({
Working Example:
$(function() {
$("#ColumnNamesSortable, #sortable2, #ColumnField, #RowField").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
li {
list-style: none;
padding: 2px 5px;
margin-bottom: 8px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<ul id="ColumnNamesSortable" class="connectedSortable">
<li class="ui-state-default">StoreID</li>
<li class="ui-state-default">ItemLookupCode</li>
<li class="ui-state-default">ExtendedDescription</li>
<li class="ui-state-default">SubDescription1</li>
<li class="ui-state-default">Department</li>
<li class="ui-state-default">Category</li>
<li class="ui-state-default">SupplierCode</li>
<li class="ui-state-default">SupplierName</li>
<li class="ui-state-default">TotalQuantity</li>
<li class="ui-state-default">ExtendedPrice</li>
<li class="ui-state-default">ExtendedCost</li>
<li class="ui-state-default">Profit</li>
<li class="ui-state-default">UnitOfMeasure</li>
<li class="ui-state-default">CustomerAccountNumber</li>
<li class="ui-state-default">CustomerName</li>
</ul>
<br />
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ul>
<br />
<ul id="ColumnField" class="connectedSortable">
<li class="ui-state-highlight">ColumnField 1</li>
<li class="ui-state-highlight">ColumnField 2</li>
<li class="ui-state-highlight">ColumnField 3</li>
<li class="ui-state-highlight">ColumnField 4</li>
<li class="ui-state-highlight">ColumnField 5</li>
</ul>
<br />
<ul id="RowField" class="connectedSortable">
<li class="ui-state-highlight">RowField 1</li>
<li class="ui-state-highlight">RowField 2</li>
<li class="ui-state-highlight">RowField 3</li>
<li class="ui-state-highlight">RowField 4</li>
<li class="ui-state-highlight">RowField 5</li>
</ul>
I have the following code:
.navbar.navbar-inverse .navbar-brand {
color: #fff;
}
.navbar.navbar-inverse .navbar-nav > li > a {
color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">About
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Help
</li>
<li><a href="#">Contact/a>
</li>
</ul>
</li>
<li>Page 2
</li>
<li>Page 3
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up
</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Right Aligned Navbar</h3>
<p>some text.</p>
</div>
</body>
</html>
Now if you execute the above code in Firefox and click on About. You'll see something like this:
How can I remove the white circling box?
On Safari or Chrome there is no issue.
This is caused by the default Bootstrap CSS rule:
a:focus {
outline: thin dotted;
outline-offset: -2px;
}
You need to set outline: 0 on focus. If you want to remove it specifically on the navbar item, you can use the code in the snippet.
Otherwise, overwrite it for all the links with a:focus { outline: 0 none; } Check that the custom CSS priority order is higher i.e. placed after Bootstrap file.
.navbar.navbar-inverse .navbar-brand {
color: #fff;
}
.navbar.navbar-inverse .navbar-nav > li > a {
color: #fff;
}
/* Added code */
.navbar-inverse .navbar-nav > .active > a:focus {
outline: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">About
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Help
</li>
<li><a href="#">Contact/a>
</li>
</ul>
</li>
<li>Page 2
</li>
<li>Page 3
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up
</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Right Aligned Navbar</h3>
<p>some text.</p>
</div>
</body>
</html>
Dotted borders around links are an accessibility feature most browsers
have by default. It's for users who must or choose to navigate by
keyboard, there is a visual style applied to those links when "tabbed"
to. These borders also show up when the link is clicked (in it's
"active" state), and can be an eyesore depending on the design
(especially when using something like CSS image replacement, the
borders span the length of the screen).
To remove do this:
FIREFOX
input::-moz-focus-inner {
border: 0;
}
FOR ALL
a, a:hover, a:active, a:focus {
outline:0;
}
I'm trying to build a dynamic dropdown menu following http://labs.abeautifulsite.net/jquery-dropdown/
So my code is:
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<p>
Here’s a link
and here’s a button <input type="button" value="Dropdown" data-dropdown="#dropdown-1" class="">
and here’s a <span class="example" data-dropdown="#dropdown-1">span</span>
</p>
<div id="dropdown-1" class="dropdown dropdown-tip" style="display: block; left: 204.671875px; top: 1373.265625px;">
<ul class="dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="dropdown-divider"></li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
But nothing happens and I really don't understand why.
Download project files and include them in your project. the order of included files is important:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="jquery.dropdown.css" />
<script type="text/javascript" src="jquery.dropdown.js"></script>