Like many of you, I don’t like the abrupt opening/closing effect of the Dropdown items in Bootstrap 3 Navbar. Today, we’ll add a slide effect in those to make them behave in a pleasing manner.
Adding the slide effect with jQuery
First thing first, let’s add a few lines of jQuery to add the slide effect for the menu items that have Dropdowns:
Fixing issue for smaller screens
The jQuery we just prepared, will work nicely when the viewport width is higher than 767px. But below that, when the navigation changes from horizontal menu to hamburger-toggle menu, it will show a glitch for closing effect. This happens becaues the CSS positioning and floating of
.dropdown-menu list change below 768px. So, let’s fix that with a few lines of CSS:
View the live demo
So, now we have a slide effect for those Dropdown items, let’s see the live demo.
If you like it, don’t forget to share this post with your fellow front-end developers!