Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje05-05-2013, 14:55 (UTC)    
Título del mensaje: Modificar Menu Vertical con Plantilla Clean-Popular

Hola!! por favor alguien sabe como modificar con la plantilla clean popular el menú vertical, quisiera colocar este que hice en esta pagina pero no se donde pegar el codigo porque el los espacios "arriba o abajo" se aplica donde no es.

Esta es la pagina:

http://cssmenumaker.com/builder/534203

y este es el codigo HTML del diseño que hice:

<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Pagina de inicio</span></a></li>
<li><a href='#'><span>Dublín</span></a></li>
<li><a href='#'><span>Nosotros</span></a></li>
<li><a href='#'><span>Nuestras Escuelas</span></a></li>
<li><a href='#'><span>Leinster College</span></a></li>
<li><a href='#'><span>CES</span></a></li>
<li><a href='#'><span>English Language School</span></a></li>
<li><a href='#'><span>Atlas Language School</span></a></li>
<li><a href='#'><span>VISTA RAPIDA</span></a></li>
<li><a href='#'><span>Formulario de Inscripción</span></a></li>
<li><a href='#'><span>Visa estudiantil</span></a></li>
<li><a href='#'><span>CADIVI</span></a></li>
<li><a href='#'><span>Archivo</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
<li class='last'><a href='#'><span>Titulo de nueva pagina</span></a></li>
</ul>
</div>


Y este el codigo CSS:

#cssmenu {
width: 125px;
margin: 0;
padding: 0;
display: block;
}
#cssmenu ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu ul li {
display: block;
float: left;
width: 100%;
margin: 0;
padding: 0;
background: transparent url(bg-bubplastic-button.gif) top left no-repeat;
}

#cssmenu ul li a {
display: block;
margin: 0;
width: 100%;
padding-left: 35px;
text-transform: uppercase;
font-family: 'Helvetica Neue',helvetica,'microsoft sans serif',arial,sans-serif;
font-size: 70%;
color: #FFFFFF;
text-decoration: none;
background: transparent url(bg-bubplastic-button.gif) top left no-repeat;
}

#cssmenu ul li a span {
display: block;
margin: 0;
width: 100%;
height: 22px;
padding-top: 5px;
padding-right: 35px;
background: transparent url(bg-bubplastic-button.gif) top right no-repeat;
cursor: pointer;
}

#cssmenu ul li a:hover,
#cssmenu ul li.active a {
background: transparent url(bg-bubplastic-h-red.gif) top left no-repeat;
}
#cssmenu ul li a:hover span,
#cssmenu ul li.active a span {
background: transparent url(bg-bubplastic-h-red.gif) top right no-repeat;
}



Agradezco mucho su ayuda!!
Mensaje05-05-2013, 17:06 (UTC)    
Título del mensaje:

Hola,
No puedes cambiar el menu de clean por uno externo. Este viene directamente pegado en el codigo fuente de tu pagina.
Aun asi, puedes colocar el menu de modo alternativo si gustas.
El codigo esta bien solo falta reemplazar las urls.

Te explico,
La url de la pagina de inicio la debes poner,

Cita:
<li class='active'><a href='index.html'><span>Pagina de inicio</span></a></li>


Los # los cambias por la url de cada pagina tambien,

Cita:
<li><a href='#'><span>Dublín</span></a></li>


Asi los vas reemplazando.
El primer codigo completo es el menu y utilizas este code para posicionarlo en cualquier parte de tu web,

Cita:
<div style="position:absolute;left:6px;top:350px;">
CÓDIGO DE TU MENÚ
</div>


left: izquierda
top: arriba

Esos son los valores para posicionarlo.

El segundo codigo es el css del menu.
Debes subir las imagenes que tienes en la carpeta que descargaste de css menu maker,
http://www.paginawebgratis.es/bilder.php

y luego reemplazar las urls, que te las marque en rojo

Cita:
#cssmenu {
width: 125px;
margin: 0;
padding: 0;
display: block;
}
#cssmenu ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu ul li {
display: block;
float: left;
width: 100%;
margin: 0;
padding: 0;
background: transparent url(bg-bubplastic-button.gif) top left no-repeat;
}

#cssmenu ul li a {
display: block;
margin: 0;
width: 100%;
padding-left: 35px;
text-transform: uppercase;
font-family: 'Helvetica Neue',helvetica,'microsoft sans serif',arial,sans-serif;
font-size: 70%;
color: #FFFFFF;
text-decoration: none;
background: transparent url(bg-bubplastic-button.gif) top left no-repeat;
}

#cssmenu ul li a span {
display: block;
margin: 0;
width: 100%;
height: 22px;
padding-top: 5px;
padding-right: 35px;
background: transparent url(bg-bubplastic-button.gif) top right no-repeat;
cursor: pointer;
}

#cssmenu ul li a:hover,
#cssmenu ul li.active a {
background: transparent url(bg-bubplastic-h-red.gif) top left no-repeat;
}
#cssmenu ul li a:hover span,
#cssmenu ul li.active a span {
background: transparent url(bg-bubplastic-h-red.gif) top right no-repeat;
}


Y ese codigo lo colocas en css code sin style tags, o bien en texto por encima entre las style tags,
Cita:
<style type"text/css">
Tu codigo css
</style>



Salu2!
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group