Skip to content
Related Articles

Related Articles

Foundation CSS Sticky Navigation Dropdown Menu

View Discussion
Improve Article
Save Article
  • Last Updated : 30 Jun, 2022

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.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
      
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div data-sticky-container >
        <div data-sticky>
            <ul class="dropdown menu"
                data-dropdown-menu style=
           "background-color: lightgrey; margin-top: 0;">
                <li>
                    <a href="#">GFG 1</a>
                    <ul class="menu">
                        <li><a href="#">Item 1</a></li>
                        <li><a href="#">Item 2</a></li>
                        <li><a href="#">Item 3</a></li>
                        <li><a href="#">Item 4</a></li>
                    </ul>
                </li>
                <li><a href="#">GFG 2</a>
                    <ul class="menu">
                        <li><a href="#">item a</a>
                            <ul class="menu">
                                <li><a href="#">item a1</a></li>
                                <li><a href="#">item a2</a></li>
                            </ul>
                        </li>
                        <li><a href="#">item b</a></li>
                    </ul>
                </li>
                <li><a href="#">GFG 3</a></li>
            </ul>
        </div>
    </div>
    <div class='column row'
        id='root'>
        <h1 class="text-center"
            style="color:green;">
            GeeksforGeeks
        </h1>
        <h3 class="text-center">
            Foundation CSS Sticky Navigation Dropdown Menu
        </h3>
        <p class="margin-3">
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line.
        </p>
  
        <p class="margin-3">
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line.
        </p>
  
        <p class="margin-3">
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line.
        </p>
  
        <p class="margin-3">
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line.
        </p>
  
        <p class="margin-3">
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line.
        </p>
  
        <p class="margin-3">
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line.
        </p>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Output:

 

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

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
      
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div data-sticky-container>
        <div data-sticky>
            <ul class="vertical dropdown menu"
                data-dropdown-menu 
  style="max-width:250px; background-color: lightgray">
                <li>
                    <a href="#">GFG 1</a>
                    <ul class="vertical menu nested">
                        <li><a href="#">Item 1</a></li>
                        <li><a href="#">Item 2</a></li>
                        <li><a href="#">Item 3</a></li>
                        <li><a href="#">Item 4</a></li>
                    </ul>
                </li>
                <li><a href="#">GFG 2</a>
                    <ul class="vertical menu nested">
                        <li><a href="#">item a</a>
                            <ul class="vertical menu nested">
                                <li><a href="#">item a1</a></li>
                                <li><a href="#">item a2</a></li>
                            </ul>
                        </li>
                        <li><a href="#">item b</a></li>
                    </ul>
                </li>
                <li><a href="#">GFG 3</a></li>
            </ul>
        </div>
    </div>
    <div class='column row'
        id='root'>
        <h1 class="text-center"
            style="color:green;">
            GeeksforGeeks
        </h1>
        <h3 class="text-center">
            Foundation CSS Sticky Navigation Dropdown Menu
        </h3>
        <p class="margin-3">
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line.
        </p>
  
        <p class="margin-3">
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line.
        </p>
  
        <p class="margin-3">
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line.
        </p>
  
        <p class="margin-3">
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line.
        </p>
  
        <p class="margin-3">
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line.
        </p>
  
        <p class="margin-3">
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line.
        </p>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Output:

 

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!