El menú de navegación es una de las partes más importantes de nuestro sitio web. Puede tomar muchas formas, vertical, horizontal, sencillo, complejo, pero lo que es importante es que sea sencillo de utilizar y accesible. Quizás estés buscando una idea para tu menú, o simplemente desees actualizar el que ya tienes, por ello aquí muestro 30 bonitos ejemplos de menús de navegación en los sitios web. Seguro que alguno se adapta a tus intereses y a partir de allí podrás desarrollar tu inspiración e ir tomando la idea:

Cognition

Justdot

Project 7am

Abstraktion

AppTank

When it Drops

37signals

Chappy Barry

DODOcase

Danstrog

Ante Meridiem Design

Desina

Cascade Brewery Co

smorge.com

VYE Music

PicsEngine

Teixido

Hull Digital Live 10

JetSuite

Doodle Pad

Operation UpCycle

wearesignals

rule.fm

Hello. What do you want?

Pline Studios

the horizontal way

Old Pulteney Row to the Pole

Suie Paparude

jasonlove.com

Flipboard

Vía | WDL y Abduzeedo

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• La navegación de los sitios de antes y de ahora

• 30 menús de navegación correctamente diseñados

• 15 métodos para crear menús de navegación

Hace poco os enseñé una lista de menús de navegación correctamente diseñados. Esta podría considerarse la continuación. Los menús de navegación deben ser fáciles de encontrar y de usar, combinando con el estilo principal del sitio. Deben ser atractivos y tener la mayor accesibilidad posible, validados siempre que se pueda. Aquí os muestro una lista de estos menús con atractiva apariencia, que seguro que te inspirarán. Haz click en las imágenes para verlos en su respectiva página:

Vegas Uncork’s

SYNTHVIEW

Help Your Habitat

Electric Pulp

The House Media

Breezy Baby

Curious Generation Group

Pastebot

Chirp

Delibar

Comfort Brothers

Narwhal Co.

Michael Dick

Yellow Bird Project

Ugmonk

Image Spark

Intuitive Designs

Iconlicious

Oval Cube

Neutron Creations

TheOldState

Digital Podge 2009

Arbutus

8Interactive

Cannonball

Sower of Seeds

Ready Made Designs

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• 50 menús de navegación con estilo

• 15 métodos para crear menús de navegación

• 71 Menús de navegación en CSS

La tecnología va evolucionando, y con ello la interfaz se hace cada vez más accesible e intuitiva de cara al usuario. Es necesario prestarle atención a la navegación de nuestro sitio si no queremos que el usuario se pierda y no encuentre la información que desea. Anteriormente os mostré una lista de sistemas de navegación para implementar en nuestro sitio u obtener mayor inspiración. En esta entrada quiero dejar claro la diferencia que existe entre la navegación antigua y la actual:

Old Navy

Old Navy: antes

Old Navy: ahora

Shopping.com

Shopping.com: antes

Shopping.com: ahora

Adobe

Adobe: antes

Adobe: ahora

Weather Channel

Weather Channel: antes

Weather Channel: ahora

REI

REI: antes

REI: ahora

Amazon

Amazon: antes

Amazon: ahora

Apple

Apple: antes

Apple: ahora

Google

Google: antes

Google: ahora

Netflix

Netflix: antes

Netflix: ahora

Expedia

Expedia: antes

Expedia: ahora

Walmart

Walmart: antes

Walmart: ahora

Pogo

Pogo: antes

Pogo: ahora

All Recipes

All Recipes: antes

All Recipes: ahora

Bank of America

Bank of America: antes

Bank of America: ahora (¡no ha cambiado nada!)

Buy.com

Buy.com: antes

Buy.com: ahora

Vía | SmileyCat

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• La evolución en los sitios web populares

• Listado de menús de navegación con estilo

• 15 métodos para crear menús de navegación

Hace poco os mostré una lista de menús complejos. Estos menús eran creados en CSS, JQuery o ambos. Hoy os mostraré otra recopilación, con su respectivo manual para crearlo. Muy útil para usarlos en la zona de navegación de nuestro proyecto:

Make a Smooth Animated Menu with jQuery

Descargar – Demo

Animated Menus Using jQuery

Descargar – Demo

Tutorial: How to Create Your Own “kwicks”Effect with jQuery

Visitar tutorial – Demo

Tutorial: Create a Cool Animated Navigation with CSS and jQuery

Visitar tutorial – Demo

Playing with jQuery Color Plugin and Color Animation

Descargar – Demo

Create a Realistic Hover Effect with jQuery

Visitar tutorial – Demo

Tutorial: How to Load and Animate Content with jQuery

Visitar tutorial - Demo

Tutorial: How to Create an apple style menu and improve it via jQuery

