MENÚ DESPLEGABLE Y RESPONSIVE

Parece que, con la llegada del 2015, los “vientos de google” han traído la necesidad, más que nunca, de hacer que nuestros sitios sean responsive. Y es que, por si no te habías enterado, el gran titán ha empezado a etiquetar con un “para móvil” a aquellas páginas que ya hayan dado el paso.

 

Pues bien, mientras me planteo hacer un post especial sobre Diseño web responsivo (para más adelante), en este artículo voy a describir cómo crear un menú desplegable y que se adapte a las diferentes resoluciones de pantalla.

A quién no le suena la siguiente imagen?

menu

Corresponde a uno de los diseños más representativos y extendidos que podemos encontrar en la navegación con móvil. Se le conoce como “menú hamburguesa”, y al tocar con el dedo cualquier punto del rectángulo, éste se desplegará y mostrará todo su contenido.

 

Dicho esto, y sin más preámbulos, os describiré a continuación cómo implementar este recurso en vuestros diseños.

 

El código HTML5

Puesto que queremos “fluidificar” nuestro menú, es decir, que sea responsivo, lo primero que tenemos que hacer es introducir la meta-etiqueta viewport dentro de nuestro <head>, que será la encargada de lograrlo:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

También deberemos declarar la librería de jQuery. Por ello, introduciremos el siguiente código, nuevamente dentro del <head>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Para la construcción del menú, dentro ya del <body>, usamos la etiqueta <nav> para integrar los links de navegación que serán declarados a través de una lista <ul>. Fíjate, que asignamos a ambas etiquetas la clase “clearfix”, atributo que nos servirá después para hacer los ajustes necesarios con el código CSS3.

<nav class="clearfix">
<ul class="clearfix">
<li><a href="#">Inicio</a></li>
<li><a href="#">Galería</a></li>
<li><a href="#">Bebida</a></li>
<li><a href="#">Menú</a></li>
<li><a href="#">Eventos</a></li>
<li><a href="#">Contacta</a></li>
</ul>
<a href="#" id="pull">Menu</a>
</nav>

El código jQuery:

