Los menús horizontales son una manera excelente de crear un menú de categorías o páginas, destacando campos de interés específicos dentro de su website. Muchos diseñadores de la tela ponen un menú horizontal debajo del jefe, donde dibujan el ojo.
Los menús horizontales se crean con la característica de la lista del HTML. Sí, mientras que son horizontales en vez de vertical, como listas típicas, siguen siendo una lista. Los estilos de la presentación del CSS permiten que fijemos la lista al funcionamiento en una línea en vez de una línea separada para cada artículo de la lista.
Puesto que los menús horizontales son simplemente listas en una linea horizontal, vamos comenzar el proceso con una lista.
Debajo está la lista simple para nuestro menú horizontal. Le recomendamos subsistencia su lista pequeña pues muchos estirarán también de par en par a través de la pantalla y pueden causar algunos problemas de la disposición. Hemos incluido la lista en una capa llamada navmenu.
<div id="navmenu">
<ul>
<li><a href="<?php echo get_settings('home'); ?>">INICIO</a></li>
<li><a href="wordpress/recipes/">RECETAS</a></li>
<li><a href="wordpress/travel/">VIAJES</a></li>
<li><a href="http://www.wordpress.org">WORDPRESS</a></li>
</ul>
</div>
Como usted puede ver, dentro de nuestra lista hemos incluido una etiqueta de PHP para el "Home Page" y varias categorías, así como un enlace a WordPress, esa gente tan despierta y altruista. La lista se parecería a esto, en su forma más simple ( según lo dictado por el código ):
* INICIO * RECETAS * VIAJES * WORDPRESS
Usted puede también utilizar la etiqueta de la plantilla del wp_list_cats() para enumerar sus categorías. Si usted solo desea enlazar desde el menú las categorías 1, 3, 4, y 5 enumeradas y el resto excluido, su lista puede parecerse a esto:
div id="navmenu">
<ul>
<li><a href="<?php echo get_settings('home'); ?>">HOME</a></li>
<?php list_cats('FALSE', '',
'', '', TRUE, FALSE,
FALSE, TRUE, TRUE,
FALSE, , '', ,
'', '', '2,6,7,8,9,10,11,12',
FALSE); ?>
<li><a href="http://www.wordpress.org">WORDPRESS</a></li>
</ul>
</div>
El lugar para poner su nueva lista puede ser justo debajo del jefe . En WordPress v1.5, abra el archivo de header.php en la carpeta del tema de WordPress que usted está utilizando. Pegue el código en el fondo del archivo después del jefe DIV y después guarde el archivo.
En WordPress v1.2, abra el archivo de index.php y busque el extremo de la sección del jefe y ponga su código de la lista allí.
El funcionamiento de una lista es, por defecto, vertical, y cada elemento que la integra ocupa una linea. Cada elemento se muestra además con una imagen (tipicamente un punto o asterisco), conocida como bala, antes de cada línea. Necesitamos agregar, en nuestra stylesheet, nuna referencia al navmenu con la que eliminaremos, además de la bala, los márgenes y el acolchado predefinidos para la etiqueta de lista ('ul').
#navmenu ul {margin: 0; padding: 0;
list-style-type: none; list-style-image: none; }
Guardamos y subimos nuestra stylesheet, tras esto actualizamos nuestra página en el navegador, y efectivamente comprobamos que la lista de nuestro menú se muestra sin mella o adición alguna.
Ahora, necesitamos agregar los parámetros que fijarán esta lista en disposición horizontal. Necesitamos agregar una referencia a la etiqueta del elemento de lista.
#navmenu ul {margin: 0; padding: 0;
list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; }
Hay muchas cosas que podemos hacer para configurar esta lista pero, por ahora, vamos a agregar un cierto espacio entre los distintos elementos de la lista de manera que no se muestren acoplados unos con otros, y quitar la raya del acoplamiento del defecto, así como obtener el efecto de cambio de color al pasar el ratón por encima del elemento.
#navmenu ul {margin: 0; padding: 0;
list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; padding: 5px 20px 5px 20px}
#navmenu a {text-decoration:none; color: blue; }
Ok, no podemos detenernos. Vamos a ir un poco más allá en la personalización de nuestro nuevo menú horizontal. Compruebe a continuación si puede descifrar qué es lo que se está haciendo para combiar la apariencia del menú.
#navmenu ul {margin: 0; padding: 0;
list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; }
#navmenu ul li a {text-decoration:none; margin: 4px;
padding: 5px 20px 5px 20px; color: blue;
background: pink;}
#navmenu ul li a:hover {color: purple;
background: yellow; }
Si hicimos este todo correctamente, su lista debe parecer esto:
There are many different ways to style lists. Use your imagination and come up with your own design, alternating colors, or whatever you want. Here are a few resources that will help you get started and learn more about Horizontal and other special effects menus: