Advertisement
  1. Web Design
  2. Responsive Web Design

Revisión de la Navegación Responsiva: Patrones Off Canvas

by
Read Time:37 minsLanguages:
This post is part of a series called Examining Responsive Navigation Patterns.
Examining Responsive Navigation: Toggle Patterns

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

En este tutorial vamos a revisar cuatro variantes de patrones en los que tanto la navegación como el contenido de la página se colocan off canvas (fuera de la parte visible de la ventana) con el objetivo de ahorra espacio hasta que sean solicitados. Es hora de dejar de copiar y pegar, ¡empecemos a comprender!

Para recapitular, el primer artículo de esta serie se centró en patrones en los que la navegación seguía estando ubicada en la cabecera. El segundo se repasan los patrones en los que la navegación ha sido trasladada al pie de página. En el tercero se debate sobre los patrones en donde el menú puede ser activado y desactivado.

El objetivo de todos estos patrones consiste en reducir al máximo el espacio vertical ocupado por la navegación en las pantallas de menor tamaño. Hoy, moveremos partes de la página off canvas, fuera de la ventana, hasta que sean solicitadas.

Como ocurre el anteriores artículos, probablemente estos patrones te resulten familiares gracias a Brad Frost, quien recopiló algunos patrones utilizados en los sitios responsivos o "responsive". Luke Wroblewski también ha popularizado el concepto de los patrones off canvas.

Los Patrones

Con los patrones de la cabecera y del pie de página, hemos reorganizado en gran medida la navegación para diversos tamaños de pantalla. Con los patrones de conmutación escondimos la navegación cuando el espacio era reducido y utilizamos un botón que permitía mostrar la navegación cuando fuese necesario. Los patrones off canvas funcionan de manera similar a los patrones de conmutación en el sentido de que también se encuentran fuera de la vista cuando deseamos conservar espacio y pueden ser solicitados mediante un botón. Aunque en lugar de estar totalmente ocultos, simplemente están fuera de la pantalla o incluso parcialmente visibles.

Hay una gran variedad de combinaciones relativas a dónde y cómo se pueden mover diferentes partes de la página fuera de la pantalla. Quiero enfocar este tutorial en cuatro variaciones del patrón.

  • Sidebar Navigation — El menú se encuentra en una columna lateral fuera del lienzo (off canvas). Tras pulsar un botón el menú aparece deslizándose y desplaza hacia la derecha sacando la mayor parte del contenido fuera de la pantalla. Vamos a usar el hack de la casilla de verificación para el evento del clic.
  • Sidebar Navigation JS — Es el mismo patrón anterior, a excepción de que para la acción del clic usaremos Javascript en lugar del truco de la casilla de verificación .
  • Panels — Este patrón coloca distintos contenidos dentro de paneles. Navegación en la parte superior de la página desliza el contenido principal para el panel solicitado. Vamos a usar botones de radio para el evento click.
  • Sidebar+ — Este patrón funciona de forma similar al anterior, excepto que permite más independencia en la apertura y el cierre de contenido. También usaremos Javascript para los eventos de clic.

Tal y como hemos estado haciendo a lo largo de esta serie, los conceptos relativos a cada patrón se basan en aquellos que los preceden. En este tutorial vamos a considerar un par distinto de métodos de estructuración de código html con el que mover las secciones hacia fuera y hacia dentro de la pantalla o ventana de visualización. El css de cada uno será similar, aunque naturalmente variará según las diferentes estructuras. También vamos a usar tanto css (botones casillas de verificación y botones de radio) como Javascript para los eventos de clic. La idea es que al final de este tutorial hayas adquirido una buena comprensión de las técnicas básicas y seas capaz de modificarlas para satisfacer las necesidades de tu proyecto.

El código completo de todos estos patrones está disponible en el enlace de descarga de arriba y también se puede ver visitando la demo e inspeccionando el código fuente.

The menu button visible and the menu hidden on small screensThe menu button visible and the menu hidden on small screensThe menu button visible and the menu hidden on small screens

El Patrón de Navegación Lateral

Este es el patrón off canvas más simple y probablemente el más común. Por defecto, la página se abrire como una sola columna de contenido. La única navegación visible será un único botón de menú. Al pulsar el botón el menú se deslizará desde la izquierda hasta llenar la mayor parte de la pantalla. Gran parte de la única columna de contenido existente se deslizará fuera de la pantalla hacia la derecha, aunque parte ella permanezca aun visible.

Enfoque: En las pantallas pequeñas ocultaremos el menú y lo reemplazaremos con un botón de menú. El botón está vinculado a una casilla de verificación con dos estados activa e inactiva. Cuando se haga un clic todo se deslizará hacia la derecha mostrando el menú completo. Al pulsar de nuevo en el botón del menú o el botón cerrar, que añadiremos en la parte superior de la sección del menú todo volverá a desaparecer por la izquierda. Conforme el navegador vaya aumentado su tamaño convertiremos el menú en una barra de navegación horizontal, y al mismo tiempo convertiremos nuestro diseño de una sola columna a un diseño a 2 columnas.

Paso 1: El HTML