Con este sencillo <script> vamos a lograr que el menú se despliegue, cual acordeón, al tocarlo con el dedo en la pantalla de nuestro dispositivo. Recuerda que deberás introducirlo antes de la etiqueta </head>, y que otra opción sería pegarlo en un archivo externo con extensión .js (en este caso, deberás de omitir las etiquetas <script> y </script>:
<script>
$(function() {
var pull                                = $('#pull');
menu                   = $('nav ul');
menuHeight      = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>

El código CSS3

 

Primero empezaremos por definir el código básico y genérico del menú. Lógicamente, podremos personalizarlo a nuestro gusto:

/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}

/* Basic Styles */
body {
background-color: #ece8e5;
}
nav {
height: 40px;
width: 100%;
background: #000;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
border-bottom: 2px solid #283744;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
nav li {
display: inline;
float: left;
}
nav a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: none;
}

Con esto, obtendríamos algo así:

horizontal

 

 

No obstante, de momento nos encontramos ante un diseño estático que no se adaptará a las diferentes resoluciones de pantalla. Para lograrlo, deberemos de hacer uso de las media queries.

 

Empezaremos por definir los estilos de nuestro menú siempre y cuando no se superen los 600px:

 

/*Estilos de pantalla de hasta 600px*/

@media only screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}

Con esto tenemos que, por debajo de anchos de pantalla de 600px, nuestro menú se mostrará tal cual ilustra la foto:

menu-desplegado-sin

Sigamos definiendo anchos de pantalla inferiores. En esta ocasión, vamos a “dar el salto” y hacer que el menú se contraiga en la barra (primera foto).

 

/* Estilos de pantalla de hasta 480px*/

@media only screen and (max-width: 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #000;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
Así es como quedará el menú para anchos de hasta 480px:

menu-desplegado

Y ya para terminar, el último breakpoint (punto de rotura) en nuetras media queries, lo fijaremos en los archiconocidos 320px (ancho de referencia muy utilizado por determinados Smartphones):

 

/*Smartphones de hasta 320px*/

@media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}

Y qué conseguimos con esto? Pues que para pantallas más estrechas, el menú se muestre organizado en una sola columna una vez desplegado. Pero por si no queda claro, veámoslo con una imagen, que vale más que mil palabras:

apilado

Y éste es el concepto de Responsive Web Design que tanto se comenta en estos tiempos, elevado a la enésima potencia.

 

Manuel Córdoba

 

ANIMACIÓN AL CARGAR LA PÁGINA CON CSS3

Una de las ventajas de saber exprimir las capacidades de CSS3, es que podemos realizar animaciones sin la necesidad de recurrir a plugins u otro tipo de lenguajes de programación.

Me refiero al uso de los Keyframes Animation, las Transitions y las Transformaciones, módulos con los que podremos lograr efectos bastante espectaculares de forma sencilla.

Como ya he dicho en anteriores ocasiones, la ventaja de utilizar CSS3 es que es ligero y versátil (sobretodo comparado con javascript). Además, en el caso de las animaciones, los efectos se suavizan, lo cual supone una mejora en la parte estética y experiencia del usuario.

En el ejemplo que voy a tratar en este artículo, vamos a combinar dos efectos sobre un mismo div. Ambos tendrán lugar en el momento de la carga de la página, y lograremos con ello dinamizar de forma atractiva nuestro site.

EL EJEMPLO

La idea consiste en:

Animar el emplazamiento de una caja: En nuestro caso utilizaremos un div, pero bien podríamos emplear cualquier otro objeto (header, footer, article, a,…). El elemento en cuestión caerá desde el marco superior del monitor, cual pieza de tetris, y se ubicará en la posición que designemos.

Animar la aparición progresiva del elemento: Quizá nos suene más como FadeIn (“desvanecimiento” en inglés). Sea como sea, lograremos con ello un efecto visual muy interesante y sutil. A mi particularmente me gusta usarlo bastante en mis Diseños y creaciones web.

El código HTML5

<div class="caja">
<p>Este objeto cae desde la parte de arriba de la pantalla, a la vez que aparece de foma suave y sutil.</p>
</div>

El código CSS3

.caja
{
width: 40%;
margin: 15% 0 0 30%; /*Margen superior del 20% y luego centramos con un margen lateral izquierdo del 30%*/
border: 1px solid;
text-align: center;
animation: aparecer 4s ease-out 1; /*Definimos un nombre para la animación (“aparecer”), un tiempo total de 4segundos de duración y un movimiento suavizado al final*/
-webkit-animation: aparecer 4s ease-out 1;/*Chrome, Safari, Android, iOs*/
-moz-animation: aparecer 4s ease-out 1; /*Firefox*/
-o-animation: aparecer 4s ease-out 1; /*Opera*/
-ms-animation: aparecer 4s ease-out 1; /*Internet Explorer*/
}

Y a continuación definimos qué propiedades queremos animar y cómo en el tiempo:

@keyframes aparecer {
from {margin-top: -50%; opacity: 0;}  /*Nótese el margen negativo para situarlo bien arriba*/
50% {margin-top: 10%; opacity: 0.2;} /*Vemos que cuando haya transcurrido el 50% del tiempo, es decir, 2s, el margen superior ha pasado de -50% a 10%, y la opacidad de 0 a 0.2*/
to {margin-top: 15%; opacity: 1;} /*Es el ultimo fotograma de la animación, o punto final*/
}

Incluimos los prefijos necesarios para todos los navegadores:

@-o-keyframes aparecer {
from {margin-top: -50%; opacity: 0;}
50% {margin-top: 10%; opacity: 0.2;}
to {margin-top: 15%; opacity: 1;}
}
@-moz-keyframes aparecer {
from {margin-top: -50%; opacity: 0;}
50% {margin-top: 10%; opacity: 0.2;}
to {margin-top: 15%; opacity: 1;}
}
@-webkit-keyframes aparecer {
from {margin-top: -50%; opacity: 0;}
50% {margin-top: 10%; opacity: 0.2;}
to {margin-top: 15%; opacity: 1;}
}
@-ms-keyframes aparecer {
from {margin-top: -50%; opacity: 0;}
50% {margin-top: 10%; opacity: 0.2;}
to {margin-top: 15%; opacity: 1;}
}

Y ya para terminar, si aprovechamos el ejemplo de mi artículo anterior, en el cual centrábamos el div en nuestra pantalla, el código quedaría del siguiente modo:

.caja
{
position: absolute;
width: 30%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
border: 1px solid;
text-align: center;
animation: aparecer 4s ease-out 1; /*Añadir los correspondientes prefijos a los diferentes navegadores*/
}
@keyframes aparecer { /*Añadir los correspondientes prefijos a los diferentes navegadores*/
from {top: -150%; opacity: 0;}
50% {top: 40%; opacity: 0.2;}
to {top: 50%; opacity: 1;}
}

Espero que te haya resultado útil. Y no olvides compartirlo en Twitter!!

Manuel Córdoba

CSS3: CENTRAR OBJETO HORIZONTAL Y VERTICALMENTE SIN MEDIDAS CONOCIDAS

centradoTodos los que nos dedicamos al Diseño de páginas web, sabemos que la maquetación basada en tablas ya es algo antediluviano y obsoleto. Así pues, por regla general, usaremos las tablas para mostrar contenidos que nos interese organizar en filas y columnas de forma expresa.

Para los que aprendieron a maquetar usando tablas, esto plantea un problema sobre cómo centrar objetos dentro de otros, especialmente si no disponemos de anchos y/o altos fijos de la caja padre.

Lo cierto es que, si hay algo que criticar a CSS3, es la falta de comandos operativos para realizar algo tan básico como lo es el centrado de los elementos.
Todos conocemos algunos hacks famosos y archiconocidos como el “margin: 0 auto;”, el cual centrará el elemento sólo de forma horizontal, y sólo si definimos como posición relative o static.

A partir de ahí, nos encontramos ante un séquito de soluciones nada intuitivas, la mayoría de las cuales cuentan con que la anchura y/o la altura de la caja son parámetros que vamos a expresar en unidades absolutas (px). Y qué ocurre si lo que queremos es optar por diseños fluidos y adaptativos? Es decir, trabajar con unidades relativas (%)?

LA SOLUCIÓN

La solución que propongo aquí, consiste en utilizar la propiedad transform para poder centrar horizontal y verticalmente uno o varios elementos.

En el siguiente ejemplo, vamos a centrar algo tan sencillo como una caja que aloja texto dentro del body.

El código HTML5

<div class="caja">
<p>Mediante el presente texto comprobamos como la caja se centra tanto horizontal como horizontalmente.</p>
</div>

El código CSS3

.caja
{
position: absolute; /*aunque en determinadas ocasiones podría interesarnos “relative”*/
width : 30%; /*el valor que queramos*/
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%); /*aplicamos los prefijos para los distintos navegadores*/
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}

