Ulzurrun de Asanza i Sàez

Tag: navegación

WP Main Menu – Beta 1

Desde hace más de un mes, WP Main Menu ha estado en fase Alpha, y al contrario de lo que esperaba, se han reportado bastantes pocos errores durante este tiempo y si lo comparamos con la increíble cantidad de errores que se encontraron en la versión 0.4 de WP Carousel, la sensación de que la coletilla “Alpha” le sobre a WP Main Menu se incrementa.

Con el desarrollo de Portal Colorido 2.0 bastante avanzado (y muy cercano a estar acabado), se ha presentado una nueva función muy interesante que añadir a WP Main Menu: la posiblidad de integrarlo en themes de terceros o incluso en plugins. La novedad no ha sido muy compleja de añadir (de hecho he seguido exactamente el mismo esquema que utilicé para añadir esta función en WP Carousel), y dentro de unas pocas horas estará disponible la próxima actualización de WP Main Menu.

Aprovechando estas dos cosas (y para hacer que sea más fácil distinguir a partir de qué versión de WP Main Menu se puede integrar en otros themes) he decidido que esta próxima versión pasará a estar en fase Beta (y no Alpha).

El método para integrar WP Main Menu en otros themes es muy similar al que comenté ayer de WP Carousel, sin embargo tiene sus diferencias, que comentaré en otro artículo con más detenimiento.

Esta versión se puede descargar desde aquí.


Navegación de estilo moderno

Hoy en Smashing Magazine han publicado una serie de menús de navegación que le dan un aspecto muy moderno a los diseños. Algunos tratan de tener un aspecto 3D, mientras que otros juegan con combinaciones de colores y degradados estupendos  y otros utilizan formas poco comunes para dar un aspecto fresco y actual.

Un vistazo a cómo era la navegación de los sitios web hace algunos años

Hoy han publicado en CSS Blog un interesante artículo sobre cómo era antes y cómo es ahora la navegación en los sitios web. Resulta curioso ver cómo algunas páginas han cambiado mucho su aspecto a lo largo de estos últimos años, mientras que otras siguen igual que al principio.

Crea un menú desplegable usando sólo CSS

Es habitual encontrar menús desplegables (drop down menus) en muchos sitios webs, y estos nos permiten acceder a las subpáginas de cada sitio de forma más rápida y nos ahorran el tiempo de cargar la página padre para ir a la hija. Es frecuente que estos menús usen Javascript para funcionar, y con él logran unos efectos bastante atractivos, pero para lograr un menú más accesible a aquellos que no puedan usar Javascript, podemos sustituirlo por CSS.

El HTML

Antes de meternos en el CSS, tenemos que decidir cómo será el HTML de nuestro menú desplegable. Yo he optado por crear una lista desordenada (<ul>), ya que es el sistema que más se suele usar, y que podemos encontrar, por ejemplo, en WordPress.

El aspecto de nuestro menú será este:

[html]
<ul id="dropdownmenu">
<li><a href="#">Link 1</a></li>
<li>
<a href="#">Link 2</a>
<ul>
<li><a href="#">SubLink 2.1</a></li>
<li><a href="#">SubLink 2.2</a></li>
<li><a href="#">SubLink 2.3</a></li>
</ul>
</li>
<li>
<a href="#">Link 3</a>
<ul>
<li><a href="#">SubLink 3.1</a></li>
<li><a href="#">SubLink 3.2</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
<li>
<a href="#">Link 5</a>
<ul>
<li>
<a href="#">SubLink 5.1</a>
<ul>
<li><a href="#">SubLink5.1.1</a></li>
<li><a href="#">SubLink5.1.2</a></li>
</ul>
</li>
<li><a href="#">SubLink 5.2</a></li>
</ul>
</li>
</ul>
[/html]

El menú tiene 5 links principales, de los cuales el segundo link tiene tres sublinks, el tercero tiene dos sublinks y el quinto tiene dos sublinks de los cuales el primero tiene dos subsublinks.

El CSS

Voy a explicar un poco la lógica del menú. En principio el menú sólo tiene que mostrar los cinco links principales (links padres). Los demás deberían estar ocultos. Al pasar el cursor sobre un link padre, deberían mostrarse sus links hijos. Al pasar el cursor sobre uno de estos hijos, debería mostrarse sus hijos, y así sucesivamente.

