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