Buenas, despues de unos dias fuera por trabajo a ver si puedo echar un cable en este tema...
1.- La parte HTML para visualizar como seria la estructura:
<div id="menu">
<ul>
| <li>HOME</li>
| <li>CATEGORIA 1
| | <ul>
| | | <li> ENTRADA 1 CATEGORIA 1</li>
| | | <li> ENTRADA 2 CATEGORIA 1</li>
| | </ul>
| </li>
| <li>CATEGORIA 2
| | <ul>
| | | <li> ENTRADA 1 CATEGORIA 2</li>
| | | <li> ENTRADA 2 CATEGORIA 2</li>
| | </ul>
| </li>
</ul>
</div>2.- La parte CSS que va a mostrar, ocultar, dar formato y poner guapas a las listas y sublistas:
#menu { /* aqui le damos alto y ancho al div menu como de momento tenemos 3 <li> en el principal a 150px cada uno 450px */
height: 20px;
width: 450px;
}
#menu A { /* Estilo para los enlaces en el div menu */
font-family: Arial, Helvetica, sans-serif; /* Tipo de fuente */
font-size: 15px; /* Tamaño de fuente */
color: #000; /* Color de fuente */
display: block; /* Que muestre el enlace como un bloque, asi no solo la parte texto tiene propiedad de enlace */
width: 150px; /* El ancho del bloque */
height: 20px; /* El alto del bloque */
}
#menu ul { /* Estilo para la lista */
margin: 0px; /* por si acaso, que limpie margenes externos */
padding: 0px; /* por si acaso, que limpie margenes internos */
}
#menu li { /* Estilo para cada elemento de la lista */
list-style-type: none; /* Les quitamos la marca de lista */
float: left; /* Cada uno flota a la izquierda del que le precede */
background-color: #FFF; /* Tienen un color de fondo blanco */
text-align: center; /* El texto se alinea centrado */
display: block; /* Se muestran tambien como bloque */
height: 19px; /* Los bloques tienen una altura de 19px (un pixel menos para dejar sitio al borde) */
width: 150px; /* una anchura de 150px */
border: 1px solid #333; /* y un borde de 1 pixel color gris oscuro */
}
#menu LI UL { /* Estilo para la sublista */
position: relative; /* La posicion, relativa a la lista madre */
top: 0px; /* Como la posicion es relativa queda a 0px de la lista madre */
left: -1px; /* y a -1 pixel por el borde */
visibility: hidden; /* Con esta propiedad le decimos que por defecto este oculta */
text-align: left; /* Alineamos a la izquierda el texto */
width: 150px; /* Le volvemos a dar un tamaño */
text-indent: 5px; /* y hacemos que el texto se tabule un poco hacia la derecha para que no quede pegado al borde */
}
#menu LI:hover UL { /* Estilo que se aplica a la sublista cuando nos ponemos encima de la lista madre */
visibility: visible; /* La hacemos visible */
}Bueno, parece un lio, pero es simple, un ejemplo de lo mas simple que puede haber, cada propiedad esta explicada a continuación entre las marcas /* y */ que delimitan los comentarios en css.
Ahora vamos con el codigo que deberiamos añadir al html para que wordpress introduzca las categorias y entradas:
<div id="menu">
<ul>
<li><a href="<?php echo get_option('home'); ?>">HOME</a> <!-- Nos lleva al inicio -->
</li>
<?php wp_list_pages('title_li='); ?> <!-- pedimos la lista de paginas -->
<li><a href="#">Categorías</a> <!-- Creamos las categorias -->
<ul> <?php wp_list_categories('orderby=name&title_li='); <!-- Orden en las categorias -->
$this_category = get_category($cat);
if (get_category_children($this_category->cat_ID) != "") {
echo "</ul><ul>"; <!-- Pedimos que nos cree listas para las categorias -->
wp_list_categories('orderby=id&show_count=0&title_li=
&use_desc_for_title=1&child_of='.$this_category->cat_ID);
echo "</ul>"; <!-- y le pedimos que cierre las listas -->
}
?>
</li> <!-- Cerramos el elemento de lista -->
</ul> <!-- Cerramos la propia lista -->
</div> <!-- Cerramos El div que lo contiene todo.... -->Y en principio listo!
Fijo que no funciona la parte del codigo de wordpress, pero el sistema mas facil seria algo similar a esto, ahora
Como tuve que andar buscando el codigo de aqui y alla ya que no conozco todavia bien las sentencias que usa wordpress, seguro que alguien que sepa de este tema podra corregirlo o incluso cambiarlo totalmente.
Tampoco probe el tema de la alineación de los menus con el css, esta escrito aqui tal cual y puede que se muevan un poco del lugar que les corresponderia, pero ocultarse y mostrarse con el al pasar el ratón por encima lo hacen seguro.
Se podrian añadir mas sublistas que se oculten y aparezcan todo es jugar con el nivel de <ul> dentro de <li> dentro de <ul> y el parametro :hover :
LI:hover UL UL {
visibility: hidden
}Este codigo ocultaria una tercera lista al ser mostrar la segunda.
Asi como:
LI LI:hover UL {
visibility: visible;
}La haria visible al posicionarse sobre un li de la segunda sublista que contenga otra lista....
Bueno, a ver si entre unos cuantos sacamos ento adelante.
Uff vaya panzada de escribir....
Salud!
