How to add slide effect in Bootstrap 3 Navbar Dropdown items

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!

Advertisements

Ask a question or leave a reply!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s