Sin más por el momento, espero que te resulte útil en tus diseños!
Y si tienes cualquier idea o sugerencia, no dudes en dejarme un comentario.

Manuel Córdoba

DETECTAR MÓVIL O TABLET Y REDIRIGIR A OTRA PÁGINA WEB

En ocasiones, puede que nos interese redirigir a otra página, a aquellos usuarios que acceden a nuestra web vía móvil o tableta. El ejemplo más clásico, consiste en diseñar una arquitectura HTML (o CSS) específica y diferente para sendos dispositivos, con el objeto de facilitar la adaptación y visibilidad de la misma a las diferentes resoluciones.

Cabe decir, en este contexto, que ésta es una práctica poco recomendable, pues no olvidemos que estaremos duplicando código HTML, de modo que en caso de hacer modificaciones a nuestra web, tendremos que hacer los pertinentes cambios tantas veces como archivos hayamos creado. Por otra parte, estaremos alejando nuestro “buen hacer” de lo que se espera que hagamos como desarrolladores web, es decir, cargar la parte estética a través de CSS.

Entonces, qué es lo más recomendable? Sin lugar a dudas, el uso de las media queries para la adaptación responsiva de nuestras webs.

Dicho esto, y a pesar de los pesares, voy a describir a continuación mediante código jQuery, cómo podemos hacer para detectar si nuestro visitante lo hace a través de un móvil o una tableta y, en tal caso, redirigirlo a otra parte de nuestra web:

<script type="text/javascript">
            var dispositivo = navigator.userAgent.toLowerCase();
            if( dispositivo.search(/iphone|ipod|ipad|Opera Mini|IEMobile|BlackBerry|android/) > -1 ){
            document.location = "http://www.pagina_a_la_que_quieres_redirigir.html";
            }; 
</script>

Basta con que introduzcas este código antes de la etiqueta “</head>”.