Con estos patrones es importante ver la estructura de todas las piezas principales así que he incluido más elemento aparte del menú, aunque he omitido gran parte de los que contienen estas piezas principales a fin de mantener hacer las cosas más legibles.

Lo que es importante observar es que la mayoría del contenido está envuelto en 2 divs adicionales, un div contenedor y un div interno. Advierte que el botón "menu" está dentro del header situado dentro de estos divs adicionales. Esto significa que al hacer clic, el botón se deslizará hacia la derecha junto con nuestro contenido.

La navegación, sin embargo, está fuera de estos 2 divs adicionales e incluye la casilla de verificación que activaremos y desactivaremos. Dentro del elemento de navegación vamos a crear una etiqueta conectada a la casilla de verificación que cerrará el menú, aunque también pueda seguir utilizándose el botón del menú para hacerlo.

Esta estructura crea 2 partes independientes. Una para el menú y otra para todo lo demás.

Paso 2: El CSS Predeterminado

Si lees el tutorial anterior sobre los patrones que conmutan, reconocerás el botón y su css. El estilo del botón utiliza los mismos colores, radio para las esquinas y degradado que el tutorial anterior.

La diferencia es que ahora hemos desplazado el botón a la izquierda ya que el menú esta oculto también hacia la izquierda. Además en lugar de usar un posicionamiento, aquí el botón tiene asignada la propiedad float hacia la izquierda. Esto significa que cuando todo se desplace hacia la derecha, el botón también se deslizará a la derecha.

Necesitamos la casilla de verificación para que funcione, pero no necesitamos tenerlo siempre a la vista de modo que lo colocaremos fuera de la pantalla a una buena distancia.

Por ahora queremos que la navegación esté fuera de pantalla. Solucionaremos su posición ya que no queremos que se desplace cuando es visible y también hemos establecido la altura al 100% de forma que siempre ocupe todo el alto de la pantalla. Si tuvieses más enlaces, podrías optar por no hacerlo, pero puesto que sólo tenemos algunos enlaces esto debería funcionar bien.

Cuando más tarde el menú sea visible no querremos ocupar la pantalla horizontalmente. Si ajustamos el ancho a un 75% podremos mostrar parte del contenido cuando el menú sea visible. Para sacar el menú de la pantalla hemos mantenido el valor en -75% de forma que coincida con la anchura. También hemos creado una transición para deslizar suavemente el menú en lugar de que aparezcan todos a la vez.

Los restantes estilos añaden un fondo y un espacio que empuja los enlaces por debajo de la etiqueta de cierre.

Queremos que la etiqueta de cierre funcione como un botón, de modo que establecemos la propiedad cursor. Lo qué es quizá más interesante aquí, es cómo aplicamos estilo a la X que se encuentra en un span dentro de la etiqueta de cierre. Para crear un círculo alrededor de la X, añadimos un borde y un border-radius con un valor de 50%. Para hacerlo más circular he ajustado el padding top/bottom y left/right a ojo. Advierte que un tipo de letra diferente requeriría el cambio de estos valores de padding.

El css para la lista de enlaces es puramente estético. Al margen superior de la lista se le asigna una pequeña protuberancia, y por el contrario, a los márgenes y paddings serán reducidos a cero. Los enlaces tienen un borde inferior y por lo tanto completan el efecto, la lista en sí misma tiene un borde superior.

A los enlaces se les aplica también un fondo degradado para darles una ligera sensación de profundidad y una altura exagerada de 4em para crear un área amplia en la que dar un toque.

A primera vista el css del wrapper y div interior parecen no hacer mucho. A ambos se les establece un ancho del 100% y al div del wrapper tiene asignada la propiedad overflow con el valor de hidden. Esto será importante cuando deslicemos el contenido hacia la derecha en la siguiente sección. Al div interior se le asigna un float hacia la derecha y una transición para que combine bien con el elemento nav de arriba.

The menu with close button visible and the everything else pushed mostly off the screenThe menu with close button visible and the everything else pushed mostly off the screenThe menu with close button visible and the everything else pushed mostly off the screen

Paso 3: El CSS para Mostrar el Menú

Estamos utilizando el truco de la casilla de verificación para el evento del clic, así que para llegar al los elementos una vez que el botón ha sido pulsado podemos :checked en combinación con un selector de hermanos. Realmente es muy fácil deslizar todo hacia la derecha.

Para el elemento nav simplemente indicamos un valor igual a 0. Con este cambio todo el menú se deslizará quedando a visible y ocupando el 75% de la pantalla (ya que establecimos anteriormente que su anchura fuese de un 75%). Ahora que el enlace para cerrar es visible, lo llevamos a la parte superior izquierda (puedes fijar y situar también el botón de cierre mediante el css predeterminado. yo he decidido hacerlo aquí, pero no hay ningún motivo específico detrás de esta elección).

Para deslizar el contenido a la derecha, le aplicamos un margen derecho de -75%. Aquí es donde se muestra la importancia de haber establecido el overflow hidden al div contenedor. Si no se hubiese hecho así, el ancho total de la página aumentaría. El contenido quedaría oculto por la derecha, aunque seríamos capaces de realizar un desplazamiento hacia la izquierda y hacia la derecha para revelarlo u ocultarlo. Eso no es lo que queremos. Con overflow: hidden aplicado a su contenedor padre cualquier cosa que hubiese quedado fuera de la pantalla ahora permanece oculta.

