Menu que se mueve con flechitas

kkuertt · #1 (**permalink**) 03/02/2012, 15:14

Hola buenas,

Quiero hacer un menu del tipo:

< 1 2 3 4 5 6 7 8 9 10 11 12 >

Pero me gustaria que dentro de < > solo se vean por ejemplo 7 numeros, y clickando en las flechitas se muevan los numeros dentro para asi poder seleccionar los numeros que no se ven.

Alguna idea de como se podria hacer?

Muchas gracias

Saludos foreros!

kkuertt · #2 (**permalink**) 04/02/2012, 04:15

Supongo que poniendo los numeros en un div que no entren todos, y con javascript mover el conteido del div, se podria hacer...

Pero, como puedo mover el contenido de un div en javascript?

Gracias

Saludos!

MARCASTELEON · #3 (**permalink**) 04/02/2012, 11:55

Hola, te dejo este ejemplo completo

Código HTML:

Ver originalCopiar<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
 
<script>
//configuracion
desplazamiento={
paso:5,//cantidad de pixeles que desplaza el contenido por vez
eje:"x",//eje en el que se va a realizar el desplazamiento(y ó x)
idIzqArr:"la",//id del objeto que activa el desplazamiento hacia la izquierda o arriba
idDerAba:"ra",//id del objeto que activa el desplazamiento hacia la derecha o abajo
idObj:"menu",//id del elemento que va a ser desplazado
    }
 
window.onload=function(){
document.getElementById(desplazamiento.idIzqArr).onclick=desplazar;
document.getElementById(desplazamiento.idDerAba).onclick=desplazar; }
                        
function desplazar(){
var obj=document.getElementById(desplazamiento.idObj);
(desplazamiento.eje=="x")?obj.scrollLeft+=(this.id==desplazamiento.idIzqArr)?desplazamiento.paso*-1:desplazamiento.paso:obj.scrollTop+=(this.id==desplazamiento.idIzqArr)?desplazamiento.paso*-1:desplazamiento.paso; }
 
</script>
 
 
<style>
 
.a{ float:left; margin:0px 5px; cursor:pointer;}
 
#menu{ float:left; width:50px; height:20px; background-color:#CCCCCC; overflow:hidden;}
 
#elementos{ width:105px;; list-style:none; margin:0px; padding:0px;}
 
#elementos li{ display:inline;}
 
</style>
 
 
</head>
 
 
 
<body>
 
<div id="la" class="a">&lt;</div>
<div id="menu">
    <ul id="elementos">
       <li>
         <a href="#">1</a>
       </li>
       <li>
         <a href="#">2</a>
       </li>
       <li>
         <a href="#">3</a>
       </li>
       <li>
         <a href="#">4</a>
       </li>
       <li>
         <a href="#">5</a>
       </li>
       <li>
         <a href="#">6</a>
       </li>
       <li>
         <a href="#">7</a>
       </li>
       <li>
         <a href="#">8</a>
       </li>
       <li>
         <a href="#">9</a>
       </li>
       <li>
         <a href="#">10</a>
       </li>
       <li>
         <a href="#">11</a>
       </li>
       <li>
         <a href="#">12</a>
       </li>
       <li>
         <a href="#">13</a>
       </li>
       <li>
         <a href="#">14</a>
       </li>
       <li>
         <a href="#">15</a>
       </li>
       <li>
         <a href="#">16</a>
       </li>
       <li>
         <a href="#">17</a>
       </li>
       <li>
         <a href="#">18</a>
       </li>
    </ul>
</div>
<div id="ra" class="a">&gt;</div>
 
</body>
</html>

al darle click a las flechas mueve la distancia indicada por "paso" una vez, tambien hay algunas opciones(configuracion). Si necesitas mas ayuda o tienes preguntas sobre el codigo no dudes en preguntar.

puedes dar una vista previa http://jsfiddle.net/MARCASTELEON/gxe2R/1/