Add transition delay while showing sub-menus in navigation using jquery and CSS

By admin / 9:18 pm, 26 Jun 2016 / CSS, jQuery / 0 Comment

In this tutorial I will guide how to set increasing transition delay in sub-menus. Transition delay timing in every sub-menu will be more than what delay timing is set in just previous sub-menu. This will be done with help of jquery and CSS.

First, Check out this demo. This is what we are trying to achieve:-

View Demo

First, we will set global transition-delay in every sub-menu with CSS , like this :-

You can see transition delay is not defined here, so delay is set automatically 0s in every li. Now using jQuery we have to set transition delay in increasing order with every sub-menu. Here we go :-

We have set 60ms delay, so with every sub-menu, delay will be increased 60ms more than from previous sub-menu.

Previous Post
Next Post