The menu visible as a horizontal navigation bar on larger screensThe menu visible as a horizontal navigation bar on larger screensThe menu visible as a horizontal navigation bar on larger screens

Paso 4: El CSS En las Media Queries

Una vez que la pantalla sea más ancha que 48em tendremos espacio suficiente para situar el menú horizontal en la parte superior de la pantalla. Queda un poco justo, pero aun así hemos podido convertir el menú en una barra de navegación horizontal.

Vamos a ocultar el botón del menú, puesto que ya no es necesario y mover el logotipo hacia la izquierda. Como a todo en el header se le asignará un float o será posicionado, necesitamos asegurarnos de que el header mismo no se contraerá. Para conseguirlo aquí nos servirá un pequeño padding inferior.

En caso de que la anchura del navegador fue aumentada mientras que el menú fue abierto y el contenido de a la derecha, a restablecer el margen de 0. También a desactivar la transición como queramos ya no se si el navegador se cambia el tamaño otra vez.

Para mover la navegación ahora la flotamos hacia la derecha. También tenemos para la posición por defecto estático y dado que ya no necesitamos el fondo la instalaremos a transparente. Mientras estamos en ella a restablecer altura, relleno, anchura y se te apague la transición.

Observe que esto se hace a la nav y la nav en el estado comprobado. Nunca se sabe cuando alguien comience con su navegador pequeño y después de hacer clic en el botón de menú, cambiar el tamaño del navegador más amplia. Así podríamos explicar esa posibilidad.

Nunca tendremos que ver el estrecho vínculo una vez que nuestra navegación es siempre visible para a configurar su pantalla a ninguno. Advierte una vez más que estamos haciendo esto para los estados activo e inactivo.

Finalmente convertimos la lista de vertical a horizontal. Utilizaremos un posicionamiento absoluto en la lista, asignaremos float a los elementos de lista y haremos que vuelvan a mostrarse en línea. Añadimos un poco de espacio entre los enlaces con la propiedad padding y restablecemos algunas cosas como el borde y el fondo, y ya lo tenemos todo.

Paso 5: Una Solución para iOS y Android

Revisé esto la última vez con los botones de conmutación, pero no vendrá mal repetirlo por si te perdiste ese artículo. El truco de la casilla de verificación tiene algunos problemas en la versiones inferiores a la 6 de iOS y en la versión 4.1.2 de Android. Las soluciones para ambos son simples pero no demasiado obvias.

La solución de iOS consiste en un evento onlclick en la etiqueta conectada a la casilla de verificación. Si te desplazas hacia arriba podrás ver ese onclick vacío en el código html al comienzo de este patrón. La solución para Android es una falsa animación en el elemento body tal y como se ve abajo.

Y con esto hemos terminado con el off canvas sidebar menú.

Reflexiones

Este patrón funciona bien por varias razones. Conserva espacio ocultando el menú hasta que este es solicitado. Una simple transición y un desplazamiento a la derecha pone de manifiesto lo que está sucediendo. En los dispositivos móviles el menú se abre siempre mediante un sencillo toque.

Las claves del patrón se fundamentan en la configuración de un evento de click (o de toque) y en el cual se hace uso del truco de la casilla de verificación. Basándonos en el estado de la casilla de verificación, podemos ajustar los valores left, right, margen izquierdo (margin-left), margen derecho (margin-right) de modo que las partes que conforman la página estén ubicadas donde tú quieras. Aquí el menú ocupó un 75% de la página cuando estaba visible, pero fácilmente podría haber sido un 100%, un 50% o cualquier otro valor.

Otra aspecto importante es asignar un desbordamiento oculto con overflow: hidden en el div contenedor para garantizar que el div interior desaparezca completamente y no pueda ser desplazado fuera de la pantalla. Lo único que queremos es el botón que hará mover el contenido de la página.

Ejemplos

A continuación se muestran algunos ejemplos de este patrón que hace uso del clic de eventos con css. Los ejemplos varían un poco el patrón y 2 de ellos usan el truco :target para el evento click en lugar del de la casilla de verificación.

El Patrón Sidebar Nav Js

Este patrón es más o menos igual a la anterior. Realmente sólo hay una diferencia importante, consiste en que el evento clic aquí será controlado por Javascript, el cual es todavía el método más usado en los patrones off canvas. Modificaremos el patrón anterior de forma que use jQuery en vez del truco de la casilla de verificación.

Enfoque: En las pantallas pequeñas ocultaremos el menú y lo reemplazaremos con un botón de menú. Nuestra función jQuery interceptará el clic y agregará o quitará una clase para que nuestro css pueda ser consciente de su estado. Los estilos establecidos en estas clases mostrarán el diseño de la página con el menú abierto o cerrado. Una vez más conforme la ventana del navegador aumente su tamaño convertiremos el menú en una barra de navegación horizontal y convertiremos nuestro diseño con una sola columna a un diseño de 2 columnas.