Aunque menos efectiva, otra técnica consiste en detectar la resolución de la pantalla desde la que se está visualizando la web. En tal caso, podríamos emplear este otro código jQuery:

<script type="text/javascript">
            if(screen.width < 1024){
            window.location="http://www.pagina_a_la_que_quieres_redirigir.html";
            }; 
</script>

En este caso, se redirigirá a aquellos visitantes cuya resolución sea inferior a 1024 píxeles.

Y ya por terminar, otra forma diferente consistiría en aplicar una hoja de estilos CSS propia, a aquellas resoluciones que definamos. Pongamos un ejemplo:

<link rel="stylesheet" type="text/css" media="all and (max-device-width: 320px)" href="estilos/estilo_mov.css" />

En este caso, estaremos aplicando los estilos contenidos en el archivo “estilo_mov.css”, a aquellas resoluciones inferiores a 320 píxeles.

Sin más por el momento, no dudes en dejar un comentario, ya sea respondiendo a este mensaje o a través de mi web www.creadiweb.com

Manuel Córdoba

 

Cómo asignar a un DIV la misma altura de nuestra pantalla

Uno de los principios básicos que todo diseñador de webs debe de recordar es que, todo lo relacionado con la parte estética del contenido, se realice vía CSS. Sin embargo, en ocasiones, bien sea porque nos veamos limitados en conocimientos, bien sea porque así lo elegimos, puede que queramos recurrir a otros sistemas.

Así pues, en este artículo voy a explicar cómo asignar a un DIV (o Id), la misma altura que la de la ventana de nuestro navegador, usando para ello jQuery. Además, veremos cómo centrar verticalmente dicho DIV dentro de nuestra pantalla.

Estructura HTML:

Imaginad que tenemos un Id que hace las veces de “contenedor padre”. A este Id lo llamaremos “contenedor”. Dentro de este Id, introduciremos dos DIV’s. Uno que lo bautizaremos con la class=”flotante” y que no tendrá contenido alguno (como se intuye), y otro que alojará todo el contenido que queramos introducir. A éste último le asignaremos la clase=”midiv”.

Podríamos representarlo del siguiente modo:

<section class="contenedor">

<div class="flotante"></div>

<div class="midiv">

<p>Aquí introducimos el contenido</p>

</div>

</section>

El código jQuery:

El siguiente código, lo introduciremos en un “archivo satélite” que recogerá todas funciones jQuery. También podríamos introducirlo en el mismo archivo HTML, antes de la etiqueta </head>. En este caso, deberemos encerrarlo entre las etiquetas: <script type=”text/JavaScript”> y </script>.

$(window).load(function(){ //también podríamos usar $(document).ready(function(), aunque esto me ha dado problemas con el google chrome.
alturaventana = $(window).height(); //Calcula la altura de la pantalla, y la asigna a la variable alturaventana
alturamidiv = $(".midiv").height(); //Idem pero del div de clase "midiv
if (alturaventana>alturamidiv) { //es decir, si la altura de la pantalla es mayor a la del propio div
t = (alturaventana-alturamidiv)/2; //calcula el hueco que queda al restar del alto de la pantalla el div, y lo reparte entre dos. Este valor lo asigna a la variable "t".
$("#contenedor").css("height", alturaventana); // El contenedor ocupará la altura de la pantalla. Importante declarar el id con position: relativa en nuestro CSS.
$(".flotante").css("height",t); //aplica a la propiedad altura del div "flotante", el valor de la variable "t". El objetivo de este div, consiste en rellenar un hueco entre el contenedor padre y el div que aloja al contenido.
}else{ //es decir, si la altura del DIV es mayor a la de la ventana de nuestro navegador.
t = alturamidiv;
$("#contenedor").css("height", t); //Es decir, que la altura del contenedor padre, será la que ocupe el DIV que aloja el contenido por necesidad.
$(".flotante").css("height",70); //Le damos una altura en píxeles para forzar un distanciamiento (hueco) al título o primera línea del DIV.
}; });

Conclusión:

Puede que no sea una forma muy elegante de llevar a cabo nuestra propuesta. No obstante, podrás comprobar la funcionalidad de la misma en mi web: www.creadiweb.com

No olvides dejar algún comentario si te ha gustado este artículo.

Saludos,

 

Manuel Córdoba