codigos de menu desplegable
<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> |