Paso 1: El HTML

El código html de la versión jQuery del patrón es casi exacto a lo que vimos arriba. Se ha eliminado la entrada de la casilla de verificación y las dos etiquetas se han convertido en enlaces. De lo contrario todo a continuación es lo mismo como ya vimos en la casilla de verificación versión de este patrón.

Paso 2: El Valor Predeterminado CSS

Aquí la diferencia es incluso menor. El css por defecto es exactamente el mismo en ambas versiones del patrón.

The menu visible with everything else mostly off screen rightThe menu visible with everything else mostly off screen rightThe menu visible with everything else mostly off screen right

Paso 3: El CSS para el Menú que se Abre

Aquí las cosas también son similares, pero tenemos que hacer algunos cambios. Las propiedades css y los valores son los mismos que antes, pero deben añadirse a diferentes selectores. Vamos a ver cómo estas clases son añadidas y eliminadas momentáneamente, pero ya puedes ver algunas cosas observando los selectores.

Vamos a estar añadiendo o eliminando una clase .open en el elemento nav. En la versión anterior teníamos que seleccionar el elemento nav usando un hermano del pseudo selector :checked. Continuaremos haciendo uso de los selectores de hermanos para seleccionar el div. Inner ya que el elemento nav y la clase .wrapper son hermanos.

Las propiedades y sus valores son los mismos que vimos más arriba.

Paso 4: El CSS en las Media Queries

El css es el mismo, de nuevo, como sucedió con la versión del patrón de la casilla de verificación. La única diferencia es que :checked ~ nav se sustituye con nav.open y :checked ~ .wrapper .inner es sustituido por .open ~ .wrapper .Inner. al igual que en la sección anterior.

Confío en que no necesitas volver a ver el código ya que es casi idéntico. No obstante te recordaré, que sigue siendo buena idea para seleccionar las versiones abiertas y cerradas del elemento nav en el caso de que una persona primero abra el menú y luego cambie el tamaño de su navegador, por lo que vamos a aplicar estilo tanto a nav como a nav.open e incluiremos ambos para aplicar estilo a sus selectores descendientes.

Paso 5: El JavaScript (jQuery)

Siento haberte hecho esperar. Esta es realmente la chica de la versión de este patrón. Empezamos interceptando los clics en cualquier vínculo añadiendo una clase .btn. Aquí tienes nuestro solitario botón de menú.

Queremos añadir y eliminar la clase en el elemento nav. Si te acuerdas de nuestro botón (a.btn) está dentro de nuestro jefe, que está dentro de la div. inner, que es dentro de la div de .wrapper, que es un hermano para el elemento nav. Para se propagan desde el botón a la div de .wrapper vamos a usar la función de parents() de jQuery, que se encuentra al antepasado más cercano los partidos en lugar de sólo el más inmediato. Desde allí podemos tomar el elemento de navegación del hermano.

Probamos para ver si el elemento nav ya tiene la clase que se aplica y si es así, te quitamos la clase. De lo contrario vamos a añadir. Mientras que la mayoría de la gente probablemente no alcance para que el botón Menu para cerrar el menú dado el diseño, podríamos también dejamos en caso de que lo hacen.

El botón Cerrar está dentro del elemento nav por lo que es una vía más directa de él a NAV. Aquí sólo necesitamos parent() singular función y necesidad no busques más. También desde el botón cerrar sólo aparece cuando está presente en nav .abrir no necesitamos agregarlo. De hecho probablemente no necesito probar para ver si está presente, ya que tiene que ser.

Pensamientos

Si usted entiende la casilla de verificación versión de este patrón, esta versión alternativa utilizando jQuery debe ser bastante fácil de entender así. Quitar la casilla de verificación y convertir las etiquetas en enlaces. En el css en cualquier lugar que previamente había: comprobar ~ nav utilizamos nav.open y en cualquier lugar que previamente había: revisado ~ .wrapper. Inner ahora utilizamos .abrir ~ .wrapper. Inner

El nuevo código es realmente la función de jQuery para agregar y quitar la clase (el equivalente de control y desactivar la casilla de verificación). Si sabes debe ser simple de entender la función de jQuery. Que no es demasiado difícil incluso si no está familiarizado con jQuery. Había interceptado el clic y utiliza algunas funciones de jQuery para atravesar el DOM para obtener de la haga clic en el elemento nav que hemos querido modificar.

Cual de las dos versiones que utilizas depende de usted. Ninguno es perfecto. La casilla de verificación necesita un par de correcciones para iOS y Android y no funcionará en versiones anteriores de IE. JavaScript es muy probable que está instalado y activo para cualquier persona que visita su sitio, aunque probablemente no es lo mismo como siempre. Las probabilidades están con cualquiera de estas opciones que vas a perder algunos visitantes, muchos sin embargo dudosos.

Ejemplos

A continuación te muestro demos adicionales que hacen uso de este patrón y que utilizan Javascript para el evento click. Si echas un vistazo a todos ellos, verás que aquí la demo se basa en la la de David Bushel y he incluido además el tutorial de Dave. La demo del menú se verá cada diferente a cualquiera de los otros, pero su núcleo es esencialmente el mismo patrón. Un evento se desencadena y a través de ese evento se revela un menú y cambia el contenido principal.

