Foundation CSS Dropdown

Last Updated : 06 Apr, 2022

Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This framework is based on bootstrap, which is similar to SaaS. It’s more complex, versatile, and configurable. It also comes with a command-line interface, making it simple to use with module bundlers. Email framework provides you with responsive HTML emails, which can be read on any device. Foundation for Apps allows you to build fully responsive web applications.

Foundation CSS Dropdown is used to display the content when we click the element. We can put any type of content in the dropdown and access it by clicking the element. Dropdown is revealed when we click the element or hover over it. We can also position our dropdown as top, bottom, left, and right using the dropdown positioning classes.

In this article, we will see how to create the dropdown in Foundation CSS.

Foundation CSS Dropdown Classes:

Basics: We will create the basics dropdown.
Positioning: We will create the dropdown to position the dropdown.
Explicit Positioning: This is used to set both position and alignment of the box.

Syntax:

<div class="dropdown-pane" data-dropdown>
   ...
</div>

Example 1: The following code demonstrates the Foundation CSS Dropdown when we click the element or hover over it.

HTML

<!DOCTYPE html>
<html>

<head>
    <title> Foundation CSS Dropdown </title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" />

    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
    </script>
</head>

<body>
    <center>
        <h2 style="color:green;"> GeeksforGeeks </h2>
        <h3> Foundation CSS Dropdown </h3>

        <button class="button" type="button" 
            data-toggle="dropdown1">
            Dropdown Click
        </button>
        
        <div class="dropdown-pane" id="dropdown1" 
            data-dropdown data-auto-focus="true">
            <strong>GeeksforGeeks:</strong>
            <p>A Computer Science portal for geeks.</p>
        </div>

        <button class="button" type="button" 
            data-toggle="dropdown2">
            Dropdown Hover
        </button>

        <div class="dropdown-pane" id="dropdown2" 
            data-dropdown data-hover="true" 
            data-hover-pane="true">

            <p>A Computer Science portal for geeks.</p>
        </div>
    </center>
    
    <script>
        $(document).ready(function() {
            $(document).foundation();
        })
    </script>
</body>

</html>

Output:

Example 2: The following code demonstrates the Foundation CSS Dropdown positions.

HTML

<!DOCTYPE html>
<html>

<head>
    <title> Foundation CSS Dropdown </title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" />

    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
    </script>
</head>

<body>
    <center>
        <h2 style="color:green;"> 
            GeeksforGeeks 
        </h2>
        
        <h3> Foundation CSS Dropdown </h3>

        <button class="button" type="button" 
            data-toggle="dropdown1">
            Dropdown Left
        </button>
        
        <div class="dropdown-pane left" 
            id="dropdown1" data-dropdown>
            <strong>GeeksforGeeks</strong>
        </div> <br>

        <button class="button" type="button" 
            data-toggle="dropdown2">
            Dropdown Right
        </button>

        <div class="dropdown-pane right" 
            id="dropdown2" data-dropdown>
            <strong>GeeksforGeeks</strong>
        </div><br>

        <button class="button" type="button" 
            data-toggle="dropdown3">
            Dropdown Bottom
        </button>

        <div class="dropdown-pane bottom" 
            id="dropdown3" data-dropdown>
            <strong>GeeksforGeeks</strong>
        </div><br>

        <button class="button" type="button" 
            data-toggle="dropdown4">
            Dropdown Top
        </button>

        <div class="dropdown-pane top" 
            id="dropdown4" data-dropdown>
            <strong>GeeksforGeeks</strong>
        </div>
    </center>

    <script>
        $(document).ready(function() {
            $(document).foundation();
        })
    </script>
</body>

</html>

Output:

Example 3: The following code demonstrates the Dropdown Explicit Positions Top and Bottom.

HTML

<!DOCTYPE html>
<html>

<head>
    <title> Foundation CSS Dropdown </title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" />

    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
    </script>
</head>

