Foundation CSS Sticky Navigation Dropdown Menu

Foundation CSS is an open-source front-end framework that is used to build an attractive responsive website, email, or app quickly and easily. In September 2011, ZURB published it. It is used by many companies, including Facebook, eBay, Mozilla, Adobe, and even Disney. The Bootstrap framework serves as the foundation for this platform, which mimics SaaS. It is more complex, adaptable, and unique. Because of its command-line interface, working with module bundlers is likewise a breeze. Email framework generates HTML emails that are mobile-friendly and readable on all devices. You may create fully responsive web applications using Foundation for Apps.

A drop-down menu is used to show the menu as an enlarged menu with certain items. To arrange our items, we can make a horizontal and vertical dropdown menu. The menu is created using a horizontal drop-down menu, and the sub-menus are automatically oriented vertically. In this article, we will see how we can use the sticky navigation on a drop-down menu. For applying sticky navigation to a dropdown menu we need to add the sticky navigation attributes to the dropdown menu. 

Foundation CSS Sticky Navigation Dropdown Menu used classes:

• menu: This class is used to create a basic menu with a list of items. This class is used inside <ul> element. The menu created is of horizontal type by default. 
• dropdown: This class is used to transform a basic menu into an expandable dropdown menu.

Foundation CSS Sticky Navigation used attributes:

• [data-sticky-container]: This attribute is added to the container which is transformed into the sticky container. This attribute doesn't take any value.
• [data-sticky]: This attribute is added to the container which is transformed into the sticky element. This attribute doesn’t take any value.

Syntax:

<div data-sticky-container>
 <ul class="dropdown menu" data-sticky data-dropdown-menu> 
 <li><a href="#">....</a></li>
 ....
 </ul>
</div>

Example 1: The code below demonstrates a basic dropdown menu transformed into sticky navigation.

Output:

👁 Image

Example 2: The below code demonstrates a vertical dropdown menu that is sticky.

Output:

👁 Image

Reference: https://get.foundation/sites/docs/dropdown-menu.html#sticky-navigation