El Patrón de Paneles

Este patrón es diferente de los dos anteriores, aunque todavía se basa en las mismas ideas básicas. Aquí estructuramos las 3 secciones de la demo (menú, contenido principal y sidebar) como 3 paneles de contenido independientes. En las pantallas más pequeñas sólo un panel mostrará siempre a la vez. Te incluimos un menú adicional en la parte superior de la página que ofrece una opción para cada panel. Clic en cualquiera trae el panel que está conectado con en la pantalla con los demás paneles que se trasladó fuera de la pantalla.

Enfoque: En pantallas pequeñas solamente mostraremos un panel a la vez, con el contenido principal es el panel por defecto visible. Vamos a crear 3 botones en el header, uno para cada panel. Todos estos botones tienen aplicado estilo de botones de radio. Vamos a usar algo similar al truco de casilla de verificación (el truco del botón de radio) para controlar el evento clic. Mientras una casilla de verificación es susceptible de tener dos estados, los botones de opción pueden tener tantos estados como deseemos. Conforme cambiamos el tamaño del navegador iremos mostrando más paneles aun mismo tiempo en la pantalla. Primero mostraremos dos paneles mientras mantenemos uno oculto, y finalmente mostraremos todos, los tres paneles predeterminados.

Paso 1: El HTML

Algunas cosas han cambiado respecto a la estructura html de los dos patrones anteriores. En primer lugar, el elemento nav que contiene nuestro menú está ahora dentro de los divs .wrapper e .inner. Esto nos permitirá deslizar los tres paneles al unísono haciendo cambios a los divs que sean sus padres, .inner.

Hemos extraido tanto el header como el footer de las clases .wrapper e .inner. Antes queríamos que el header y el footer cambiasen junto con el contenido cuando el menú quedaba abierto. Ahora queremos que se mantengan siempre en mismo lugar. Sólo los "paneles", nuestro contenido se deslizará hacia dentro y hacia fuera de la pantalla. Puesto que nuestros botones permanecen en su sitio también podemos eliminar el enlace/etiqueta de cierra.

Dentro del header tenemos un div que contiene tres etiquetas, una para cada uno de los tres paneles. Todos tienen asignada la misma clase .btn que hemos utilizado antes, aunque ahora también tienen su propia clase específica así. Observa como cada etiqueta pertenece un botón de conmutación o radio diferente. Los "inputs" de los tres radio están fuera del header. Comparten el nombre "panel" y cada uno tiene un id único, como era de esperar con los botones de radio. Están fuera del header de forma que puedan ser hermanos del div .wrapper.

The 3 panel buttons on small screensThe 3 panel buttons on small screensThe 3 panel buttons on small screens

Paso 2: El CSS Predeterminado

Parte del css predeterminado, como el que crea el estilo de los botones es el mismo que el anterior de arriba, de hecho es el mismo que el del último artículo. Sucede lo mismo con el aspecto básico del menú, mantiene el fondo degradado. Tampoco lo mostraré aquí abajo. En cambio el css a continuación sirve para las cosas que hayan cambiado un algo más o sean nuevas en este patrón.

Naturalmente tenemos que ocultar los inputs de radio y esto lo haremos igual que en el pasado.

Ahora que hemos colocado nuestros tres paneles dentro del mismo contenedor, flotamos cada uno hacia la izquierda para posicionarlos. A cada uno también se le aplica una anchura de 1/3 de la total. Lo que quedará más claro en un momento.

¿Por qué esas anchuras de 33.+%? El funcionamiento de este patrón se puede apreciar en los dos selectores de abajo. Establecemos el ancho del contenedor a un 100% y luego ocultamos cualquier desbordamiento en su interior. Fijamos la anchura de la div. Inner a 300% (1/3 de los cuales es 100%) y por defecto su margen izquierdo -100% para el panel central es visible.

Desde el momento en que se ha establecido un overflow: hidden, sólo 1/3 del ancho del div .inner será visible a la vez. 1/3 de este ancho es igual a la anchura de cualquiera de los tres paneles. En otras palabras, sólo uno de los paneles puede ser visible y éste será visible en su totalidad.

Finalmente, puesto que el div .inner es el que se va a mover, vamos a añadir la transición aquí y como puedes ver, esta transición sólo se produce cuando hay un cambio en el margen del div .inner.

The menu panel visible by on small screensThe menu panel visible by on small screensThe menu panel visible by on small screens

Paso 3: El CSS para Cambiar los Paneles

Conmutar los paneles es muy fácil. El trabajo se hizo realmente con los ajustes de arriba. Todo lo que necesitamos hacer para mostrar un panel diferente es ajustar el margen izquierdo del div. inner. Tenemos que ser capaces de acceder al div. inner basándonos en qué botón de opción esté seleccionado, así que en vez de usar el genérico :checked, lo usaremos vinculado a los botones individuales.

The sidebar panel visible by on small screensThe sidebar panel visible by on small screensThe sidebar panel visible by on small screens

