Foundation CSS Drilldown Menu
Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails to look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.
The drilldown menu is one of Foundation CSS’s three menu patterns. This converts a series of nested lists into a vertical drilldown menu. To make a drilldown menu, we use the standard Menu syntax, using <ul>, <li>, and <a> and add the “data-drilldown” class along with “vertical menu drilldown” classes to the root menu to set up the drilldown.
To create sub-menus, we place a <ul> next to an <a>, that <a> will then open the <ul> that it’s next to. The anchor tags without a submenu will function as a normal link. To nest another menu inside the main menu, we use the “menu vertical nested” classes to the nested <ul> tag.
Foundation CSS Drilldown Menu Classes:
- vertical menu drilldown: These classes are applied to the<ul> tag. This converts an unordered list to a drilldown menu.
- menu vertical nested: These classes are applied to the<ul> tag. This converts a nested unordered list to a sub-menu of the drilldown menu.
<ul class="vertical menu drilldown" data-drilldown> <li><a href="#">Title</a></li> ... </ul>
Example 1: This example demonstrates the drill-down menu made using the foundation CSS.
Example 2: This example demonstrates the nested drill-down menu made using the foundation CSS.