Ayuda con menu CSS

[mdague]

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!

[Dalvenjha]

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.

[mdague]

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

Gracias!

[Mikmoro]

Iniciado por Dalvenjha

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.