#toggle-1 es para el menú, #toggle-2 es para el contenido principal y #toggle-3 es para la barra lateral. Como todo está flotado hacia la izquierda, un margen izquierdo con valor 0 mostrará el primero de estos paneles o el menú. Un margen de -100% empuja el menú fuera de la pantalla y muestra el contenido principal. Un margen izquierdo de -200% empuja el menú y el contenido principal fuera de la pantalla por la izquierda y muestra la columna lateral.

The menu and content panels visible by on medium screensThe menu and content panels visible by on medium screensThe menu and content panels visible by on medium screens

Paso 4: El CSS en las Media Queries

Cuando alcanzamos los 48em tenemos suficiente espacio para mostrar más de un panel, aunque es demasiado estrecho como para mostrar los tres. Tenemos la opción de mostrar dos paneles adyacentes. Pensé que mostrar el menú y los contenidos principales de forma predeterminada tenía más sentido.

Como nuestro contenido siempre se mostrará en esta anchura, podemos eliminar de la pantalla su botón de radio. Y mientras lo hacemos, vamos a pasar los dos botones restantes hacia arriba y hacia la derecha. Aunque no lo muestro a continuación, también he ajustado la posición del logo y agregado algo de padding a la cabecera.

The content and sidebar panels visible by on medium screensThe content and sidebar panels visible by on medium screensThe content and sidebar panels visible by on medium screens

La idea general para mostrar los paneles es la misma que antes, aunque vamos a tener que cambiar las cifras para mostrar más de un panel a la vez. Al igual que el valor por defecto, queremos que la anchura del div .inner sea mayor del 100% por lo que parte de el permanecerá oculto. A diferencia del ejemplo anterior, ahora queremos que en lugar de 1/3, se muestren 2/3 de lo que está dentro.

Queremos que el div .inner sea 1.5 veces (3/2) la anchura del div .wrapper, por lo que establecemos que sea igual a 150%. En anchuras más pequeñas queríamos que fuese visible siempre 1/3 de la anchura total de .inner. Ahora queremos 2/3, de forma que los dos paneles que se muestran a la vez deberían tener unas anchuras que sumen aproximadamente 67%.

Los números que he utilizado son 25% tanto para el menú como para la columna lateral, y 40% para el contenido principal. 40% + 25% = 65%, que se aproxima suficientemente, dado que disponemos de pequeñas cantidades de padding en los elementos de esta demo que no se muestran en el tutorial. No obstante, la idea es que el total de los dos paneles que se muestran debería ser de 67%.

Como ya no queremos mostrar el fondo degradado tras el menú, hemos indicado que el fondo sea transparente. También la columna lateral tendrá algo de margen superior para que se ajuste de forma uniforme con el contenido principal.

El control de los paneles que se muestran, depende de nuevo de qué botón de opción esté seleccionado. Ahora sólo necesitamos dos estados. Si el botón del menú o el botón del contenido, ahora oculto, están activos, el div .inner tendrá un margen izquierdo con un valor 0. Establecer este margen a -37% mostrará el contenido principal y la columna lateral.

Una desventaja de usar botones de opción es que una vez que uno está seleccionado, siempre tendrá que haber uno seleccionado. Lo que esto significa es que si se selecciona el botón More para mostrar la columna lateral, la única manera de traer de vuelta el menú será seleccionando su botón de radio. Hacer clic en More otra vez no dará ningún resultado. Corregiremos esto en el próximo patrón, sin embargo, es algo a tener en consideración cuando utilizamos botones de radio. Cuando utilices botones de radio nunca querrás mostrar un panel ni todos los paneles ni nada entre medio.

All 3 panels visible by default on wide screensAll 3 panels visible by default on wide screensAll 3 panels visible by default on wide screens

En 75em podemos mostrar todos los tres paneles a la vez. Ya no necesitamos mostrar ningún botón, por tanto ajustamos la propiedad display al valor none.

Ahora queremos mostrar todo el contenido del div .inner, así que establecemos su anchura al 100%. Ya no debemos ocultar nada. También podemos desactivar la transición, puesto que ya no es necesaria.

Las anchuras y otros espaciados de los tres paneles son arbitrarios. He determinado a ojo la anchura que quería para cada uno en el diseño. Nada relativo a cualquiera de las cifras aquí es sagrado, aunque en un proyecto real idealmente habría cierta lógica detrás del lugar que ocupa cada panel en el diseño.

Un último cambio consiste en asegurarnos de que el margen izquierdo del div .inner sea siempre 0. Debemos restablecer este estado por si alguien cambia el tamaño de su navegador tras tener la columna lateral abierta.

Reflexiones

Hay algunas cosas a tener en cuenta con este patrón. Aunque aquí tenemos tres paneles, podrías tener tantos como quisieras. Según el número de paneles, tendrás que modificar los cálculos de las anchuras y los márgenes, pero la idea general será la misma.