Visitar tutorial – Demo

Sexy Drop Down Menu w/ CSS & jQuery

Visitar tutorial – Demo

Rollovers and tooltips with jQuery

Visitar tutorial – Demo

Tutorial: How easy to create a slide tabbed box using jQuery

Visitar tutorial – Demo

Animated tabbed content with jQuery

Visitar tutorial – Demo

Sliding Top Menu With jQuery

Visitar tutorial – Demo

Tutorial: Fading Menu & Content Replacing with jQuery

Visitar tutorial – Demo

Vía | 2expertsdesign

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Ejemplos sobre menús desplegables complejos

• 71 Menús de navegación en CSS

• 15 métodos para crear menús de navegación

Existen muchos tipos de menús: menús sencillos, menús desplegables… Pero existen otros todavía más complejos, con varios elementos en el menú (barras de búsqueda, enlaces, imágenes), y efectos de animación con JQuery.

Ya que os he mostrado una gran variedad de ejemplos sobre menús sencillos, quería mostraros otra lista con menús desplegables complejos, por si alguien está intentando hacer uno, que le sirva como inspiración:

Best Life Magazine

InfoWorld

Audi

OfficeMax

Little Kids Bedrooms

Sony UK

Aviary

Seattle Sounders FC

mtvU

The Whitehouse

MTV

Change.org

Basecamp

EMC

Philips

Gateway

GE

Food Network

Target

B&Q

RailsGuides

Action Envelope

Electronic Arts

Vía | SmileyCat

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Ejemplos de menús complejos con CSS & JQuery

• Crear menús desplegables con CSS

• 120 excelentes ejemplos sobre menús horizontales

Ya hemos visto como crear un menú horizontal y otro vertical paso a paso. En esta entrada explicaremos a crear un menú horizontal con varios niveles y subniveles, mediante una estructura de listas estilizadas por CSS.

Mediante ul > li:hover ul podremos definir los submenús. Cuando creamos los menús normales, aplicamos display: block y le damos estilos, por ejemplo, un color de fondo (background: white;). La diferencia con los submenús es, que aplicamos los estilos a los elementos hijos (ul > li:hover).

Código HTML

<ul id="nav">

<li><span>Menu 1</span>

<ul>

<li><a href="#">Menu item 1</a></li>

<li><a href="#">Menu item 2</a></li>

<li><a href="#">Menu item 3</a></li>

</ul>

</li>

<li><span>Menu 2</span>

<ul>

<li><a href="#">Menu item 1</a></li>

<li><a href="#">Menu item 2</a></li>

<li><a href="#">Menu item 3</a></li>

</ul>

</li>

<li><span>Menu 3</span>

<ul>

<li><a href="#">Menu item 1</a></li>

<li><a href="#">Menu item 2</a></li>

<li><a href="#">Menu item 3</a></li>

</ul>

</li>

</ul>

Código CSS

#header { height:120px; position:relative;
background: transparent url(header_bkg.png) repeat-x scroll top center;}
#nav { margin:0px; padding:0px; position:absolute; top: 70px; display:block;}
#nav > li { list-style-type:none; float:left; display:block; margin:0px 10px;
position:relative; padding:10px; width:100px;}
#nav > li:hover ul { display:block; }
#nav > li:hover { background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; }
#nav li ul { margin:0px; padding:0px; display:none;}
#nav li ul li { list-style-type:none; margin:10px 0 0 0;}
#nav li ul li a { display:block; padding:5px 10px; color:#A2E200; text-decoration:none;}
#nav li ul li:hover a { background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;}
#nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; }
#header { height:120px; position:relative;

background: transparent url(header_bkg.png) repeat-x scroll top center;}

#nav { margin:0px; padding:0px; position:absolute; top: 70px; display:block;}

#nav > li { list-style-type:none; float:left; display:block; margin:0px 10px;

position:relative; padding:10px; width:100px;}

#nav > li:hover ul { display:block; }

#nav > li:hover { background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; }

#nav li ul { margin:0px; padding:0px; display:none;}

#nav li ul li { list-style-type:none; margin:10px 0 0 0;}

#nav li ul li a { display:block; padding:5px 10px; color:#A2E200; text-decoration:none;}

#nav li ul li:hover a { background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;}

#nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; }

Estandarización

CSS 2.1 inválido (Propiedades únicamente validadas en CSS3).

XHTML 1.0 Transitional válido.

Ejemplo de su funcionamiento

Conclusión

Este es un modo de crear menús con varios subniveles, sin necesidad de usar Javascript, a menos que deseemos darle efectos de animación. Una de las contras que tiene, es, que, para variar, no funciona en IE6.

Vía | Janko

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Crear un menú vertical con bordes discontinuos mediante CSS

