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.