5 Plus Creative Dropdown Effects for Lists
Posted on

5+ Creative Dropdown Effects for Lists

by posted in Uncategorized

Looking to add some flair to your list elements? Have a look at these 8 dropdown effects for lists created in pure CSS by Ed Southgate. These can be used as effects that you want to add on hover for your navigation menu.

1st effect : Like dealing playing cards the list items stack up one after the other on hover.

2nd effect : The list items drops down one after the other on hover.

3rd effect : The list items opens into view from the center one after the other on hover.

4th effect : The list item slides into place, slightly going forward and then snaps back into place.

5th effect : The list item drops into view like how the flaps of a venetian blinds stacks into place when it’s dropped.

6th effect : Like dealing playing cards the list items stack up one after the other from the right.

7th effect : A line drops down and then expands into the list item kinda like a water droplet sliding down the side of a glass.

8th effect : This effect kinda mimics the opening of a Japanese folding hand fan.

If you are having trouble with the pen, try the archived copy on GitHub

See the Pen Dropdown CSS animation examples. by Ed Southgate (@southface) on CodePen.0