Foundation CSS Accordion Menu ScrollTop Drilldown

Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to lay out nice responsive websites, apps, and emails and can be accessible to any device.

Accordion Menu is used to convert the basic vertical menu into an expandable menu with the help of the Accordion Menu plugin. When we want to convert the basic menu into the accordion menu then add the attribute data-accordion-menu.

ScrollTop Drilldown: This tool is very useful for longer menus and provides a better user experience. ScrollTop Drilldown scrolls to the top of the menu when selecting a submenu or just going back to the previous menu. To use the ScrollTop Drilldown feature change the value of the data-scroll-top attribute to "true".

Syntax: 

<ul class="vertical menu drilldown" data-drilldown 
 data-scroll-top="true">
 ...
</ul>

Example 1: The following code shows a basic ScrollTop Drilldown Menu.

Output:

👁 Image

Example 2: The following code shows a basic ScrollTop Drilldown Menu.

Output:

👁 Image

Reference: https://get.foundation/sites/docs/drilldown-menu.html