Tema: Menu scroll horizontal desplegable
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 05/08/2010, 15:17
TheDark03
 
Fecha de Ingreso: mayo-2010
Ubicación: Lima, Peru.
Mensajes: 176
Antigüedad: 14 años, 5 meses
Puntos: 6
Respuesta: Menu scroll horizontal desplegable
Holas...

hace unos dias tenia q hacer algo similar y esto es lo q use de referencia

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Prueba vertical</title>
  6. <script type="text/javascript" language="javascript" src="jquery.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function()
  9. {
  10.     $("#secondpane p.vertical_head").mouseover(function()
  11.     {
  12.          $(this).css({backgroundImage:"url(down.png)"}).next("div.vertical_body").slideDown(500).siblings("div.vertical_body").slideUp("slow");
  13.          $(this).siblings().css({backgroundImage:"url(left.png)"});
  14.     });
  15. });
  16. </script>
  17. <style type="text/css">
  18. body {
  19.     margin: 10px auto;
  20.     font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
  21. }
  22. .vertical_list {    
  23.     width: 150px;
  24. }
  25. .vertical_head {
  26.     padding: 5px 10px;
  27.     cursor: pointer;
  28.     position: relative;
  29.     margin:1px;
  30.     font-weight:bold;
  31.     background: #eef4d3 url(left.png) center right no-repeat;
  32. }
  33. .vertical_body {
  34.     display:none;
  35. }
  36. .vertical_body a{
  37.   display:block;
  38.   color:#006699;
  39.   background-color:#EFEFEF;
  40.   padding-left:10px;
  41.   font-weight:bold;
  42.   text-decoration:none;
  43. }
  44. .vertical_body a:hover{
  45.   color: #000000;
  46.   text-decoration:underline;
  47.   }
  48. </style>
  49. </head>
  50. <body>
  51.  
  52.   <div class="vertical_list" id="secondpane"> <!--Code for vertical starts here-->
  53.         <p class="vertical_head">Header-1</p>
  54.         <div class="vertical_body">
  55.         <a href="#">Link-1</a>
  56.          <a href="#">Link-2</a>
  57.          <a href="#">Link-3</a> 
  58.         </div>
  59.         <p class="vertical_head">Header-2</p>
  60.         <div class="vertical_body">
  61.             <a href="#">Link-1</a>
  62.          <a href="#">Link-2</a>
  63.          <a href="#">Link-3</a> 
  64.         </div>
  65.         <p class="vertical_head">Header-3</p>
  66.         <div class="vertical_body">
  67.           <a href="#">Link-1</a>
  68.          <a href="#">Link-2</a>
  69.          <a href="#">Link-3</a>         
  70.        </div>
  71.   </div>  
  72.  
  73. </body>
  74. </html>

no se como ponerte el jquery mejor te pongo la version y te la descargas es la 1.2.3 o sino me dices una forma de pasartelo

Saludos.. espero q te sirva