CSS avanzado: 12 trucos

Ejemplos de navegación simple: botonera en línea

¡Prueba gratis durante 10 días

nuestros 1271 cursos !

Prueba gratis Mostrar modalidades de suscripción
Utilizando diseños dados de menús de navegación simple, veremos cómo poder llevar a cabo con éxito la creación de un menú mediante CSS y HTML. Conseguiremos generar menús adaptables con suma facilidad y poder así ser más eficientes y tardar menos tiempo en generarlos.

Transcripción

Vamos a comenzar con nuestro nivel de navegación simple. Lo primero a la hora de realizar un menú de navegación desde cero es saber identificar en todo momento qué va con qué. En este caso, vamos a utilizar la etiqueta HTML 'nav' para poder definir cada uno de nuestros menús. Por ello, nos vamos a nuestro HTML y como veis tengo un 'nav' por cada uno de los menús que tengo en el diseño. Lo siguiente es utilizar enlaces para poder identificar cada una las opciones. Como veis, tengo un enlace por cada una de las opciones en todos los menús. Antiguamente se utilizaban 'ul'. Actualmente, no es necesario utilizar 'ul', ya que la propia etiqueta 'nav' nos da a entender que es un elemento de navegación. También tengo añadido la clase 'class active', para poder identificar las opciones que están activas dentro de nuestro menú. Vamos a ir tomando medidas. Lo primero que haremos será ver cuánto tiene de alto. En este caso, tal como nos indica Photoshop: 60 píxeles de alto. Así que nos vamos a nuestro CSS, vamos a colocar la clase 'navbar'. Nos vamos a nuestro CSS y definimos la clase 'navbar' con 60 píxeles de alto. Nos vamos a nuestro navegador, ahí tenemos nuestros 60 píxeles de alto. Seguimos. En el CSS, he colocado los valores de los colores que vamos a utilizar. En este caso, esto tiene que ir de color azul. Y además, sabemos que nuestros enlaces tienen un color blanco. ¿Qué más sabemos? Que no tienen subrayado y que están centrados dentro de su propio enlace. Además, sabemos que tienen que ocupar el ancho total que nosotros le asignemos. En este caso, ocupa de lado a lado, y tienen un borde blanco a la derecha. Nos vamos a nuestro editor de código: tienen un borde blanco a la derecha. Salgamos, nos vamos a nuestro navegador y ahí tenemos nuestro borde blanco. Como podemos ver, los enlaces no nos están ocupando el alto total de nuestro 'nav'. Esto es porque los enlaces son elementos de línea. Lo que necesitamos hacer es que sean elementos de bloque. Para ello, vamos a utilizar la disposición de 'flex'. Dotamos al padre de 'display-flex' para hacer que tenga una rejilla flexible, de tal manera que ahora los enlaces son 'flex-items'. Vamos a decirle que automáticamente calcule cuánto tiene que haber entre cada uno de ellos. Como vemos, ya está calculando automáticamente. Pero para que todos tengan el mismo tamaño, además le diremos que calcule el espaciado que tiene que haber en cada uno de ellos. Por último, colocaremos cada uno de los enlaces de forma alineada vertical. Para ello, generaremos que cada uno de los enlaces sea de tipo 'flex', para poder manejar tanto su alineación vertical como horizontal, y le diremos que su alineación es centrada en ambos casos. Así hemos conseguido tener centrado, tanto horizontal como verticalmente, las opciones de menú. Lo que nos quedaría sería dotar de estilos al texto. Se lo vamos a colocar ahora. Voy a alinear el texto para poder verlo en una sola pantalla. Entonces me voy a la fuente, le digo que mide 16 píxeles, vamos a utilizar la Arial, salvamos, nos vamos al navegador, ahí tenemos las opciones. Y lo que nos quedaría sería definir el estado activo, es decir, la clase que hemos colocado aquí. ¿Cómo? Según indica en diseño, tenemos una barrita de color azul de 2 píxeles. El color lo tenemos en la parte de arriba de nuestro CSS. Ahí tenemos la función activa. Vamos a hacer un poquito más grande. Si no me equivoco, son 5 píxeles, en vez de 2. Ahí tenemos nuestra barrita entre el borde y el espacio que se ha generado. Por último, nos quedaría hacer que esa barrita solo ocupara cierta parte. Si utilizamos el borde, lo que estamos haciendo es utilizar el borde propio de la caja. De hecho, si en Firefox os fijáis, en la parte derecha tenemos como una pequeña diagonal. Esto pasa por el modelo de cajas. Para que esto no nos pase y poder utilizar una barrita, vamos a utilizar otra propiedad de CSS existente: el 'after'. Con lo cual, le indicaremos que el 'active' tiene un 'after'. Cuando utilizamos las propiedades 'after' y 'before', siempre tenemos que utilizar su atributo 'content'. Ahora vamos a decirle, en vez de utilizar un borde, vamos a utilizar un 'height'. El 'after', al final lo que hace es colocar un elemento extra en nuestro "tag" de HTML. Le vamos a decir que el 'width' es del 80 % total de nuestro elemento 'a' y que tiene un color... de color azul, valga la redundancia. Lo bueno de estos elementos 'after' y 'before' es que funcionan como si fueran bloques de HTML sin necesidad de estar. Si nos fijamos, tenemos nuestro 'active' con nuestro 'after'. Lo que necesitamos es colocar esa barra en la parte de abajo. Para ello, vamos a utilizar el posicionamiento, ya que solamente va a afectar a nuestro 'after' y cuando utilizamos posicionamientos absolutos y relativos, necesitamos definir el posicionamiento del padre y sobre él generaremos la barrita. Si nos vamos a nuestro navegador –ahí tenemos–, nos faltaría definirle el 'left' y como queremos que quede centrado, calculamos. Ahí tenemos nuestra barrita centrada, ¿Por qué el 'left' del 10 %? Porque si sumamos 10 % más el 80 %, salen 90, y el otro 10 restante sería lo que quedaría por el lado de la derecha. Así, hemos conseguido generar nuestro primer menú de navegación. Para el resto utilizaremos los mismos estilos que en este, pero cambiaremos los colores. Por lo que, lo que vamos hacer es irnos a nuestro HTML, utilizar la misma clase... Si salvamos y actualizamos, vemos que tenemos el mismo tipo de clase. Voy a generar un poco de margen por debajo de mi menú, para que no se pegue. Ahí está, y entonces lo que nos quedará será modificar los colores de cada uno de ellos, para que se parezca a nuestro diseño. Es esencial intentar reaprovechar al máximo las clases. Por ello, lo que voy a hacer es seguir aprovechando la clase 'navbar', ya que mantiene casi todos los mismos estilos, exceptuando los colores, y añadir una nueva clase sobre la que cambiaré algunos elementos. En este caso, por ejemplo, según diseño, el segundo menú, de color de fondo en vez del azul clarito tenemos el azul oscuro. Por aquí el azul oscuro. Ahí tenemos, y nuestra barrita también cambia de color. Como solo lo queremos en el de tipo 2, hacemos así y le decimos que nuestro 'background' es el azul cielo. Ahí tenemos. Lo mismo para el resto de elementos. Como también normalmente solamente nos va a cambiar el color de fondo, que en este caso será blanco... Y ahí tenemos. El color del texto pasa a ser negro –perdón, el color del texto tendría que ir con el del enlace–, ahí está, muy bien. Y nuestro 'after' es de color azul clarito. Ahí está. Si no, no vamos a conseguir cambiarlo. Y por último le vamos a decir que nuestra lista tiene un 'boder-bottom' de color azul oscuro. Lo hemos utilizado antes y podemos utilizarlo ahora. Lo que nos quedará será colocar esta barrita encima. Como la tenemos posicionada, podemos utilizar la propiedad 'bottom' de nuestro 'after', para que quede encima. Nos quedaría la última opción. Esta, si os fijáis, en vez de llevar color de fondo, no lo lleva. Así que le diremos que es transparente, ahí está; que las opciones de menú sí que llevan color. En este caso, los enlaces llevan color, el azul oscuro. Ahí está. El borde que los separa es mucho más grande. En este caso son 35 píxeles de ancho, es decir, que nuestro enlace, en vez de tener 2 va a tener 35. Podemos especificárselo directamente así. Vamos a ver, ahí está. Y nuestro 'after' en este caso se va a convertir en un pequeño triángulo en la parte superior. Es decir, que vamos a tener un triángulo de color azul oscuro en vez de azul clarito. Que la activa va a tener un color azul claro. Vamos allá, ahí tenemos la activa. Nuestra esquinita va a ser de azul oscuro. De momento es una raya y lo que haremos será utilizar los elementos y las propiedades de CSS que tenemos a nuestro alcance. En este caso, estoy generando un cuadrado, voy a hacerlo un poco más grande, ahí está. Voy a posicionarlo en la parte superior y a la derecha. Voy a resetear la propiedad 'bottom', porque actualmente no la necesito, y la propiedad 'left' que tampoco la necesito. Ahí... el auto... ahí está, a mi derecha. Y lo que nos quedaría sería, como truco visual, podemos utilizar la propiedad 'transform' rotándolo 45 º y como veis, nos queda una esquinilla. En este caso –ahí está– nos interesará moverlo para que quede fuera de nuestro triángulo. También nos interesará subirlo. Normalmente suele ser la mitad del tamaño que tenemos especificado en el 'width'. Lógicamente, nos sale por fuera del enlace. No queremos que se vea nada que esté fuera del enlace. Por lo que utilizaremos un 'overflow: hidden' para ocultar todo aquello que está fuera, y aquí tenemos nuestro triangulito. Si lo queremos más grande, sería tan sencillo como irnos al 'width' y al 'height', hacerlo más grande, modificar nuestro 'top' y nuestro 'right', porque lo que queremos es que quede centrado, y ahí tendríamos nuestro triángulo. Así hemos visto y hemos conseguido generar distintos menús de navegación en base a un diseño.

CSS avanzado: 12 trucos

Descubre con estos 12 ejemplos cómo abordar los diseños y plantearlos para construir estructuras estándares de HTML5 con efectos CSS3 útiles en nuestro día a día como maquetadores.

1:04 horas (15 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:6/09/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.