Si has revisado la demo con la pantalla abierta a un ancho inferior a 48em podrías notar que cuando se muestra el menú o la columna lateral aparece un montón de espacio vacío bajo cualquiera de ellos y bajo el footer. La altura del div .inner está controlado aquí por el panel del contenido principal, ya que tiene más contenido. Esto sugiere que este patrón probablemente funciona mejor cuando cada panel contiene una cantidad similar de contenido o no te importa que exista mucho espacio vacío bajo algunos de los contenidos del panel.

Otra cosa a considerar es que aunque nosotros hemos usado aquí botones de radio, siempre puedes optar por usar Javascript. En lugar de todos los selectores :checked podrías añadir y quitar clases de cada panel del mismo modo que hicimos en el patrón anterior de nav de columna lateral con js. Vamos a usar jQuery otra vez en el siguiente patrón para permitir que los paneles trabajen independientemente el uno del otro.

Ejemplos

A continuación se muestran tres demos que hacen uso del patrón de panel. Los tres utilizan Javascript para los eventos de clic, así que puedes comparar las demos. Además estas demos sólo muestran un panel cada vez sin importar la amplitud de apertura del navegador.

El Patrón de Columna Lateral +

Este modelo combina algunas cosas de los patrones anteriores. En algunos aspectos actúa como el patrón de panel en el que haciendo clic sobre un botón causará la apertura de ese "panel". Actúa como el patrón de columna lateral en el sentido de que los paneles pueden abrirse y cerrarse de forma independiente del resto de paneles.

Enfoque: En las pantallas más pequeñas sólo el contenido principal se mostrará por defecto. Nuestra cabecera contendrá 2 botones, uno para el menú y otro para la columna lateral. Clic en cada botón abre ese panel y clic otra vez cierra ese panel. Si cada panel está abierto, haga clic en el botón cerrará el panel abierto y abrir el cerrado. Si estuviésemos usando eventos de clic con css querríamos algo que funcionase a veces como los botones de radio y en otras ocasiones como casilla de verificación. En su lugar vamos a ampliar lo que nos debería resultar ya familiar, una función de jQuery para controlar los eventos de clic.

Paso 1: El HTML

El html es casi idéntico a lo que vimos en el patrón de los paneles. Una vez más los tres paneles de información están incluídos dentro de los divs .wrapper e .inner. Puesto que estamos utilizando Javascript para los eventos clic, eliminamos los inputs de entrada en forma de radio y convertimos las etiquetas en enlaces.

Sólo hay dos botones en vez de los tres que hemos utilizado con el modelo de panel para que nosotros quitar uno y poner los dos en cualquier sitio del logotipo restantes.

The content panel visible by default on small screensThe content panel visible by default on small screensThe content panel visible by default on small screens

Paso 2: El CSS Predeterminado

El css por defecto es casi idéntico al existente en el patrón de los paneles. Naturalmente ya no tenemos que ocultar los inputs de radio y podemos eliminar uno de los botones. Los dos botones restantes están posicionados de forma absoluta, uno a la izquierda y otro a la derecha. Por lo demás, se les ha aplicado el mismo estilo que al resto de botones de este tutorial.

Como el css aquí es el mismo, puedes asumir con seguridad que vamos a utilizar el mismo método general para deslizar los "paneles" hacia dentro y hacia fuera de la pantalla. Una vez más el div .wrapper se ajusta a una anchura de 100% con overflow: hidden. La anchura del div .inner se establece a 300% y su margen izquierdo se ajusta a -100% para centrarlo.

Aunque no se muestra más abajo, cada "panel" interior tiene un ancho de 1/3 del ancho total del div .inner.

The menu panel visible on small screensThe menu panel visible on small screensThe menu panel visible on small screens

Paso 3: El CSS para Cambiar el Menú y la Columna Lateral

Como estamos utilizando el mismo método general para las diferentes partes de la disposición en y fuera de la pantalla se puede adivinar que va a ser igual de sencilla como lo fue con el patrón de los paneles. Si nada es fácil ya que sólo tenemos dos botones en lugar de tres.

The sidebar panel visible on small screensThe sidebar panel visible on small screensThe sidebar panel visible on small screens

La diferencia es en lugar de botones comprobado que estamos agregando y quitando las clases. Aquí les he añadido a la div. Inner. Ten en cuenta que cada "panel" consigue su propia clase única, que es lo que nos permite controlarlos de forma independiente.

The menu and content panels visible on medium screensThe menu and content panels visible on medium screensThe menu and content panels visible on medium screens

Paso 4: El CSS en las Media Queries

Estamos haciendo lo mismo aquí que lo que hicimos con el patrón de los paneles. En 48em te mostramos el menú y el contenido principal por defecto. Distintos de cambio #toggle-1: revisar ~. Inner .wrapper a. inner.menu y #toggle-3: comprobar ~. Inner .wrapper a. inner.more todo es idéntico. Se utilizan los mismos valores para las diferentes anchuras y márgenes.

The content and sidebar panels visible on medium screensThe content and sidebar panels visible on medium screensThe content and sidebar panels visible on medium screens

En 75em nos muestran las tres columnas a la vez y eliminar los botones. Otra vez es casi idéntico excepto el cambio de: controlar a la clase para no presentarlo aquí.