• Novedoso menú de navegación con CSS3

• Diseñando un bonito menú vertical con CSS

Fancy Navigator Menu jQuery & CSS, es un menú realizado en CSS y JQuery, muy fácil de hacer, que nos permitirá darle un toque “personal” a nuestro menú de navegación (También podéis mirar la lista de menús de navegación que publicamos hace tiempo).

La estructura es muy sencilla:

Código HTML

<ul id="topnav">

<li><a href="#">Home</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Portfolio</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

Una simple lista, que vamos a estilizar.

Código CSS

La clave principal para crear una máscara en el menú será la propiedad overflow: hidden.

ul#topnav {

margin: 0;

padding: 0;

list-style: none;

float: left;

font-size: 1.1em;

}

ul#topnav li{

margin: 0;

padding: 0;

overflow: hidden;  /*--Importante - Estado inicial del menu, sin mantenernos encima de el--*/

float: left;

height:40px;

}

ul#topnav a, ul#topnav span {

padding: 10px 20px;

float: left;

text-decoration: none;

color: #fff;

background: url(a_bg.gif) repeat-x;

text-transform: uppercase;

clear: both;

width: 100%;

height: 20px;

line-height: 20px;

}

ul#topnav a{

color: #555;

background-position: left bottom;

}

ul#topnav span{ /*--Por defecto--*/

background-position: left top;

}

Código JS

Ahora vamos a darle una animación al menú, gracias a JQuery. Primero debemos enlazar a la biblioteca de JQuery:

<script type="text/javascript"

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

Este es el código de jQuery a añadir en nuestro documento para que funcione la animación:

$(document).ready(function() {

$("#topnav li").prepend("<span></span>");

//Crear un espacio vacío antes de la etiqueta

$("#topnav li").each(function() {

//Por cada item

var linkText = $(this).find("a").html();

//Encontrar el texto denteo de la etiqueta <a>

$(this).find("span").show().html(linkText);

//Agregar el texto a la etiqueta span

});

$("#topnav li").hover(function() {

//En el hover (cuando el puntero del mouse se posiciona por encima)...

$(this).find("span").stop().animate({

marginTop: "-40" //Encontrar la etiqueta<span>

y moverla 40 px hacia arriba.

}, 250);

} , function() { //Cuando se quita (retira o mueve) el puntero del mouse...

$(this).find("span").stop().animate({

marginTop: "0"  //Mover la etiqueta <span>

devuelta a la posición original (0px)

}, 250);

});

});

Estandarización

CSS 2.1 válido.

XHTML 1.0 Transitional inválido (No se puede insertar la etiqueta en la línea 84, localizada en JQuery).

Ejemplo de su funcionamiento

Con esto lograremos un menú sencillo y a la vez práctico. Aunque desactivemos javascript seguirá siendo accesible. ¿Qué os parece?

Vía | Pixelco

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Bonito menú realizado con CSS & JQuery

• Crear un menú horizontal simple con CSS

• Crear un menú vertical con bordes discontinuos mediante CSS

Existen muchos métodos para crear nuestro deseado menú de navegación. Horizontal, vertical, a base de listas, con imágenes, hay infinitas posibilidades. En CSSBlog.es ya publicamos algunos sistemas para crear menús con CSS o imágenes muy originales.

Esta vez queremos extender más la lista y publicaremos varios métodos más (que posteriormente serán analizados en el blog):

1. CSS Menu Maker

Una gran herramienta para crear menús avanzados en tu sitio web. Elige el estilo del menú que necesites, hazle unos retoques y descárgalo.

2. CSS Play

Un sitio web que reune una gran cantidad de menús originales.

3. CSS Menu Generator

Otro generador de menús con un montón de opciones para personalizarlo y posteriormente descargarlos.

4. izzyMenu.com

Otra herramienta para crear menús bastante sencilla.

5. Listamatic

Una colección de estilos basados en listas. Nos dan el código para cada lista, así podremos aprender a personalizarlo.

6. CSS drop-down menu framework

Un menú framework con submenús fácil de personalizar y crear.

7. Free Menu Designs

Una bonita selección de diseños en los menús. En el blog hemos publicado algunas anteriormente.

8. Vitaly Friedman’s CSS showcase

Una gran selección de técnicas de menús de navegación.

9. DevSnippets’ navigation section

Snippets sobre menús de navegación.

10. Advanced CSS menu

Un bonito tutorial para crear avanzados menús CSS con CSS Sprites.

11. Pure CSS menu

Otro generador de menús con un simple diseño.

12. CSS Dock menu

Un menú que emula el dock de Mac OS X, parecido al que publicamos anteriormente.

13. Hybrid CSS dropdown

