Foros del Web » Creando para Internet » CSS »

Menu Horizontal Desplegable con margenes exandibles

Estas en el tema de Menu Horizontal Desplegable con margenes exandibles en el foro de CSS en Foros del Web. Estimados foreros lo que deseo es hacer un menu en css, horiznotal que se despliegue un submenu vertical pero que cuando es muy grande para ...
  #1 (permalink)  
Antiguo 16/04/2009, 14:31
Avatar de marweb  
Fecha de Ingreso: marzo-2007
Ubicación: Ciudad de Panama
Mensajes: 125
Antigüedad: 17 años, 7 meses
Puntos: 1
De acuerdo Menu Horizontal Desplegable con margenes exandibles

Estimados foreros lo que deseo es hacer un menu en css, horiznotal que se despliegue un submenu vertical pero que cuando es muy grande para abajo mas que la pantalla me salga como una flecha para abajo y se vaya moviendo cuando llega abajo que arriba salga otra flecha para subir nuevamente al top. Sera eso posible. Algunos programas lo tienen no se si en css con javascript se pueda hacer.

Cualquier sugerencia saludos.
__________________
Mario Rios - Webmaster
Diseño web en panama / Real Estate / Abogados de Panama
  #2 (permalink)  
Antiguo 26/04/2009, 13:44
 
Fecha de Ingreso: abril-2009
Ubicación: Santa Fe, Capital
Mensajes: 38
Antigüedad: 15 años, 7 meses
Puntos: 0
Sonrisa Respuesta: Menu Horizontal Desplegable con margenes exandibles

Podes usar lo siguiente lo saque de una pagina, no lo revise bien pero funciona, no se si es lo que quería pero te lo paso.

Code CSS

div.sc_menu {
/* Set it so we could calculate the offsetLeft */
position: relative;
height: 75px;
width: 150px;
/* Add scroll-bars */
overflow: auto;
}
ul.sc_menu {
display: block;
height: 40px;
/* Max width here, for users without Javascript */
width: 1500px;
padding: 15px 0 0 15px;
/* Remove default margin */
margin: 0;
list-style: none;
}
.sc_menu li {
display: block;
float: left;
padding: 0 4px;
}
.sc_menu a {
display: block;
text-decoration: none;
}
.sc_menu span {
/* We want a caption to display on the next line */
display: block;
margin-top: 3px;
text-align: center;
font-size: 12px;
color: #fff;
}

Code HTML
<div class="sc_menu">
<ul class="sc_menu">
<li><a href="#">
<img src="img/1.jpg" alt="Menu"/><span>Menu</span>
</a></li>
<li><a href="#">
<img src="img/2.jpg" alt="Navigation"/><span>Navigation</span>
</a></li>
<li><a href="#">
<img src="img/3.jpg" alt="Scrolling"/><span>Scrolling</span>
</a></li>
<li><a href="#">
<img src="img/4.jpg" alt="jQuery"/><span>jQuery</span>
</a></li>
</ul>
</div>

Última edición por PanchoJ; 26/04/2009 a las 14:16
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 21:55.