|
¿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" class="left clearfloat">
<li><a href="/?PHPSESSID=0ad3a60afe9c7471addbe9f068761985">Inicio</a></li>
<li><a href='#'>Lu Página</a>
<ul class="children">
<li><a href="peliculas.htm">Peliculas</a></li>
<li><a href="musica.htm">Musica</a></li>
<li><a href="programas.htm">Programas</a></li>
<li><a href="juegos.htm">Juegos</a></li>
<li><a href="hipnosis.htm">Hipnosis</a></li>
<li><a href="suscribete.htm">Suscribete!</a></li>
</ul></li>
<li><a href='#'>Musica</a>
<ul class="children">
<li><a href="rock.htm">Rock</a></li>
<li><a href="rock-nacional.htm">Rock Nacional</a></li>
<li><a href="rock-and-pop.htm">Rock And Pop</a></li>
<li><a href="cumbia-villera.htm">Cumbia Villera</a></li>
</ul></li>
<li><a href='http://todo-para-descargar.es.tl/juegos.htm'>Juegos</a></li>
<li><a href='http://todo-para-descargar.es.tl/subir-archivos.htm'>Subir Archivos!</a></li>
<li><a href='http://todo-para-descargar.es.tl/contactenos.htm'>Contactenos</a></li>
<li><a href='http://todo-para-descargar.es.tl/suscribete.htm'>Suscribete</a></li>
<li><a href='http://todo-para-descargar.foroactivo.net/'>Foro!</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.
este es el codigo:
<style type="text/css">
<!--
/* Menú desplegable por todo-para-descargar.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>
</head>
<body id="hpb_cssonly">
<table height="27">
<tr>
<td height="27" valign="middle">
</a></span></td>
<ul id="page-bar" class="left clearfloat">
<li><a href="/?PHPSESSID=0ad3a60afe9c7471addbe9f068761985">Inicio</a></li>
<li><a href='#'>Lu Página</a>
<ul class="children">
<li><a href="peliculas.htm">Peliculas</a></li>
<li><a href="musica.htm">Musica</a></li>
<li><a href="programas.htm">Programas</a></li>
<li><a href="juegos.htm">Juegos</a></li>
<li><a href="hipnosis.htm">Hipnosis</a></li>
<li><a href="suscribete.htm">Suscribete!</a></li>
</ul></li>
<li><a href='#'>Musica</a>
<ul class="children">
<li><a href="rock.htm">Rock</a></li>
<li><a href="rock-nacional.htm">Rock Nacional</a></li>
<li><a href="rock-and-pop.htm">Rock And Pop</a></li>
<li><a href="cumbia-villera.htm">Cumbia Villera</a></li>
</ul></li>
<li><a href='http://todo-para-descargar.es.tl/juegos.htm'>Juegos</a></li>
<li><a href='http://todo-para-descargar.es.tl/subir-archivos.htm'>Subir Archivos!</a></li>
<li><a href='http://todo-para-descargar.es.tl/contactenos.htm'>Contactenos</a></li>
<li><a href='http://todo-para-descargar.es.tl/suscribete.htm'>Suscribete</a></li>
<li><a href='http://todo-para-descargar.foroactivo.net/'>Foro!</a></li>
</ul>
ATENCION!
ustedes solo tienen que cambiar el link y los nombres.
PARA COPIAR EL CODIGO APRETA (Ctrl + c) y PARA PEGARLO (CTRL + V)
|
