Tutoriales para diseñar 10 menús de navegación con CSS | CosasSencillas.Com

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y mostrarle publicidad relacionada con sus preferencias. Si continúa navegando, consideramos que acepta su uso. Más información

Tutoriales para diseñar 10 menús de navegación con CSS

La navegación es una de las partes más importantes de cualquier diseño web, y requiere un gran esfuerzo a la hora de diseñar uno que sea efectivo y útil para los usuarios. Por lo tanto la creación de menús de navegación con CSS es uno de los elementos más cruciales de diseño de sitios web. Si conseguimos acertar en uno de ellos, nuestros visitantes se sentirán como en casa.

 

Esta es una gran colección realizada por DESIGN SHACK, no es ninguna novedad, pero por si los desconoces, son ejemplos de menús de navegación CSS que vienen acompañados con un tutorial, que nos ayudan o animan a que realices uno propio similar:

 

1. CSS Fancy Menu. Este artículo utiliza para la creación de la barra de navegación algunos efectos Javascript. Gracias a la gran biblioteca Mootools, se consigue una bella figura de poco peso. Ha sido probado en diversos navegadores (probado en Internet Explorer 6 / 7, Firefox y Safari), por lo que destaca por su accesibilidad.

 

menu-horiz-1

2. cssMenus. Este menú de navegación obras tanto vertical como horizontalmente, siendo totalmente compatible con todos los navegadores.

 

menu-horiz-2

3. Advanced CSS Menu. Este tutorial muestra cómo realizar el diseño del menú (paso a paso) junto con los códigos CSS. La mayoría conocemos el código de lista de menú (horizontal o vertical) con CSS . Ahora vamos a considerar otro nivel un poco más avanzado utilizando la lista de menú CSS con la propiedad de posicionamiento.

menu-horiz-3

 

4. Taming CSS Lists. En este artículo, nos muestra lo apropiado del uso del CSS para poner bajo control las listas, en este caso para crear un menú vertical mediante CSS.

menu-vert-4

 

5. Mini Tabs. Destaca de estos pequeños menús para la navegación del tipo "mini pestañas", que se generan con puro CSS, y por supuesto no requieren del uso de imágenes.

 

menu-horiz-5

 

6. Inverted Sliding Doors Tabs. Esta es una explicación de cómo ha adaptado Doug Bowman's Doors la técnica de deslizamiento para trabajar con pestañas con efecto invertido realizado por un reciente diseño de netrelations.se.

menu-horiz-6

 

7. A collection of free CSS menus. Son una colección de 12 menús de navegación diferentes, diseñados por 13Styles.com. Los menús están basados en la lista, muy ligeros, y fáciles de aplicar, son compatibles con todos los navegadores. Algunos de ellos son gratuitos.

 

8. A simple gradient CSS menu. Es realmente notable lo que se puede lograr mediante el inmenso poder del CSS, en especial con los menús de navegación.

 

menu-horiz-8

 

9. A walk-through of different CSS navigation techniques. Un recorrido por diferentes técnicas de diseño para construir un menú de navegación.

 

10. Mini sliding navigation. Otro menú en su mínima expresión, lo pequeño puede ser grande (menuda frase me ha salido).

menu-horiz-10

 

Escrito por Toni

¿Te ha gustado? Compártelo:

Ver más sobre este tema aquí:

, CSS, Diseño Web


favoritoInsertar un Comentario


Nombre:

Email:

Comentario:

Escribe la siguiente palabra:

Sigue leyendo...

favoritoComentarios

No hay comentarios en este artículo.


favoritoArtículos relacionados:



Inscríbete al Boletín