CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Mile Mijatović
Mile Mijatović

Reputation: 3175

Bootstrap navbar on hover list item remove class active, on mouse out return class active

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

Answers (3)

Bhanu Pratap
Bhanu Pratap

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

Mile Mijatović
Mile Mijatović

Reputation: 3175

Ok, I got it

.navbar-default .navbar-nav:hover>.active:not(:hover) > a {
  border-top-color: transparent;
}

Upvotes: 0

tao
tao

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

Related Questions