Reputation: 3175
can you help me how to do realize this situation with the bootstrap navbar. As I wrote in the title, I need to realize when click on list item in navbar menu, current item should get class active and marked with top border, but on hover over other list item, class active (border top also) should disappear from current list item with active class..
Practically, when the mouse is moving over the menu the red line follows the mouse. when the mouse moves away from the menu item, the red line return back above the active menu
This is my current code - http://www.bootply.com/uvUwueNuOG
You'll noticed that is Home card active, when hover, active class disappear and move depending on where the mouse is, but when click on another card in menu, nothing happens
Upvotes: 2
Views: 2710
Reputation: 1761
Please Try this... it will open a popup on class remove and class re-adding just for confirmation you can remove alert from there. in this example i used your code just replaced .hover with .mouseenter and for leave .mouseleave
Please try now this is adding active class on click as well..
//Add class active on specific list item
$(document).ready(function(){
var item, elem, makeActive;
item = '.navbar-nav li.item';
elem = document.querySelectorAll(item);
makeActive = function () {
for (var i = 0; i < elem.length; i++)
elem[i].classList.remove('active');
this.classList.add('active');
};
for (var i = 0; i < elem.length; i++)
elem[i].addEventListener('mousedown', makeActive);
var $home = $(".navbar-default .navbar-nav>.active");
$(".navbar-default .navbar-nav li").mouseenter(function () {
$home.removeClass("active");
// alert('active class removed')
})
.mouseleave(function () {
$(this).removeClass("active");
$home.addClass("active");
// alert('active class readded')
});
$(".navbar-nav li").click(function () {
$(this).addClass("active");
});
});
body {
font-family: 'Lato', sans-serif;
color: #3e3e3e;
background: #f6f6f6;
}
ul {
list-style: none;
padding: 0px;
display: block;
}
a,
a:hover,
a:focus {
text-decoration: none;
color: #ffffff;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
p {
font-size: 17px;
font-weight: 400;
line-height: 23px;
}
h3 {
font-family: 'Lustria', sans-serif;
text-align: center;
color: #3e3e3e;
font-size: 27px;
line-height: 33px;
word-wrap: break-word;
}
h4 {
color: #ffffff;
font-size: 25px;
font-weight: 700;
margin-bottom: 21px;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
textarea:focus,
input:focus,
input[type]:focus {
outline: none;
border: none;
box-shadow: 0 0 10px #353d4a inset;
}
/********** HEADER ****************/
.navbar-default {
border: none;
background: rgba(255, 255, 255, 0.8);
margin-bottom: 0px;
}
.navbar-brand>img {
position: relative;
z-index: 1;
}
.navbar > .container .navbar-brand.shrink {
height: 52px;
background: #403f44;
}
.navbar-brand>img.shrink {
width: 46%;
margin: 0px auto;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.navbar > .container .navbar-brand {
padding: 0px;
margin: 0px 35px 0px 0px;
transition: 0s;
}
.navbar-default .navbar-nav li {
margin-right: 15px;
position: relative;
z-index: 0;
}
.navbar-default .navbar-nav>li>a {
text-transform: uppercase;
color: #3e3e3e;
padding: 22px 10px;
letter-spacing: 0.4px;
font-size: 20px;
font-weight: 400;
border-top: 6px solid transparent;
}
.navbar-default .navbar-nav .item>a.shrink {
padding: 12px 10px 14px;
}
.nav.navbar-nav .language a.shrink {
margin-top: 14px;
}
.navbar-default .booking .btn-default.shrink {
top: 3px;
}
.navbar-default .booking .btn-default a.shrink {
padding: 12px 22.5px;
font-size: 16px;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>li>a:hover {
color: #3e3e3e;
background: none;
border-top-color: #ff2a00;
}
.nav.navbar-nav .language a {
border-top: 0px;
padding: 0px;
margin: 27px 18px 0px 20px;
}
.navbar-default .language img {
margin-right: 26px;
}
.language.dropdown .dropdown-toggle:after {
content: "\f107";
font-family: FontAwesome;
font-size: 40px;
position: absolute;
left: 52px;
top: 4px;
}
.language .dropdown-menu:after {
content: "\f0d8";
font-family: FontAwesome;
color: #ffffff;
font-size: 40px;
position: absolute;
right: 38px;
top: -34px;
}
.nav.navbar-nav .dropdown-menu li {
margin-right: 0px;
}
.nav.navbar-nav .dropdown-menu li a {
margin: 15px 18px;
}
.nav.navbar-nav .dropdown-menu li:last-child a {
margin-bottom: 10px;
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
background: none;
}
.navbar-default .booking .btn-default,
.navbar-default .booking .btn-default:hover,
.navbar-default .booking .btn-default:focus {
font-size: 19px;
border: none;
padding: 0px;
outline: 0;
background: #ff2a00;
border-radius: 6px;
position: absolute;
top: 36px;
}
.navbar-default .booking .btn-default a {
display: block;
font-size: 19px;
text-transform: uppercase;
color: #ffffff;
padding: 15.5px 31px;
}
.dropdown-menu {
top: 134%;
left: -65%;
}
.navbar-collapse.collapse.in ul {
text-align: center;
margin-top: 50px;
}
.navbar-collapse.collapse.in {
margin-bottom: 25px;
}
.navbar-collapse.collapse.in li a {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" title="Logo">
Logo
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="item active">
<a href="#" title="Home">Home</a>
</li>
<li class="item">
<a href="#" title="Apartments">Apartments</a>
</li>
<li class="item">
<a href="#" title="Rates">Rates</a>
</li>
<li class="item">
<a href="#" title="Location">Location</a>
</li>
<li class="item">
<a href="#" title="Contact">Contact</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-->
</nav>
</div>
Upvotes: 0
Reputation: 3175
Ok, I got it
.navbar-default .navbar-nav:hover>.active:not(:hover) > a {
border-top-color: transparent;
}
Upvotes: 0
Reputation: 90287
You have problems because you should not add/remove the active class unless you want to make a certain element "active". So, first step is not to remove .active
from the "active" element when you hover another. If you want the .active
element to lose its border-top-color
, you need to put this in your CSS:
.navbar-default:hover .navbar-nav>.active:not(:hover) > a {
border-top-color: transparent;
}
Make sure it loads after bootstrap.css
or you will need a stronger selector. Now the active
item no longer looks active
when the menu is hovered. Now, using JavaScript, you can just use the active
class as it is supposed to be used: to mark the active element. So when you want to make another element active, you remove it from all elements and apply it to the one you clicked.
$(document).ready(function(){
$('.navbar-default li').on('click', function(){
$('.navbar-default li').removeClass('active');
$(this).addClass('active');
})
});
Good enough?
Upvotes: 1