Foundation CSS es un marco front-end gratuito y de código abierto para generar diseños web flexibles. Con una cuadrícula receptiva, componentes de interfaz de usuario HTML y CSS, plantillas y más, es uno de los marcos CSS más poderosos. También contiene una serie de capacidades de extensión de JavaScript que se pueden activar o desactivar. Gracias a la integración de la utilidad Fastclick.js, también se renderiza fácilmente en dispositivos móviles.
Los paneles fuera del lienzo se colocan fuera de la ventana gráfica y se deslizan cuando están activos. Se puede acceder a este menú fuera del lienzo desde la parte izquierda, derecha, superior o inferior de la pantalla, y se puede superponer, empujar y operar con elementos pegajosos. Estos son patrones de respuesta móvil que se crearon teniendo en cuenta los dispositivos móviles. Esto también se puede usar como una barra lateral en pantallas medianas y de escritorio.
Nested Off-canvas nos permite eliminar la adición del elemento como hermano del contenido principal de la página al darnos la libertad de agregar el elemento en el contenido mismo. Entonces, esta característica reduce la complejidad del código hasta cierto punto y facilita el mantenimiento. Aunque la principal utilidad de esta característica es que nos ayuda a usar ese elemento para pantallas pequeñas mientras que podemos usar el elemento de página habitual para otros tamaños de pantalla lo que deduce contenido duplicado.
Clases anidadas fuera del lienzo de Foundation CSS:
No hay una clase específica que se use para lograr el anidado fuera del lienzo , solo necesitamos agregar la identificación con valores que son offCanvasNestedPush o offCanvasNestedOverlap . Aunque la transición Push no es compatible con el lienzo anidado fuera del lienzo , por lo que requiere una transición superpuesta.
- off-canvas: esta clase crea un contenedor fuera del lienzo.
- position-left: la ventana gráfica se abre desde el lado izquierdo con esta clase.
- position-right: la ventana gráfica se abre desde el lado derecho con esta clase.
- position-top: la ventana gráfica se abre desde el lado superior con esta clase.
- position-bottom: la ventana gráfica se abre desde la parte inferior con esta clase.
Atributos de base CSS anidados fuera del lienzo:
- offCanvasNestedPush: este atributo permite empujar o deslizar el anidado fuera del lienzo, sin colapsar el contenido.
- offCanvasNestedOverlap: este atributo se usa para superponer el fuera del lienzo anidado con la parte superior de la barra de navegación, es decir, se superpone con la ventana gráfica.
Sintaxis:
<button type="button"
class="button"
data-toggle="offCanvasNestedPush">
Open Nested Off-Canvas Push
</button>
<button type="button"
class="button"
data-toggle="offCanvasNestedOverlap">
....
</button>
<div class="off-canvas positionClass"
id="offCanvasNestedPush" data-off-canvas>
<div class="callout">
<p>....</p>
<p>....</p>
</div>
</div>
<div class="off-canvas positionClass"
data-transition="overlap/push"
id="offCanvasNestedOverlap" data-off-canvas>
<div class="callout">...</div>
</div>
Ejemplo 1: El siguiente ejemplo muestra una ventana gráfica superpuesta anidada fuera del lienzo .
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> </head> <body> <div style="margin:4rem;"> <h1 style="color:green;"> GeeksforGeeks </h1> <strong> Foundation CSS Nested Off-canvas </strong> </div> <div style="margin:1rem 5rem;"> <button type="button" class="button" data-toggle="offCanvasNestedOverlap"> Open Nested Off-Canvas Overlap </button> <p>Hello, this is an example line.</p> <div class="off-canvas position-left is-closed" id="offCanvasNestedOverlap" data-off-canvas> <div class="callout"> <p>Hii Geek!!!</p> <p> I'm a nested off-canvas that mustn't be a sibling of the off-canvas content anymore. </p> <p> I can be used a nice hidden menu in small screen sizes. </p> </div> </div> <p> Hello, this is an example paragraph. Hello, this is an example paragraph. </p> <p> Hello, this is an example paragraph. </p> <p> Hello, this is an example paragraph. Hello, this is an example paragraph. </p> <p> Hello, this is an example paragraph. </p> <p> Hello, this is an example paragraph. Hello, this is an example paragraph. </p> <p> Hello, this is an example paragraph. </p> <p> Hello, this is an example paragraph. Hello, this is an example paragraph. </p> <p> Hello, this is an example paragraph. </p> </div> <script> $(document).foundation(); </script> </body> </html>
Producción:
Ejemplo 2: el siguiente ejemplo demuestra que incluso una transición de inserción genera una transición de superposición de la ventana gráfica fuera del lienzo .
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> </head> <body> <div style="margin:4rem;"> <h1 style="color:green;"> GeeksforGeeks </h1> <strong> Foundation CSS Nested Off-canvas </strong> </div> <div style="margin:1rem 5rem;"> <button type="button" class="button" data-toggle="offCanvasNestedPush"> Open Nested Off-Canvas Push </button> <p>Hello, this is an example line.</p> <div class="off-canvas position-left is-closed" id="offCanvasNestedPush" data-off-canvas> <div class="callout"> <p>Hii Geek!!!</p> <br> <p> Push transition is not supported in the nested off-canvas, so here we can see that it takes the Overlay transition. </p> <br> <p> I'm a nested off-canvas that mustn't be a sibling of the off-canvas content anymore. </p> <p> I can be used a nice hidden menu in small screen sizes. </p> </div> </div> <p> Hello, this is an example paragraph. Hello, this is an example paragraph. </p> <p> Hello, this is an example paragraph. </p> <p> Hello, this is an example paragraph. Hello, this is an example paragraph. </p> <p> Hello, this is an example paragraph. </p> <p> Hello, this is an example paragraph. Hello, this is an example paragraph. </p> <p> Hello, this is an example paragraph. </p> <p> Hello, this is an example paragraph. Hello, this is an example paragraph. </p> <p> Hello, this is an example paragraph. </p> </div> <script> $(document).foundation(); </script> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/off-canvas.html#nested-off-canvas
Publicación traducida automáticamente
Artículo escrito por triashabiswas y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA