Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Animated Dropdown Navigation Menu?


kyle00428

Question

Does anyone know how to animate a dropdown menu in the navigation header? On a basic Squarespace 7.1 site when you hover over a menu item, the dropdown menu appears in an instant. I would like to animate it, so that it slides down from the menu. (I would also be open to other animation styles.) Or am I missing something in the Squarespace editor?

Here's an example website for reference of the sort of animation I'm looking for: http://www.khourigroupltd.com

Edited by kyle00428
Link to comment

5 answers to this question

Recommended Posts

  • 0
On 9/4/2021 at 12:54 PM, kyle00428 said:

The site is https://earthworm-koi-8699.squarespace.com and the password is jws.

Try adding to Design > Custom CSS

.header-nav-folder-content {
    transition: transform 0.5s;
    transform: translateY(-100%) !important;
}

.header-nav-item.header-nav-item--folder:hover .header-nav-folder-content {
    transform: translateY(0) !important;
    transition: transform 0.5s;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
12 hours ago, tuanphan said:

Try adding to Design > Custom CSS

.header-nav-folder-content {
    transition: transform 0.5s;
    transform: translateY(-100%) !important;
}

.header-nav-item.header-nav-item--folder:hover .header-nav-folder-content {
    transform: translateY(0) !important;
    transition: transform 0.5s;
}

 

Love this! Thank you so much!!! Are there any other animation types available?

Link to comment
  • 0
On 9/7/2021 at 4:14 AM, kyle00428 said:

Love this! Thank you so much!!! Are there any other animation types available?

Hi. Can you describe?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...