Un gran tutorial para crear una lista de menús híbridos.

14. FreeStyle menus

Una colección de menús con submenús.

15. 10 brilliant multi-level navigation techniques

Un artículo viendo lo mejor de los menús navegación de multi-nivel.

Vía | Designer-daily

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Crea menús en CSS online con CSS Builder

• Listado de menús de navegación con estilo

• 71 Menús de navegación en CSS

Cada página tiene su zona de navegación para poder ver los contenidos, categorías que tiene. Hay muchas opciones para implementar en la navegación de un sitio web, y sea cual sea la que usemos, siempre tiene que denotar estilo, originalidad. A veces es difícil encontrar esa originalidad, nos falta inspiración o no logramos encontrar con nuestro objetivo. Por eso os mostramos 50 menús de navegación con mucha originalidad y calidad , con los que podrás buscar la inspiración para tus proyectos. Que los disfrutéis (También podéis ver otra lista de menús de navegación publicada anteriormente):

1. netdreams.co.uk

2. Tennessee Vacation

3. Anderbose

4. Alpine Meadows

5. White House

6. The Hole In Our Gospel

7. Cognigen

8. Skatepark Hattingen/Ruhr

9. The Ernest Hemingway Collection

10. Thomas Prior

11. Navigant Consulting

12. The Lippincott

13. Branded07

14. TORRANCE WEB DESIGN

15. Matt Dempsey

16. rzepak.pure.pl

17. Thuiven

18. Africa Tour 2008

19. Bamboo Juice

20. Glocal Ventures

21. Worldwide Blogger Bake Off

22. Agami Creative

23. Aperfolio

24. Games for Her By You

25. Tutorial9

26. Sarah Longnecker

27. Kayintveen

28. Manndible Cafe

29. Creative Spaces

30. David Hellmann

31. Viget Extend

32. Candes

33. Red Nose Day

34. Brad Colbow

35. csharpdesign.co.uk

36. Sarah Hyland

37. okb

38. MacRabbit

39. Cheesetique

40. Nitram+Nunca

41. Satsu Design

42. Africa Oasis Project

43. Nuttersmark.com

44. toby-powell.co.uk

45. GIANT Creative

46. Organic food Ireland

47. Portfolio de Guillaume Pacheco

48. Von Dutch Originals

49. Blue Moon

50. Hey Josh

Vía | Sixrevisions

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Listado de menús de navegación con estilo

• 15 métodos para crear menús de navegación

• 50 bonitos y accesibles menús de navegación

Os hemos mostrado varios diseños de menús para poder inspirarnos en nuestros proyectos, también una lista de menús originales creados con CSS, pero ahora vamos a crear nuestro propio menú horizontal de forma simple con CSS (antes os enseñamos a crear uno otro menú poco más complejo). Empezemos:

Usaremos listas para crear este menú horizontal. Consta de 8 enlaces (por defecto, podemos incluir cuantos queramos):

Código HTML

<ul id=”button”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Clients</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>F.A.Q</a></li>
<li><a href=”#”>Help</a></li>
<li><a href=”#”>Contact Us</a></li>

</ul>

Pero claro, este menú no tiene estilo (CSS). Sin estilo se muestra así:

Código CSS

Vamos aplicarle estilo pues. Solo usaremos un nombre de ID para aplicar CSS Se llamará “button”:

#button {
padding: 0;
}

El código anteriormente expuesto eliminará el padding que pueda haber por defecto en la lista de elementos.

Como vamos a crear un menú horizontal, la lista deberá ser horizontal, así que diremos que se dispongan en línea (display: inline):

#button li {
display: inline;
}

Nos quedará algo parecido a esto:

Ahora viene lo divertido. Vamos a aplicar los colores, fuentes y tamaños del menú (a nuestro gusto, claro está):

#button li a {
font-family: Arial;
font-size:11px;
text-decoration: none;
float:left;
padding: 10px;
background-color: #2175bc;
color: #fff;
}

Y el menú va quedando de esta manera:

Vamos a aplicar un efecto :hover al mover el ratón encima de un elemento de la lista (menú). Nótese la diferencia de padding, margin y color de fondo que mostraremos:

#button li a:hover {
background-color: #2586d7;
margin-top:-2px;
padding-bottom:12px;
}

El efecto sería este:

Estandarización

XHTML 1.0 Transitional válido.

CSS 2.1 válido.

Finalización y ejemplo

Ya está listo. ¿Muy simple, verdad? Podemos ver un ejemplo del funcionamiento del menú.

Vía | Thedesignsuperhero

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Crear un menú vertical con bordes discontinuos mediante CSS

• Crear un menú de restaurante con CSS

• Crear un menú animado con CSS y JQuery