How to keep hover rule on top of Bootstrap dropdown button - javascript

I am working on the below snippet. How can I keep hover rule affected on .btn-default while still hovering on it's associated .dropdown-menu?
$(function(){
$('.btn-dropdown').hover(function() {
$(this).addClass('open');
},
function() {
$(this).removeClass('open');
});
});
body{
padding:30px;
}
.btn-default:hover{
color:red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="col-md-3">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group btn-dropdown" role="group">
<a role="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
List One
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
<ul class="dropdown-menu">
<li>Dropdown link</li>
<li>Dropdown link</li>
</ul>
</div>
<div class="btn-group btn-dropdown" role="group">
<a role="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
List Two
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
<ul class="dropdown-menu">
<li>Dropdown link</li>
<li>Dropdown link</li>
</ul>
</div>
</div>
</div>


See If this is what you exactly looking for. I have added .open parent in your CSS and removed .hover
Whenever you are appending .open class it will add the CSS
$(function(){
$('.btn-dropdown').hover(function() {
$(this).addClass('open');
},
function() {
$(this).removeClass('open');
});
});
body{
padding:30px;
}
.open .btn-default{
color:red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="col-md-3">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group btn-dropdown" role="group">
<a role="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
List One
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
<ul class="dropdown-menu">
<li>Dropdown link</li>
<li>Dropdown link</li>
</ul>
</div>
<div class="btn-group btn-dropdown" role="group">
<a role="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
List Two
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
<ul class="dropdown-menu">
<li>Dropdown link</li>
<li>Dropdown link</li>
</ul>
</div>
</div>
</div>

Related

show selected option in dropdown javascript

I have implemented the nav bar and how to show the selected options first using javascript
function getoptions(){
var x =document.getElementById("languagelist");
var y = document.getElementById("language");
y.innerHTML= // set the selected language
}
<nav>
<div class="dropdown">
<button id="language" class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
English
</button>
<div id="languagelist" class="dropdown-menu" aria-labelledby="dropdownMenu2" onclick="getoptions()">
<a class="dropdown-item" href="/en">English</a>
<a class="dropdown-item" href="/fr">French</a>
</div>
</div>
</nav>

This pure javascript solution would work for you. run and test
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav>
<div class="dropdown">
<button id="language" class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenu2"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="clickButton()">
English
</button>
<div id="languagelist" class="dropdown-menu" aria-labelledby="dropdownMenu2" onclick="clickItem(); return false">
<a class="dropdown-item" href="/en">English</a>
<a class="dropdown-item" href="/fr">French</a>
</div>
</div>
</nav>
</body>
<script>
function clickButton() {
document.getElementById("languagelist").click();
}
function clickItem() {
var element = document.getElementById("languagelist");
for (var i = 0; i < element.children.length; i++) {
(function(index) {
element.children[i].onclick = function() {
var thetext = element.getElementsByTagName('a')[index].innerHTML;
// var thehref = element.getElementsByTagName('a')[index].href; get the href here once you hosted, for testing I will use the name
var buttonelement = document.getElementById("language");
buttonelement.innerText = thetext;
window.open("/"+thetext);
}
})(i);
}
}
</script>
</html>
hope this will help to someone. cheers!

You can use this code
<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>Separated link</li>
</ul>
</div>
<script type="text/javascript">
$(".dropdown-menu li a").click(function(){
alert($(this).data('value'));
});

Add data attribute and identify the element,
<nav>
<div class="dropdown">
<button id="language" class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
English
</button>
<div id="languagelist" class="dropdown-menu" aria-labelledby="dropdownMenu2" >
<a class="dropdown-item" data-value="/en" href="/en">English</a>
<a class="dropdown-item" data-value="/fr" href="/fr">French</a>
</div>
</div>
</nav>
script like this,
remove element and add as first item
$(".dropdown-item").click(function () {
var value = $(this).data('value');
var innerHtmlValue = $(this).html();
$('.dropdown-item').filter('[data-value="' + value + '"]').remove();
$('#languagelist a:eq(0)').before("<a class='dropdown-item' data-value='" + value + "' href='/en'>" + innerHtmlValue + "</a>");
});

Issue on Adding Animation To Cart Arrow on Dropdown Button

Can you please take a look at this demo and let me know why I am not able to properly animate the .fa classes? As you can see the animation works fine on clicking on each button but is not affecting to other buttons. For Example if you click on Action A and then click on Action B the arrow on Action A still is in previous state.
$(".dropper").on("click", function(){
//$('.dropper').find('.fa').removeClass('css-chevron-down').addClass('css-chevron-right');
$(this).find('.fa').toggleClass('css-chevron-right css-chevron-down');
});
.css-chevron-down{
transform: rotate(0.25turn);
transition: all 0.5s ease;
}
.css-chevron-right{
transition: all 0.5s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="col-sm-12">
<div class="col-sm-6 "><div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle dropper" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action A <i class="fa fa-chevron-right css-chevron-right" aria-hidden="true"></i>
</button>
<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>
</ul>
</div></div>
<div class="col-md-6" style="float:left; margin-left:200px;"><div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle dropper" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action B <i class="fa fa-chevron-right css-chevron-right" aria-hidden="true"></i>
</button>
<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>
</ul>
</div></div>
</div>

You have to write some code to bring the arrow to its original state, when the dropdown closes. The event you need for that is hide.bs.dropdown. The following piece of code will do the trick:
Code:
$("body").on("hide.bs.dropdown", function (e) {
var i = $(e.relatedTarget).find(".fa");
i.removeClass("css-chevron-down").addClass("css-chevron-right");
});
Also, be sure to check out the following snippet to see live how it works.
Snippet:
/* ----- JavaScript ----- */
$(".dropper").on("click", function() {
$(this).find('.fa').toggleClass('css-chevron-right css-chevron-down');
});
$("body").on("hide.bs.dropdown", function (e) {
var i = $(e.relatedTarget).find(".fa");
i.removeClass("css-chevron-down").addClass("css-chevron-right");
});
/* ----- CSS ----- */
.css-chevron-down {
transform: rotate(0.25turn);
transition: all 0.5s ease;
}
.css-chevron-right {
transition: all 0.5s ease;
}
<!----- HTML ----->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-sm-12">
<div class="col-sm-6 ">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle dropper" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action A <i class="fa fa-chevron-right css-chevron-right" aria-hidden="true"></i>
</button>
<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>
</ul>
</div>
</div>
<div class="col-md-6" style="float:left; margin-left:200px;">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle dropper" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action B <i class="fa fa-chevron-right css-chevron-right" aria-hidden="true"></i>
</button>
<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>
</ul>
</div>
</div>
</div>

How i can change bootstrap navbar hover

How can i edit this to be able to see the navbar options. Currently it has the same color as background.I want to change the font before to white and change them when it hover to white background with blue color font.
<head>
<title>Bootstrap Example</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.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<nav class="navbar navbar-dark bg-primary navbar-fixed-top " role="navigation">
<div class="container">
<div class="navbar-header">
<div class="tog" style="padding-top:7px; ">
<a href="#menu-toggle" class="btn btn-default btn-sm" id="menu-toggle"> <span class="glyphicon glyphicon-eye-open"></span>
</a>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse" id="top-nav">
<ul class="nav navbar-nav">
<li><i class="fa fa-home"></i> Home
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-suitcase"></i><span class="glyphicon glyphicon-envelope"> </span>
</li>
<li><i class="fa fa-suitcase"></i><span class=" glyphicon glyphicon-bell"> </span>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle profile-image" data-toggle="dropdown">
<img src="http://placehold.it/30x30" class="img-circle special-img">xxx <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><i class="fa fa-cog"></i> Account
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out"></i> Sign-out
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

go to your downloaded bootstrap.css file and makes the changes maybe somewhere around line 4489..
change the css of this selector
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
color: #333;
background-color: transparent;
}

Bootstrap dropdown menu not displaying on mouseover / click

Here's the HTML for the dropdown part:
<li class="dropdown">
<a class="dropdown-toggle" href="/contact-us">Contact Us <i class="fa fa-angle-down hidden-xs hidden-sm"></i></a>
<a class="visible-xs visible-sm dropdown-menu-xs" href="#" data-toggle="dropdown"><i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li>testpage</li>
<li>testpage2</li>
</ul>
</li>
It just looks like this:
Nothing happens when I mouseover it, and clicking it takes me to the contact us page.
I should have all the necessary JS files:
<script src="/js/plugins/jquery.1.11.0.js"></script>
<script src="/js/plugins/bootstrap.min.js"></script>
<script src="/js/plugins/bootstrap-dialog.min.js"></script>
<script src="/js/owl.carousel.js"></script>
<script src="/js/custom.js"></script>
<script src="/js/validate.js"></script>
<script type="text/javascript" src="/js/plugins/sticky-tabs.min.js"></script>
<script src="/js/plugins/jquery.select2list.min.js"></script>
Not sure where I'm going wrong.
Edit - getting this error in console:
Not sure what's causing that though, there is no HTML in there

<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Contact Us <i class="fa fa-angle-down hidden-xs hidden-sm"></i></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
Working fiddle
https://jsfiddle.net/DTcHh/

There were few errors in your code.
You are not giving id to your button.
Missing data-toggle="dropdown" from button
You are not using aria-labelledby attribute in ul.
Checkout this snippet.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<li class="dropdown">
<a class="btn btn-default dropdown-toggle" id="dropdownMenu" data-toggle="dropdown">Contact Us <i class="fa fa-angle-down hidden-xs hidden-sm"></i></a>
<a class="visible-xs visible-sm dropdown-menu-xs" href="#" data-toggle="dropdown"><i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu">
<li>testpage</li>
<li>testpage2</li>
</ul>
</li>

Bootstrap 3 Navigation Toggle not working

I copied over the navbar example from the docs and it worked fine. I made several edits and now the toggle button is not working. I've looked at several threads in StackOverflow and haven't found anything that's helping me. Here is my code:
<div class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#addressToolBar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="dropdown">
<button class="dropdown-toggle btn btn-primary navbar-btn" data-toggle="dropdown" role="button" aria-expanded="false"><span class="address-selected">4203 Afton Ln</span> <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a>4203 Afton Ln, 78744</a></li>
<li><a>4511 Elwood Rd, 78722</a></li>
<li><a>8518 FM 1826, 78736</a></li>
<li class="divider"></li>
<li><a><i class="fa fa-plus"></i> add new</a></li>
<li class="divider"></li>
<li><a><i class="fa fa-mail-forward"></i> import</a></li>
</ul>
</div>
</div>
<div class="collapse navbar-collapse" id="addressToolBar">
<form class="navbar-form navbar-left address-search" role="search">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
</span>
</div>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Other <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a><i class="fa fa-mail-reply"></i> export</a></li>
<li><a><i class="fa fa-file-excel-o"></i> get all invoices</a></li>
<li><a><i class="fa fa-usd"></i> billing options</a></li>
<li class="divider"></li>
<li><a><i class="fa fa-trash"></i> delete</a></li>
</ul>
</li>
<li><a><i class="fa fa-edit"></i> Edit</a></li>
<li><a><i class="fa fa-plus"></i> Add New</a></li>
</ul>
</div>
</div>
</div>
Here is a (non-working) fiddle.

Your toggle button has a lower z-index than other elements, hence you can select it. Just add this line to your CSS and problem solved :
.navbar-toggle {
z-index: 100000;
}
See Bootply for reference

Your nav toggle is working fine. The issue is being caused by this bit of code
<div class="dropdown">
<button class="dropdown-toggle btn btn-primary navbar-btn" data-toggle="dropdown" role="button" aria-expanded="false"><span class="address-selected">4203 Afton Ln</span> <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a>4203 Afton Ln, 78744</a></li>
<li><a>4511 Elwood Rd, 78722</a></li>
<li><a>8518 FM 1826, 78736</a></li>
<li class="divider"></li>
<li><a><i class="fa fa-plus"></i> add new</a></li>
<li class="divider"></li>
<li><a><i class="fa fa-mail-forward"></i> import</a></li>
</ul>
</div>
With position relative it is covering the entire width of the nav and so the toggle button is behind it and cant be pressed.
You could look at changing the position or at adding a z-index:xxxx; to the toggle button to keep it on the top layer.

Categories

Resources