Foundation - Dropdown Pane Positioning

Description

It specifies the position of the dropdown pane such as top, right, left or bottom by using the .top, .right, .left and .bottom classes.

Example

The following example demonstrates the use of positioning dropdown pane in Foundation −

Live Demo

<!doctype html>
   <head>
      <meta charset = "utf-8" />
      <meta http-equiv = "x-ua-compatible" content = "ie=edge" />
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0" />

      <title>Dropdown Pane</title>

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" 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/foundation-sites@6.5.1/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>
   </head>

   <body>
      <h2>Dropdown Pane Positioning Example</h2>

      <button class = "button" type = "button" data-toggle = "dropdown_toggle">Right</button>
      <div class = "dropdown-pane right" id = "dropdown_toggle" data-dropdown>
         Foundation is a responsive front-end framework.
      </div>

      <button class = "button" type = "button" data-toggle = "dropdown_toggle1">Bottom</button>
      <div class = "dropdown-pane bottom" id = "dropdown_toggle1" data-dropdown>
         Foundation is a responsive front-end framework.
      </div><br><br><br>

      <button class = "button" type = "button" data-toggle = "dropdown_toggle2">Top</button>
      <div class = "dropdown-pane top" id = "dropdown_toggle2" data-dropdown>
         Foundation is a responsive front-end framework.
      </div>

      <button class = "button" style = "float:right" type = "button" data-toggle = "dropdown_toggle3">Left</button>
      <div class = "dropdown-pane left" id = "dropdown_toggle3" data-dropdown>
         Foundation is a responsive front-end framework.
      </div>

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

Output

Let us carry out the following steps to see how the above given code works −

Save the above given html code downdown_pane_positioning.html file.
Open this HTML file in a browser, an output is displayed as shown below.

foundation_containers.htm