Tema: problema con menu vertical jquery
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 25/01/2011, 14:05
esaenz22
(Desactivado)
  
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 16 años, 7 meses
Puntos: 7
Respuesta: problema con menu vertical jquery
gracias por responder stingofung. aqui te dejo mi codigo que he modificado.

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
  3. <head>
  4. <title>Menu Hover Vertical</title>
  5. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  6. <style>
  7. div#nav_menu {
  8.     width:374px;
  9.     height:auto;
  10.     overflow: hidden;
  11. }
  12. ul#nav {
  13.     margin:0;
  14.     padding:0;
  15.     list-style:none;
  16.     clear:left;
  17. }
  18. ul#nav li {
  19.     width:60px;
  20.     height:25px;
  21.     background-color:#d78a56;
  22.     font-family:Arial, Helvetica, sans-serif;
  23.     color:#ef7a1a;
  24.     font-size:12px;
  25.     margin-bottom:10px;
  26. }
  27. ul#nav li.menu1 {
  28.     width:70px;
  29.     height:25px;
  30.     background-color:#b7733b;
  31.     font-family:Arial, Helvetica, sans-serif;
  32.     color:#ef7a1a;
  33.     font-size:12px;
  34.     margin-bottom:10px;
  35. }
  36. ul#nav li.menu2 {
  37.     width:70px;
  38.     height:25px;
  39.     background-color:#915618;
  40.     font-family:Arial, Helvetica, sans-serif;
  41.     color:#ef7a1a;
  42.     font-size:12px;
  43.     margin-bottom:10px;
  44. }
  45. ul#nav li.menu3 {
  46.     width:70px;
  47.     height:25px;
  48.     background-color:#76461b;
  49.     font-family:Arial, Helvetica, sans-serif;
  50.     color:#ef7a1a;
  51.     font-size:12px;
  52.     margin-bottom:10px;
  53. }
  54. /* sufijos 
  55. -top (superior), right (derecha), -bottom (inferior), left (izquierda): */ 
  56. ul#nav li a {
  57.     color:#d78a56;
  58.     display: block;
  59.     text-decoration:none;
  60.     background:none;
  61. /*  background-color:#FFFFFF;*/ /*comente el background porque de alli no se mueve la barra del menu.*/
  62.     padding: 5px 0px 0px 12px;
  63.     margin-left: 40px;
  64.     width: 170px;
  65.     height: 20px;
  66. }
  67. ul#nav li a.active {
  68.     margin-left:70px;
  69. }
  70. </style>
  71. <script src="jquery-1.2.6.min.js" type="text/javascript"></script>
  72. <script type="text/javascript" language="javascript"> 
  73. $(document).ready(function(){
  74.     $("#nav a").not(".active").hover(function(){                        
  75.         $(this).stop().animate({                        
  76.         marginLeft : "60px",
  77.       }, 500 );
  78.     },function(){
  79.         $(this).stop().animate({                   
  80.         marginLeft : "40px",
  81.       }, 500 );
  82.     });    
  83. });
  84.  
  85. </script>
  86. </head>
  87. <body>
  88. <div id="nav_menu">
  89.   <ul id="nav">
  90.     <li><a href="#" class="active">accesories and casual piecies</a></li>
  91.     <li class="menu1"><a href="#">dinning</a></li>
  92.     <li class="menu2"><a href="#">bedroom</a></li>
  93.     <li class="menu3"><a href="#">living area</a></li>
  94.   </ul>
  95. </div>
  96. </body>
  97. </html>

saludos.
Última edición por esaenz22; 25/01/2011 a las 14:06 Razón: correccion.