Comenzaremos reseteando un par de estilos para que el menú quede mejor y haciendo que el menú principal sea en horizontal.

[css]
body, ul, li {
margin:0;
padding:0;
}

ul {
list-style:none;
display:inline-block;
}

ul li {
float:left;
}[/css]

Ahora daremos un poco de estilo al menú principal. Esta parte se puede modificar para que el menú quede al gusto de cada uno y se adapte mejor al diseño del lugar donde va a estar.

[css]
ul#dropdownmenu {
margin:none;
list-style:none;
height:40px;
width:100%;
background:#3b3b3b;
}

ul#dropdownmenu li {
height:40px;
}

ul#dropdownmenu li a {
display:block;
padding:8px;
height:24px;
color:#FFF;
font-family:Arial, Verdana, Geneva, sans-serif;
font-size:18px;
text-decoration:none;
}

ul#dropdownmenu li a:hover {
background:#CCC;
}
[/css]

Ahora tenemos que ocultar los sublinks y hacer que sólo se muestren cuando se pasa el cursor sobre el link padre. Esto lo haremos usando el selector :hover.

[css]
ul#dropdownmenu li ul {
display:none;
}

ul#dropdownmenu li:hover ul {
display:block;
background:#999;
position:absolute;
}
[/css]

Continuamos añadiendo algo de color a los sublinks:

[css]
ul#dropdownmenu li:hover ul li {
float:none;
position:relative; /* Gracias por el consejo, Álex */
background:#999;
}
[/css]

Finalmente, ocultamos los links nietos (hijos de los hijos), usando la misma técnica que antes. Lo único que cambia es que añadimos la propiedad top y left para que los links aparezcan a la derecha y no debajo (si aparecen debajo se superponen a los siguientes links hijos).

[css]
ul#dropdownmenu li ul li ul, ul#dropdownmenu li:hover ul li ul {
display:none;
}

ul#dropdownmenu li:hover ul li:hover ul {
display:block;
top:0;
left:100%;
}
[/css]

Con esto ya tenemos el menú completado. Este menú permite añadir tres niveles de links (padres, hijos y nietos), aunque se puede modificar para que funcione con todos los niveles que se necesiten.

Descarga y demo

Como es costumbre, he preparado una pequeña demo del menú desplegable para que podáis comprobar el resultado.

También está disponible la misma demo en un archivo comprimido para que la descarguéis si tenéis problemas con el tutorial.


50 ejemplos de menús de navegación

Este miércoles, en Smashing Magazine se publicaron 50 ejemplos de menús de diversas páginas webs que pueden servir de ayuda para diseñar el menú de vuestro próximo proyecto.

WordPress 2.7 puede incluir un nuevo sistema de navegación

Así es, es posible que WordPress 2.7 incluya un nuevo sistema de navegación.

El sistema tendriá los links a la izquierda, y cada “categoría” de enlaces tendría dentro otros links.

Por ejemplo, la categoría Content tendría Posts, Comments, etc.

Las categorías podrían contraerse y expanderse para mostrar los links que incluyen, haciendo posible acceder al listado de categorías o comentarios sin tener que pasar por ninguna otra página del panel de administración.

Este nuevo sistema de navegación se aplicaría al panel de administración. Pero el nuevo aspecto no es el único cambio del sistema de navegación, también es posible un cambio en los nombres de cada sección del panel de administración.

Además los desarrolladores nos invitan a participar en una encuesta sobre el nuevo sistema, donde podremos elegir entre 3 variaciones del sistema de navegación, estas:



En la encuesta también podemos opinar sobre la variación que hemos elegido: qué nos gusta, qué deberían cambiar, etc.

Aunque por ahora el nuevo sistema aún está en proceso, el lanzamiento de WordPress 2.7 está previsto para noviembre de 2008.

¿Será este el cambio que necesita WordPress para superar a TextCube?

¿Qué os parece? ¿Os gusta más o menos que el actual?

Links

Artículo original (en inglés).

Encuesta (de nuevo, en inglés).