Ask mcustom scroll bar

by Dang Duy Hoang

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<link rel="stylesheet" href="https://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css">
<!-- Year -->
<div class="dropdown" id="expandYear" style="width:200px; border-bottom: 1px solid #B5AAA7;">
    <label style="width: 90%; color:#B5AAA7; margin: 0; font-weight: 600; font-size: 13px;">Year </label>
    <i style="color:#007CA4; font-size: 13px; font-weight: bolder;" class="glyphicon glyphicon-menu-down" id="dropdownMenuYear" data-toggle="dropdown"></i>
    <ul class="mCustomScrollbar dropdown-menu custom-border-expand noPadding" aria-labelledby="dropdownMenuYear" style="width:200px; max-height:120px;" data-mcs-theme="dark">
  </ul>
</div>

CSS

.custom-border-expand {
    border-color: #007CA4;
    border-radius: 0;
}

ul li {
  margin: 0px !important;
}

li a:hover {
  background-color: #007CA4 !important;
  color: white !important;
}

.noPadding {
  padding: 0px;
}

.dropdown-menu>.mCustomScrollBox>.mCSB_container>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    text-decoration: none;
}

.mCSB_container {
  margin-right: 19px !important;
}

#expandCategory .custom-border-expand, #expandFluid .custom-border-expand, #expandStatus .custom-border-expand, #expandYear .custom-border-expand {
  top: 16px;
}

JavaScript

var arrIDElementExpand = ["expandCategory", "expandFluid", "expandStatus", "expandYear"];

$( "#expandCategory label, #expandCategory i, #expandFluid label, #expandFluid i, #expandStatus label, #expandStatus i, #expandYear label, #expandYear i" ).hover(function() {
		hoverShow($(this)[0].parentElement.id);
  }, function() {
    hoverHide($(this)[0].parentElement.id);
 });

$( "#dropdownMenuCategory, #dropdownMenuFluid, #dropdownMenuStatus, #dropdownMenuYear" ).click(function() {
	var idElement = $(this)[0].parentElement.id;
	$("#" + idElement + " label").css("color", "#064060");
  $("#" + idElement + " i").css("color", "#064060");
});

$(document).on('click', function(evt) {
	for( var i=0; i<arrIDElementExpand.length; i++) {
  	if (!$( '#' + arrIDElementExpand[i] ).hasClass('open')) {
      $("#" + arrIDElementExpand[i] + " label").css("color", "#B5AAA7");
      $('#' + arrIDElementExpand[i]).css("border-bottom-color", "#B5AAA7");
      $('#' + arrIDElementExpand[i] + " i").css("color", "#007CA4");
  	} 
  }
});

function hoverShow(idElement) {
	if (!$( '#' + idElement ).hasClass('open')) {
  	$("#" + idElement + " label").css("color", "#007CA4");
  	$("#" + idElement).css("border-bottom-color", "#007CA4");	
  }
}

function hoverHide(idElement) {
	if (!$( '#' + idElement ).hasClass('open')) {
    	$("#" + idElement + " label").css("color", "#B5AAA7");
    	$("#" + idElement).css("border-bottom-color", "#B5AAA7");
  }
}

$( document ).ready(function() {
    var d = new Date();
    var currentYear = d.getFullYear();
		for (var i=1990; i<=currentYear; i++) {
    	$("#expandYear ul").append("<li><a href=\"#\">"+ i +"</a></li><li role=\"separator\" class=\"divider\"></li>");
    }
    
		$("#expandYear ul").mCustomScrollbar({ 
    		advanced:{ 
        	updateOnContentResize: true,
          updateOnImageLoad: true,
          updateOnSelectorChange: "ul",
          updateOnSelectorChange: "ul li",
        } 
    });
    
    $("#expandYear...