¿Cómo hacer un menú desplegable?

Una de las consultas que más tenemos en nuestro portal es cómo hacer ese menú desplegable que hace tan fácil la navegación.

La respuesta no es sencilla, ya que se trata de un reemplazo del menú original. En nuestro caso decidimos eliminar totalmente la barra de navegación, pero para comenzar recomendamos a todos mantener el formato que provee PWGratis y añadir nuestro menú desplegable.

Al final encontrarán el código completo usando como ejemplo los links de nuestra propia página. Lo que vamos a hacer ahora es explicar cómo cambiar esos links para hacerlos items desplegables o normales de cualquier página, incluso las que no están gestionadas con PWGratis.

Una vez que copiado el código que está al final y pegado en la página deseada ("Texto por encima de la página" en el kit de construcción de PWGratis) vamos a prestar atención en estos componentes:


<ul id="page-bar">
<li><a href="/">Inicio</a></li>
<li><a href='#'>Tu Página</a>
<ul class="children">
<li class="cat-item"><a href='http://prometheos.es.tl/Gu%EDa.htm'>Cómo Empezar</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Tu-p%E1gina.htm'>Consejos Útiles</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Plantillas.htm'>Plantillas</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Elige-tu-intro.htm'>Intros</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Banners.htm'>Banners</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Creador-de-banners.htm'>Widgets</a></li>
</ul></li>
<li><a href='#'>Comunidad</a>
<ul class="children">
<li class="cat-item"><a href='http://prometheos.es.tl/Foro/index.htm'>Foro</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Links.htm'>Enlaces Recomendados</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Ranking.htm'>Ránking de Páginas</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Fotolog.htm'>Fotolog</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Visitas.htm'>Libro de Visitas</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Contacto.htm'>Contacto</a></li>
<li class="cat-item"><a href='http://prometheos.es.tl/Newsletter.htm'>Newsletter</a></li>
</ul></li>

<li><a href='http://mejoratupagina.blogspot.com/'>Blog</a></li>
<li><a href='http://prometheos.es.tl/Participa.htm'>Participa</a></li>
</ul>


*Enlace fijo en la barra principal
*Menú desplegable sin enlace
*Enlace en submenú

A continuación, usando nuestro kit de construcción presionamos Ctrl+F en el navegador para encontrar cada una de las líneas que vamos a editar. Hay que prestar mucha atención y reemplazar sólamente los nombres y los links, porque al cambiar alguno de los códigos se puede perder todo lo editado. Guardar una modificación a la vez es lo más recomendado, siempre verificando el resultado.

Me gustaría ver cómo quedó en cada página para ver si hay que corregir algo, así que espero muchos comentarios en el libro de visitas!

En próximas entregas: cómo cambiar los colores del menú desplegable.

Ver código...



<style type="text/css">

<!--

/* Menú desplegable por prometheos.es.tl*/

* {

margin:0;

padding:0;

}



#navbar {

position:relative;

margin:0 auto;

margin-top:15px;

padding:0px 10px;

text-transform:uppercase;

border-top:2px solid #f25e00;

}



#page-bar {

background-color:333;

width:722px;

}



#page-bar ul {

list-style: none;

}



#page-bar li {

float:left;

list-style:none;

cursor: pointer;

display:block;

border-right:1px solid #333;

}



#page-bar li:hover {

background: #f25e00;

}





#page-bar a, #page-bar a:visited {

margin: 0px;

padding:10px 16px;

font-weight:bold;

color:#FFF;

display:block;

}



#page-bar a:hover {

text-decoration:none;

display:block;

}





#page-bar li {

float: left;

margin: 0px;

padding: 0px;

}



#page-bar li li {

float: left;

margin: 0px;

padding: 0px;

width: 122px;

text-transform:none;

}



#page-bar li li a, #page-bar li li a:link, #page-bar li li a:visited {

background: #2B2B2B;

width: 122px;

float: none;

margin: 0px;

padding: 5px 10px 5px 18px;

border-top: 1px solid #C0C0C0;

}



#page-bar li li a:hover, #page-bar li li a:active {

background: #666666;

padding: 5px 10px 5px 18px;

}



#page-bar li ul {

position: absolute;

width: 10em;

left: -999em;

}



#page-bar li:hover ul {

left: auto;

display: block;

}



#page-bar li:hover ul, #page-bar li.sfhover ul {

left: auto;

}



//-->

</style>

<ul id="page-bar">



<li><a href="/">Inicio</a></li>



<li><a href='#'>Tu Página</a>

<ul class="children">



<li class="cat-item"><a href='http://prometheos.es.tl/Gu%EDa.htm'>Cómo Empezar</a></li>

<li class="cat-item"><a href='http://prometheos.es.tl/Tu-p%E1gina.htm'>Consejos Útiles</a></li>

<li class="cat-item"><a href='http://prometheos.es.tl/Plantillas.htm'>Plantillas</a></li>

<li class="cat-item"><a href='http://prometheos.es.tl/Elige-tu-intro.htm'>Intros</a></li>

<li class="cat-item"><a href='http://prometheos.es.tl/Banners.htm'>Banners</a></li>

<li class="cat-item"><a href='http://prometheos.es.tl/Creador-de-banners.htm'>Widgets</a></li>

</ul></li>



<li><a href='#'>Comunidad</a>

<ul class="children">



<li class="cat-item"><a href='http://prometheos.es.tl/Foro/index.htm'>Foro</a></li>

<li class="cat-item"><a href='http://prometheos.es.tl/Links.htm'>Enlaces Recomendados</a></li>

<li class="cat-item"><a href='http://prometheos.es.tl/Ranking.htm'>Ránking de Páginas</a></li>

<li class="cat-item"><a href='http://prometheos.es.tl/Fotolog.htm'>Fotolog</a></li>

<li class="cat-item"><a href='http://prometheos.es.tl/Visitas.htm'>Libro de Visitas</a></li>

<li class="cat-item"><a href='http://prometheos.es.tl/Contacto.htm'>Contacto</a></li>

<li class="cat-item"><a href='http://prometheos.es.tl/Newsletter.htm'>Newsletter</a></li>

</ul></li>





<li><a href='http://mejoratupagina.blogspot.com/'>Blog</a></li>



<li><a href='http://prometheos.es.tl/Participa.htm'>Participa</a></li>



</ul>