Foundation CSS Dropdown Explicit Positioning

Last Updated : 02 Mar, 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.

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 Explicit Positioning is used to set both position and alignment of the box. The positions we can use are left, right, top, and bottom. The alignment we can use are top, bottom, left, right, and center.

Dropdown Explicit Positioning positions:

left: It is used to place the dropdown container at the left.
right: It is used to place the dropdown container at the right.
top: It is used to place the dropdown container at the top.
bottom: It is used to place the dropdown container at the bottom.

Dropdown Explicit Positioning alignment:

left: It is used to align the dropdown container left with respect to the button.
right: It is used to align the dropdown container right with respect to the button.
top: It is used to align the dropdown container top with respect to the button.
bottom: It is used to align the dropdown container bottom with respect to the button.
center: It is used to align the dropdown container center with respect to the button.

Syntax:

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

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

HTML

<!DOCTYPE html>
<html>

<head>
  <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
            crossorigin="anonymous">

    <!-- 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" 
       crossorigin="anonymous">
    </script>
</head>

<body>    
    <center>
        <h2 style="color: green;">
          GeeksforGeeks
        </h2>

        <h3>
          Foundation CSS Dropdown Explicit Positioning
        </h3><br>
    
        <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:

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

HTML

<!DOCTYPE html>
<html>

<head>
  <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
            crossorigin="anonymous">

    <!-- 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" 
       crossorigin="anonymous">
    </script>
</head>

<body>    
  <center>
    <h2 style="color: green;">
      GeeksforGeeks
    </h2>

    <h3>
        Foundation CSS Dropdown Explicit Positioning
    </h3><br>

    <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>