Ver Mensaje Individual
  #1 (permalink)  
Antiguo 04/01/2011, 16:37
esaenz22
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 16 años, 7 meses
Puntos: 7
Pregunta problema con menu vertical jquery

buenas tardes. no se si este sea el foro correcto para hacer mi consulta, ya que mi menu vertical esta basando tambien en css. bueno. estoy haciendo un menu vertical animado con jquery basandome en un menu flash que se habia desarollado.

el problema es cuando le paso el hover al item, los textos se desaparecen. es como si lo ocultara.

tambien quiero que se active el primer item y que aumente de tamaño. los demas items deben quedar como estan.

este es mi codigo de jquery que hace el efecto.

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.     //When mouse roll over on menu icon
  3.     $("li").mouseover(function(){
  4.     //The below code is used to give animated effect to menu                           
  5.         $(this).stop().animate({
  6.         //Change the size of navigation menu to 152px                          
  7.         width: "70px",
  8.         //Time
  9.       }, 500 );
  10.     });
  11.  
  12.     //When mouse cursor removed from menu icon
  13.     $("li").mouseout(function(){
  14.         $(this).stop().animate({
  15.         //Back to normal width 52px                        
  16.         width: "40px",
  17.       }, 500 );
  18.     });
  19.    
  20. });

mi codigo css.

Código CSS:
Ver original
  1. div#nav_menu {
  2.     width:374px;
  3.     height:auto;
  4. }
  5.  
  6. ul#nav {
  7.     margin:0;
  8.     padding:0;
  9.     list-style:none;
  10.     clear:left;
  11. }
  12.  
  13. ul#nav li {
  14.     width:40px;
  15.     height:25px;   
  16.     display:block;
  17.     background-color:#d4e8e7;
  18.     list-style:none;
  19.     font-family:Arial, Helvetica, sans-serif;
  20.     color:#ef7a1a;
  21.     font-size:14px;
  22.     margin-bottom:10px;
  23. }
  24.  
  25. ul#nav li a {
  26.     color:#b7733b;
  27.     text-decoration:none;
  28.     margin-left:70px;
  29. }
  30.  
  31. ul#nav li a.enlace {
  32.     width:40px;
  33.     background-color:#d4e8e7;
  34.     text-decoration: none;
  35. }


el html que muestra el menu.

Código HTML:
Ver original
  1. <div id="nav_menu">
  2. <ul id="nav">
  3.   <li class="enlace"><a href="#">Home</a></li>
  4.   <li><a href="#">Portfolio</a></li>
  5.   <li><a href="#">About</a></li>
  6.   <li><a href="#">Contact</a></li>
  7. </ul>
  8. </div>

si este tema no pertenece al foro, muevanlo por favor.

saludos.