<body>
    <center>
        <h2 style="color: green;"> 
            GeeksforGeeks 
        </h2>
        
        <h3>Foundation CSS Dropdown</h3>

        <button class="button" type="button"
            data-toggle="bottom-left">
            Bottom Left
        </button>

        <div class="dropdown-pane" data-position="bottom" 
            data-alignment="left" 
            id="bottom-left" data-dropdown>
            <strong>GeeksforGeeks</strong>
        </div>

        <button class="button" type="button" 
            data-toggle="bottom-center">
            Bottom Center
        </button>

        <div class="dropdown-pane" data-position="bottom" 
            data-alignment="center" id="bottom-center" 
            data-dropdown>
            <strong>GeeksforGeeks</strong>
        </div>

        <button class="button" type="button" 
            data-toggle="bottom-right">
            Bottom Right
        </button>

        <div class="dropdown-pane" data-position="bottom" 
            data-alignment="right" id="bottom-right"
            data-dropdown>
            <strong>GeeksforGeeks</strong>
        </div><br><br><br><br>

        <button class="button" type="button" 
            data-toggle="top-left">
            Top Left
        </button>

        <div class="dropdown-pane" data-position="top" 
            data-alignment="left" id="top-left" 
            data-dropdown>
            <strong>GeeksforGeeks</strong>
        </div>

        <button class="button" type="button" 
            data-toggle="top-center">
            Top Center
        </button>

        <div class="dropdown-pane" data-position="top" 
            data-alignment="center" id="top-center" 
            data-dropdown>
            <strong>GeeksforGeeks</strong>
        </div>

        <button class="button" type="button" 
            data-toggle="top-right">
            Top Right
        </button>

        <div class="dropdown-pane" data-position="top" 
            data-alignment="right" id="top-right" 
            data-dropdown>
            <strong>GeeksforGeeks</strong>
        </div>
    </center>
    
    <script>
        $(document).ready(function() {
            $(document).foundation();
        })
    </script>
</body>

</html>

Output:

Dropdown Explicit Positions Top and Bottom

Example 4: The following code demonstrates the Dropdown Explicit Positions Left and Right.

HTML

<!DOCTYPE html>
<html>

<head>
  <title> Foundation CSS Dropdown </title>
  <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" />
        
   <!-- Compressed JavaScript -->
  <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
  </script>
  <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" >
  </script>
</head>

<body>    
  <center>
    <h2 style="color:green;"> GeeksforGeeks </h2>
    <h3> Foundation CSS Dropdown </h3>
    
    <button class="button" type="button" 
            data-toggle="left-top">
      Left Top
    </button>
    <div class="dropdown-pane" data-position="left" 
         data-alignment="top" id="left-top" 
         data-dropdown>
      <strong>  GeeksforGeeks </strong>
    </div>

    <button class="button" type="button" 
            data-toggle="right-top">
      Right Top
    </button>
    <div class="dropdown-pane" data-position="right" 
         data-alignment="top" id="right-top" 
         data-dropdown>
      <strong>  GeeksforGeeks </strong>
    </div><br><br>

    <button class="button" type="button" 
            data-toggle="left-center">
      Left Center
    </button>
    <div class="dropdown-pane" data-position="left" 
         data-alignment="center" id="left-center" 
         data-dropdown>
      <strong> GeeksforGeeks </strong>
    </div>

    <button class="button" type="button" 
            data-toggle="right-center">
      Right Center
    </button>
    <div class="dropdown-pane" data-position="right" 
         data-alignment="center" id="right-center" 
         data-dropdown>
      <strong>  GeeksforGeeks  </strong>
    </div><br><br>

    <button class="button" type="button" 
            data-toggle="left-bottom">
      Left Bottom
    </button>
    <div class="dropdown-pane" data-position="left" 
         data-alignment="bottom" id="left-bottom" 
         data-dropdown>
      <strong>   GeeksforGeeks    </strong>
    </div>

    <button class="button" type="button" 
            data-toggle="right-bottom">
       Right Bottom
    </button>
    <div class="dropdown-pane" data-position="right" 
         data-alignment="bottom" id="right-bottom" 
         data-dropdown>
      <strong>   GeeksforGeeks  </strong>
    </div>
  </center> 
  <script>
    $(document).ready(function() {
       $(document).foundation();
    })
  </script>
</body>
</html>