Foros del Web » Creando para Internet » CSS »

Ayuda con menu CSS

Estas en el tema de Ayuda con menu CSS en el foro de CSS en Foros del Web. Hola! Les cuento mi problema, tengo que hacer un menu desplegable que muestre 5 items, ejemplo: Menu1-Menu2-Menu3-Menu4-Menu5 y que tenga la posilidad de poner un ...
  #1 (permalink)  
Antiguo 22/01/2009, 08:31
Avatar de mdague  
Fecha de Ingreso: septiembre-2008
Ubicación: Montevideo
Mensajes: 14
Antigüedad: 9 años, 3 meses
Puntos: 0
Ayuda con menu CSS

Hola!
Les cuento mi problema, tengo que hacer un menu desplegable que muestre 5 items,
ejemplo: Menu1-Menu2-Menu3-Menu4-Menu5
y que tenga la posilidad de poner un sexto menu... pero este tiene que estar oculto, y cuando haga clik en una flechita al costado q se me deslize el menu hacia la izquierda y aparece el sexto elemento.
Nose si fui claro.
Menu1-Menu2-Menu3-Menu4-Menu5 >> (hago clik en la flechita)
<<Menu2-Menu3-Menu4-Menu5-Menu6

Algo asi seria el menu..
Gracias!
  #2 (permalink)  
Antiguo 22/01/2009, 09:02
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Ayuda con menu CSS

Confunden los problemas de javascript con problemas de CSS. No hay ningún evento ONCLICK en CSS. Solamente el evento Hover que es parecido al onmouseOver, si fuera asi sería más fácil todo.

Veamos tu problema es sencillo haríamos lo siguiente:

Crear un div contenedor del menú. Van a ser seis botones, asi que digamos que tu menu va a tener 600 pixeles de ancho. Cien por cada item, entonces. nuestro contenedor tendrá solamente 500 pixeles de ancho ¿Por qué? ahorita verás.

Le daremos los siguientes estilos CSS:

Código:
#contenedor{
position:relative;
width:500px;
height:20px; (es un decir, ponlo del tamaño que quieras).
overflow:hidden; (Esto es MUY importante)
}
Y ahora tu lista de menú, no voy a poner las especificaciones de la lista, voy a tratarla como un div. Ya tu especificas los estilos, solamente los que son necesarios te pongo aqui:

Código:
#lista{
position:absolute;
width:600px;
height:20px;(Un decir tío).
margin-left:0;
}
Listo, ahora tienes un menú cortado en 500 pixeles. Y hacemos lo siguiente con javascript:

Código:
<script type="text/javascript">
var movimiento = 0;
var aumento = 10;
function mover(){
var memuevo = document.getElementById('lista');
movimiento += aumento;
if (!(movimiento>=110)){
memuevo.style.marginLeft = "-" + movimiento + "px"
window.setTimeout('mover();',50)
}
}
</script>

Y la llamada sería (En la flechita) Digamos que es un span para mi:
<span onclick="mover();">
Y listo, tienes tu flechita de movimiento. Ahora el método inverso para que la otra flechita te regrese sería:


Código:
<script type="text/javascript">

function volver(){
var memuevo2 = document.getElementById('lista');
movimiento -= aumento;
if (!(movimiento<=-10)){
memuevo2.style.marginLeft = "-" + movimiento + "px"
window.setTimeout('volver();',50)
}
}
</script>

Y la llamada sería :
<span onclick="volver();">
Algún problema me avisas por MP.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #3 (permalink)  
Antiguo 22/01/2009, 09:17
Avatar de mdague  
Fecha de Ingreso: septiembre-2008
Ubicación: Montevideo
Mensajes: 14
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Ayuda con menu CSS

muchisimas gracias por la rapida respuesta!.
Ya mismo lo estoy probando.. Cualquier duda que tenga te mande un mensaje por MP.

Gracias!
  #4 (permalink)  
Antiguo 22/01/2009, 17:59
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Ayuda con menu CSS

Cita:
Iniciado por Dalvenjha Ver Mensaje
Confunden los problemas de javascript con problemas de CSS. No hay ningún evento ONCLICK en CSS. Solamente el evento Hover que es parecido al onmouseOver, si fuera asi sería más fácil todo.
Bueno, en realidad el onclick se asimilaría al active (IE) o focus (resto), no al hover, que sería onmouseover.
Lo que CSS no pudede hacer es derrollar un evento a lo largo de una línea temporal como javascript, porque no tiene capacidad para ello, así que nunca puede deslizar ni cosas así, pero hacer aparecer o desaparecer (de manera no persistente), sí puede.
__________________
Visita mi nueva web idplus.org
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




La zona horaria es GMT -6. Ahora son las 09:51.