Posición fuera del lienzo de CSS básico

Posted on by Rudeus Greyrat

Foundation CSS es un marco front-end gratuito y de código abierto que le permite crear diseños web dinámicos. Es uno de los marcos CSS más avanzados, que incluye una cuadrícula receptiva, componentes de interfaz de usuario HTML y CSS, plantillas y más. También tiene una variedad de funciones de extensión de JavaScript que se pueden habilitar o deshabilitar. También se procesa rápidamente en dispositivos móviles gracias a la integración de la utilidad Fastclick.js.

Cuando están activos, los paneles fuera del lienzo se colocan fuera de la ventana gráfica y la diapositiva. Se puede acceder a este menú fuera del lienzo desde la izquierda, la derecha, la parte superior o la parte inferior de la pantalla, y tiene la capacidad de superponerse, empujarse y operar con elementos pegajosos. Estos patrones son compatibles con dispositivos móviles y se diseñaron teniendo en cuenta los dispositivos móviles. En pantallas medianas y de escritorio, esto también se puede utilizar como barra lateral.

La posición fuera del lienzo de Foundation CSS se usa para establecer la posición de la ventana gráfica fuera del lienzo. El valor predeterminado es position: fixed , que establece agregando la clase off-canvas , pero off-canvas también viene con position: absolute , que podemos configurar usando la clase de posición fuera del lienzo de Foundation CSS . Al usar off-canvas-absolute , debemos encerrar los contenidos fuera del lienzo y de la página dentro del div HTML con la clase off-canvas-wrapper .

Clase de posición fuera del lienzo de Foundation CSS:

  • off-canvas-absolute: esta clase se usa para establecer la posición del off-canvas en absoluto . Podemos usar esta clase para establecer la posición de la ventana gráfica solo para el contenedor en el que está contenido, normalmente se muestra desde el lado izquierdo, derecho, inferior o superior de la pantalla.

No tenemos una clase fija fuera del lienzo porque la ventana gráfica tiene una posición fija que ya agregamos cuando agregamos la clase fuera del lienzo . 

Sintaxis:

<div class="off-canvas-wrapper">
    <div class="off-canvas-absolute">
        <!-- Your menu or Off-canvas content goes here -->
    </div>
       <div class="off-canvas-content">
        <!-- Your Page Contents goes here --!>
    </div>
</div>

Ejemplo 1: este código a continuación muestra una ventana gráfica fuera del lienzo que tiene una posición establecida en absolute . 

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
    <link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.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/foundation-sites@6.5.1/dist/js/foundation.min.js">
    </script>
  
    <style>
        h2,
        h3 {
            margin-left: 20px;
        }
    </style>
</head>
  
<body>
    <h2 style="color:green;">
        GeeksforGeeks
    </h2>
      
    <h3>Foundation CSS off-canvas position</h3>
  
    <div style="margin:1rem 5rem;">
        <button type="button" class="button" 
            data-toggle="offCanvasLeftSplit1">
            Open off-canvas with absolute position
        </button>
  
        <button type="button" class="button" 
            data-toggle="offCanvasRightSplit2" 
            style="margin-left:26rem;">
            Open off-canvas with fixed position
        </button>
  
        <div class="grid-x grid-margin-x">
            <div class="cell small-6">
                <div class="off-canvas-wrapper">
                    <div class="off-canvas-absolute position-left" 
                        id="offCanvasLeftSplit1" data-off-canvas>
                        <ul style="margin:2rem;">
                            <li><a>DSA</a></li>
                            <li><a>Algorithms</a></li>
                            <li><a>Competetive Programming</a></li>
                            <li><a>Java</a></li>
                            <li><a>C++</a></li>
                            <li><a>Python</a></li>
                        </ul>
                    </div>
  
                    <div class="off-canvas-content" 
                        style="min-height:300px;" 
                        data-off-canvas-content>
                        <p>My off-canvas viewport is of my size!</p>
                    </div>
                </div>
            </div>
            <div class="cell small-6">
                <div class="off-canvas-wrapper">
                    <div class="off-canvas position-right" 
                        id="offCanvasRightSplit2" data-off-canvas>
                        <ul style="margin: 2rem;">
                            <li><a>DSA</a></li>
                            <li><a>Algorithms</a></li>
                            <li><a>Competetive Programming</a></li>
                            <li><a>Java</a></li>
                            <li><a>C++</a></li>
                            <li><a>Python</a></li>
                        </ul>
                    </div>
  
                    <div class="off-canvas-content" 
                        style="min-height:300px;" 
                        data-off-canvas-content>
                        <p>
                            My off-canvas viewport is 
                            of full screen-size!
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
</body>
  
</html>

Producción:

 

Ejemplo 2: este código a continuación muestra una ventana gráfica fuera del lienzo de varios paneles que tiene una posición establecida en absolute . 

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
    <link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.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/foundation-sites@6.5.1/dist/js/foundation.min.js">
    </script>
    <style>
       h2,h3
       {
        margin-left:20px;
       }
    </style>
</head>
  
<body>
    <h2 style="color:green">GeeksforGeeks</h2>
    <h3>Foundation CSS off-canvas position</h3>
    <div style="margin:1rem 5rem;">
        <button type="button" class="button" 
              data-toggle="offCanvasLeftSplit1">
              Open Left Panel
        </button>
        <button type="button" class="button" 
                data-toggle="offCanvasRightSplit2" 
                style="margin-left:35rem;">
                Open right panel
        </button>
  
        <div class="grid-x grid-margin-x">
            <div class="cell small-6">
                <div class="off-canvas-wrapper">
                    <div class="off-canvas-absolute position-left" 
                         id="offCanvasLeftSplit1" data-off-canvas>
                        <ul style="margin:2rem;">
                            <li><a>DSA</a></li>
                            <li><a>Algorithms</a></li>
                            <li><a>Competetive Programming</a></li>
                            <li><a>Java</a></li>
                            <li><a>C++</a></li>
                            <li><a>Python</a></li>
                        </ul>
                    </div>
                    <div class="off-canvas-content" style="min-height:300px;" 
                         data-off-canvas-content>
                          
<p>I'm the page content of the first off-canvas panel!</p>
  
                    </div>
                </div>
            </div>
            <div class="cell small-6">
                <div class="off-canvas-wrapper">
                    <div class="off-canvas-absolute position-right" 
                         id="offCanvasRightSplit2" 
                         data-off-canvas>
                        <ul style="margin: 2rem;">
                            <li><a>DSA</a></li>
                            <li><a>Algorithms</a></li>
                            <li><a>Competetive Programming</a></li>
                            <li><a>Java</a></li>
                            <li><a>C++</a></li>
                            <li><a>Python</a></li>
                        </ul>
                    </div>
                    <div class="off-canvas-content" style="min-height:300px;" 
                         data-off-canvas-content>
                          
<p>I'm the page content of the second off-canvas panel!</p>
  
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $(document).foundation();
        })
    </script>
</body>
</html>

Producción:

 

Referencia: https://get.foundation/sites/docs/off-canvas.html#off-canvas-position

Publicación traducida automáticamente

Artículo escrito por priyanshuchatterjee01 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 *