Posicionamiento explícito desplegable de Foundation CSS

Posted on by Rudeus Greyrat

Foundation CSS es un marco front-end receptivo y de código abierto creado por ZURB en septiembre de 2011 que simplifica la creación de sorprendentes sitios web, aplicaciones y correos electrónicos receptivos que funcionan en cualquier dispositivo. Muchas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. Este marco se basa en bootstrap, que es similar a SaaS. Es más complejo, versátil y configurable. También viene con una interfaz de línea de comandos, lo que facilita su uso con paquetes de módulos. El marco de correo electrónico le proporciona correos electrónicos HTML receptivos, que se pueden leer en cualquier dispositivo. Foundation for Apps le permite crear aplicaciones web totalmente receptivas.

El menú desplegable se utiliza para mostrar el contenido cuando hacemos clic en el elemento. Podemos poner cualquier tipo de contenido en el menú desplegable y acceder a él haciendo clic en el elemento. El posicionamiento explícito desplegable se utiliza para establecer tanto la posición como la alineación del cuadro. Las posiciones que podemos usar son izquierda, derecha, arriba y abajo. Las alineaciones que podemos usar son arriba, abajo, izquierda, derecha y centro.

Posiciones desplegables de posicionamiento explícito:

  • left : Se utiliza para colocar el contenedor desplegable a la izquierda.
  • right : Se utiliza para colocar el contenedor desplegable a la derecha.
  • top : Se utiliza para colocar el contenedor desplegable en la parte superior.
  • bottom : Se utiliza para colocar el contenedor desplegable en la parte inferior.

Alineación desplegable de posicionamiento explícito:

  • left : Se utiliza para alinear el contenedor desplegable a la izquierda con respecto al botón.
  • right : Se utiliza para alinear el contenedor desplegable a la derecha con respecto al botón.
  • top : Se utiliza para alinear la parte superior del contenedor desplegable con respecto al botón.
  • bottom : Se utiliza para alinear el fondo del contenedor desplegable con respecto al botón.
  • center : Se utiliza para alinear el centro del contenedor desplegable con respecto al botón.

Sintaxis:

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

Ejemplo 1: el siguiente código demuestra las posiciones explícitas desplegables superior e inferior .

HTML

<!DOCTYPE html>
<html>
  
<head>
  <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/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/foundation-sites@6.5.1/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>

Producción:

Ejemplo 2: el siguiente código demuestra las posiciones explícitas desplegables izquierda y derecha .

HTML

<!DOCTYPE html>
<html>
  
<head>
  <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/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/foundation-sites@6.5.1/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>

Producción:

Referencia: https://get.foundation/sites/docs/dropdown.html#explicit-positioning

Publicación traducida automáticamente

Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *