Tema: problema con menu vertical jquery
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 04/01/2011, 20:41
Avatar de chicohot20
chicohot20
 
Fecha de Ingreso: mayo-2009
Mensajes: 388
Antigüedad: 15 años
Puntos: 43
Respuesta: problema con menu vertical jquery
Este es el efecto que quieres lograr?
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><title>Buu</title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  5. <style>
  6. div#nav_menu {
  7.     width:200px;
  8.     height:auto;
  9.     overflow: hidden;
  10. } 
  11. ul#nav {
  12.     margin:0;
  13.     padding:0;
  14.     list-style:none;
  15.     clear:left;
  16. } 
  17. ul#nav li {
  18.     width:200px;
  19.     height:25px;
  20.     background-color:#d4e8e7;
  21.     font-family:Arial, Helvetica, sans-serif;
  22.     color:#ef7a1a;
  23.     font-size:14px;
  24.     margin-bottom:10px;
  25. }
  26.  
  27. ul#nav li a {
  28.     color:#b7733b;
  29.     display: block;
  30.     text-decoration:none;
  31.     background-color:  #EEEEEE;
  32.     padding: 5px 0px 0px 30px;
  33.     margin-left: 40px;
  34.     width: 200px;
  35.     height: 20px;
  36. }
  37.  
  38. ul#nav li a.active {
  39.     margin-left:70px;
  40. }
  41. </style>
  42. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
  43. <script type="text/javascript" language="javascript"> 
  44. $(document).ready(function(){
  45.     $("#nav a").not(".active").hover(function(){                        
  46.         $(this).stop().animate({                        
  47.         marginLeft : "70px",
  48.       }, 500 );
  49.     },function(){
  50.         $(this).stop().animate({                   
  51.         marginLeft : "40px",
  52.       }, 500 );
  53.     });    
  54. });
  55.  
  56. </script>
  57. </head> 
  58. <body>
  59. <div id="nav_menu">
  60. <ul id="nav">
  61.   <li><a href="#" class="active">Home</a></li>
  62.   <li><a href="#">Portfolio</a></li>
  63.   <li><a href="#">About</a></li>
  64.   <li><a href="#">Contact</a></li>
  65. </ul>
  66. </div>
  67. </body>
  68. </html>

Probado en: IE8, Opera 10, Firefox 3.6.8