Me gustaría señalar algo que estamos haciendo aquí, que puede o no puede decidir incluir. Entre 48em y 75em estamos mostrando el menú y el contenido por defecto con la barra lateral apagado a la derecha. Podríamos eliminar el botón de menú y simplemente dejar el botón más y permiten abrir y cerrar de la barra lateral.

En su lugar he dejado el botón de menú, que sólo hace algo cuando la barra lateral está presente y es el menú de la izquierda de la pantalla. Esto podría ser confuso en el estado por defecto, ya que podría conducir a los visitantes a pensar clic revelará un menú adicional de la que se muestra. El compromiso es que si alguien está viendo la página debajo de 48em y tiene la barra lateral abierto y entonces aumenta su navegador a 48em amplia o arriba hay probablemente menos confusión sobre cómo recuperar el menú.

Este último caso no parece probable, pero parecía razonable para mí si alguien lanza una tablet pequeño retrato al modo apaisado, así que salí en el botón. Es algo a tener en cuenta.

All 3 panels visible on wide screensAll 3 panels visible on wide screensAll 3 panels visible on wide screens

Paso 5: El JavaScript

Afortunadamente el siguiente jQuery se está convirtiendo en familiar. Una vez más nos interceptan el clic de cada botón y navegar por el DOM para añadir o remover una clase en el div .inner. Con ambos botones tenemos que subir un par de contenedores para llegar al header y para ello vamos a usar la función parents(). Desde allí el div .wrapper es un hermano.

El div .inner está dentro del div .wrapper y lo podemos encontrar mediante la función llamada find().

Los botones controlan diferentes paneles por lo que tenemos que añadir y quitar diferentes clases. .btn-1 está vinculado al menú. Si la clase del menú está presente en .inner la quitaremos. Si no está presente vamos a añadirla. Porque existe la posibilidad de que .more esté presente cuando .menu no lo esté lo cerraremos también.

Para .btn-2 hacemos lo mismo, excepto que inviertimos el menú y más clases.

Reflexiones

Cuál es agradable sobre este patrón es que cada "grupo" de contenido puede ser controlado de forma independiente y aún cuando uno está ya abierto un botón pueden cerrar y abrir el otro "panel".

Sin embargo este patrón no está realmente ideado para una serie de paneles. A trabajar mejor cuando tienes sólo una pieza de contenido de lona en ambos lados. También podrías incluir un botón que incluyese contenido que aparece deslizándose desde la parte superior y otro que lo desliza desde la parte inferior. Ubicar más de un "panel" en cualquiera de los cuatro lados no sea probablemente una buena idea con este patrón.

Ejemplos

A continuación se muestran algunos ejemplos del barra lateral + patrón nav, donde dos barras laterales de apertura y cierre independientes entre sí. Nota cómo los dos ejemplos del medio tienen una columna lateral que se desliza desde la parte superior y un segundo desde el lateral.

Sumario

Como hemos visto de los tres primeros tutoriales de la serie, todos los patrones aquí expuestos están creados sobre un tema. Con los patrones off canvas parte del contenido aparece en pantalla y parte fuera de ella hasta que éste es solicitado. Aquí sólo he mostrado contenido oculto por el lado izquierdo o derecho, pero el contenido podría estar fácilmente oculto por la parte superior o inferior de la pantalla.

Generalmente todos funcionan de la misma. El contenido off canvas generalmente ubica y oculta fuera de la pantalla por medio de márgenes. Cuando el contenido se oculta posicionándolo mediante un valor hacia la izquierda o la derecha (o en la parte superior o inferior), éste valor se puede ajustar para colocar el lienzo fuera de la pantalla. Al pulsar diferentes botones ajustamos estos valores para presentar un contenido distinto en pantalla y mover otro tipo de contenido fuera de ella.

Estos patrones off canvas son los últimos patrones responsive de esta serie. Espero que hayas disfrutado la serie completa. No he presentado cada posible combinación para explicar hacia donde se pueden ocultar o reorganizar los propios paneles de contenido o de navegación. He intentado en su lugar presentar todos los métodos básicos para ocultar y mover los elementos con la esperanza de que sean fáciles de entender y los puedas implementar y desarrollar a partir de aquí.

Hemos reorganizado los elementos del menú de la parte superior de la página, ocultado algunos mientras que mostramos otros y convertido una lista de enlaces en un menú de selección. Hemos fijado nuestro menú en la parte inferior de la página y conseguido que mediante un clic se pueda acceder rápidamente a él. Escondimos los menús y lo revelamos de distintas formas pulsando un botón. Y por último hemos colocado menús y otros contenidos off canvas hasta que estos sean solicitados.

También hemos aprendido tres técnicas diferentes para controlar los eventos de clic usando pseudo selectores css, el hack :target, el hack :checkbox y el hack del botón de radio. Cuando el css no funcionaba bien usamos jQuery para añadir y eliminar las clases que representan los diferentes estados.

También vimos muchos ejemplos para mostrar las variaciones de estos patrones en demos y en webs reales.

Espero que has disfrutado este tutorial, con un poco de suerte conseguirás sentirte cómodo experimentando con estos patrones y los utilizarás en sitios reales.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.