Add slide own effect in bootstrap carousal
JUST add the given jQuery code below to add slide down effect in drop down menu. this code working on both bootstrap Navbar dropdown and Button dropdown. The menu open and close on click function in large desktop screen and on touch function in small mobile/tablet device.
$('.dropdown-toggle').click(function () {
$(this).next('.dropdown-menu').slideToggle(400);
});
$('.dropdown-toggle').focusout(function () {
$(this).next('.dropdown-menu').slideUp(400);
})
$('.dropdown')
.on('show.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true,
true).slideDown(300);
})
.on('hide.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true,
false).slideUp(300, function() {
$(this).parent().removeClass('open');
});
})
.on('hidden.bs.dropdown', function() {
$(this).addClass('open');
});
change the icon of drop down toggle
.dropdown-toggle::after {
border: none!important;
font: normal normal normal 14px/1 FontAwesome;
content: "\f107"!important; /* the desired FontAwesome icon */
vertical-align: 0; /* to center vertically */
}
Remove the button border of bootstrap default button, button:focus ,
button:active ,button focus is responsible for that , code is given below
.button:active,
button:active,
.button:focus,
button:focus,
.button:hover,
button:hover{
border:none !important;
outline:none !important;
}
Change the bootstrap Dropdown button background color on click function,
.dropdown-toggle[aria-expanded="true"]
utility is responsible to do that , Example code is given below:
.dropdown-toggle[aria-expanded="true"] {
background:#fff !important;
color:#000 !important;
outline: none;
}
