Menu Jquery-Lavalamp y WordPress v0.2
El archivo header.php o donde tengamos el menu añadiremos lo siguiente dependiendo si tenemos subpaginas o subcategorias, yo en el DSMinimalII he colocado tanto las categorias como las paginas, de la siguiente manera:
<li <?php if(is_home()) echo 'class="homeLava selectedLava"'; ?>><a href="http://dsergio.com/">
<?php _e('home', 'ds'); ?></a></li>
<?php wp_list_categories('orderby=id&title_li='); ?>
<?php wp_list_pages("title_li=&depth=1");?>
</ul>
Como podeis ver no tengo diferentes niveles y para que la pagina principal sea detectada bien le he añadido las clases homeLava y selectedLava. Luego decir que las categorias estan ordenadas por su ID pero se puede cambiar por su nombre, etc... teneis mas informacion en ingles aqui y si quereis mas informacion sobre como usar el codigo de las paginas lo podeis ver aqui.
Ahora viene editar nuestro CSS para que funcione bien nuestro menu.
Como esto puede valiar dependiendo de nuestro estilo os facilito mi ultimo codigo del menu para que podais empezar mas o menos con el diseño echo.
width: 800px;
position: relative;
padding-right: 50px;
padding-left: 50px;
overflow: hidden;
height: 32px;
margin: 0 auto;
}
#menu li {
float: left;
list-style: none;
}
#menu li.backLava {
background: url("i/lava.gif") no-repeat right top;
width: 12px;
height: 30px;
z-index: 8;
position: absolute;
}
#menu li.backLava .leftLava {
background: url("i/lava.gif") no-repeat top left;
height: 30px;
margin-right: 12px; /* 7px is the width of the rounded shape */
}
#menu li a {
text-decoration: none;
color: #666600;
outline: none;
text-align: center;
top: 10px;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
#menu li a:hover, #menu li a:active {
color: #333;
border: none;
}
Como podeis ver uso una imagen pero si no lo deseais solo tendriais que cambiar el background: url(i/lava.gif) .... Por background: y vuestro color del tipo ( #000000 )
Bueno creo que no me dejo nada asi que despues de editar los archivos, y subirlos a vuestro servidor deberias tener vuestro menu funcionando perfectamente.
Páginas: 1 2
Añade tu comentario