problema con menu vertical jquery

esaenz22 · #1 (**permalink**) 04/01/2011, 16:37

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$(document).ready(function(){
    //When mouse roll over on menu icon
    $("li").mouseover(function(){
    //The below code is used to give animated effect to menu                           
        $(this).stop().animate({ 
        //Change the size of navigation menu to 152px                          
        width: "70px",
        //Time
      }, 500 );
    });
 
    //When mouse cursor removed from menu icon
    $("li").mouseout(function(){
        $(this).stop().animate({
        //Back to normal width 52px                        
        width: "40px",
      }, 500 );
    });
    
});

mi codigo css.

Código CSS:

Ver originaldiv#nav_menu {
    width:374px;
    height:auto;
}
 
ul#nav {
    margin:0;
    padding:0;
    list-style:none;
    clear:left;
}
 
ul#nav li {
    width:40px;
    height:25px;    
    display:block;
    background-color:#d4e8e7;
    list-style:none;
    font-family:Arial, Helvetica, sans-serif;
    color:#ef7a1a;
    font-size:14px;
    margin-bottom:10px;
}
 
ul#nav li a {
    color:#b7733b;
    text-decoration:none;
    margin-left:70px;
}
 
ul#nav li a.enlace {
    width:40px;
    background-color:#d4e8e7;
    text-decoration: none;
}

el html que muestra el menu.

Código HTML:

Ver original<div id="nav_menu">
<ul id="nav">
  <li class="enlace"><a href="#">Home</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</div>

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

saludos.

chicohot20 · #2 (**permalink**) 04/01/2011, 20:41

Este es el efecto que quieres lograr?

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head><title>Buu</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style>
div#nav_menu {
    width:200px;
    height:auto;
    overflow: hidden;
} 
ul#nav {
    margin:0;
    padding:0;
    list-style:none;
    clear:left;
} 
ul#nav li {
    width:200px;
    height:25px;
    background-color:#d4e8e7;
    font-family:Arial, Helvetica, sans-serif;
    color:#ef7a1a;
    font-size:14px;
    margin-bottom:10px;
}
 
ul#nav li a {
    color:#b7733b;
    display: block;
    text-decoration:none;
    background-color:  #EEEEEE;
    padding: 5px 0px 0px 30px;
    margin-left: 40px;
    width: 200px;
    height: 20px;
}
 
ul#nav li a.active {
    margin-left:70px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript"> 
$(document).ready(function(){
    $("#nav a").not(".active").hover(function(){                        
        $(this).stop().animate({                        
        marginLeft : "70px",
      }, 500 );
    },function(){
        $(this).stop().animate({                   
        marginLeft : "40px",
      }, 500 );
    });    
});
 
</script>
</head> 
<body>
<div id="nav_menu">
<ul id="nav">
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>

Probado en: IE8, Opera 10, Firefox 3.6.8

esaenz22 · #3 (**permalink**) 05/01/2011, 13:24

gracias por la respuesta chicohot20. lo he implementado y lo he probado en ie8, opera, firefox y safari.

saludos.

esaenz22 · #4 (**permalink**) 24/01/2011, 21:47

hola de nuevo. me he encontrado con un problema con el menu. en mi diseño cuando le cambio a background como none, no se mueve la barra de imagen, es decir, solo se mueve el texto. osea como haria para que se mueva tambien la barra de imagen con el texto cuando estoy hackiendo hover ?. por favor necesito de su ayuda.

saludos.

stingofung · #5 (**permalink**) 24/01/2011, 22:40

Saludos "esaenz22",

¿Tienes un link donde pueda ver el diseño completo donde incluyas las imagenes de tu sitio? De esta manera te puediera ayudar mejor.

esaenz22 · #6 (**permalink**) 25/01/2011, 14:05

gracias por responder stingofung. aqui te dejo mi codigo que he modificado.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>Menu Hover Vertical</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style>
div#nav_menu {
    width:374px;
    height:auto;
    overflow: hidden;
}
ul#nav {
    margin:0;
    padding:0;
    list-style:none;
    clear:left;
}
ul#nav li {
    width:60px;
    height:25px;
    background-color:#d78a56;
    font-family:Arial, Helvetica, sans-serif;
    color:#ef7a1a;
    font-size:12px;
    margin-bottom:10px;
}
ul#nav li.menu1 {
    width:70px;
    height:25px;
    background-color:#b7733b;
    font-family:Arial, Helvetica, sans-serif;
    color:#ef7a1a;
    font-size:12px;
    margin-bottom:10px;
}
ul#nav li.menu2 {
    width:70px;
    height:25px;
    background-color:#915618;
    font-family:Arial, Helvetica, sans-serif;
    color:#ef7a1a;
    font-size:12px;
    margin-bottom:10px;
}
ul#nav li.menu3 {
    width:70px;
    height:25px;
    background-color:#76461b;
    font-family:Arial, Helvetica, sans-serif;
    color:#ef7a1a;
    font-size:12px;
    margin-bottom:10px;
}
/* sufijos 
-top (superior), right (derecha), -bottom (inferior), left (izquierda): */ 
ul#nav li a {
    color:#d78a56;
    display: block;
    text-decoration:none;
    background:none;
/*  background-color:#FFFFFF;*/ /*comente el background porque de alli no se mueve la barra del menu.*/
    padding: 5px 0px 0px 12px;
    margin-left: 40px;
    width: 170px;
    height: 20px;
}
ul#nav li a.active {
    margin-left:70px;
}
</style>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript"> 
$(document).ready(function(){
    $("#nav a").not(".active").hover(function(){                        
        $(this).stop().animate({                        
        marginLeft : "60px",
      }, 500 );
    },function(){
        $(this).stop().animate({                   
        marginLeft : "40px",
      }, 500 );
    });    
});
 
</script>
</head>
<body>
<div id="nav_menu">
  <ul id="nav">
    <li><a href="#" class="active">accesories and casual piecies</a></li>
    <li class="menu1"><a href="#">dinning</a></li>
    <li class="menu2"><a href="#">bedroom</a></li>
    <li class="menu3"><a href="#">living area</a></li>
  </ul>
</div>
</body>
</html>

saludos.

stingofung · #7 (**permalink**) 25/01/2011, 17:28

Disculpa la demora "esaenz22",

Primero que todo: ¿Por que comentariaste la linea '61' background-color:#FFFFFF;? Esta linea debes dejarla activa ya que este es el fondo blanco que se mueve y hace la ilusión de que la barra se agranda y se encoge.

Por otro lado, tienes un error en el JAVASCRIPT, especificamente en las lineas '76' y '80'. Si te fijas bien hay una coma (,) de más y por lo tanto no se ejecutara la función ANIMATE(). Corrigiendo las dos lineas deberia quedarte algo como esto:

$(this).stop().animate({marginLeft:"60px"}, 500);

$(this).stop().animate({marginLeft: "40px"}, 500);

Corrige estas dos cosas y verás nuevamente el funcionamiento de tu menu.

Saludos...

esaenz22 · #8 (**permalink**) 26/01/2011, 08:42

gracias por tu respuesta stingofung. hice las correcciones que indicaste. solo tengo una duda.

Primero que todo: ¿Por que comentariaste la linea '61' background-color:#FFFFFF;? Esta linea debes dejarla activa ya que este es el fondo blanco que se mueve y hace la ilusión de que la barra se agranda y se encoge.

comente el background-color:#FFFFFF ya que queria probar si se movia la barra sin necesidad de colocarle el background. pero como me aclaraste que hace la ilusion de que la barra se agrade y se encoge.

no hay una manera de que se agrande y engoja la barra de imagen sin encesidad de colocarle el background ?.

saludos.

stingofung · #9 (**permalink**) 27/01/2011, 16:41

Saludos "esaenz22",

En tu ejemplo NO deberias comentariar la propiedad BACKGROUND debido a que no verás el efecto.

¿Realmente por que deseas comentariar el background, el body de tu pagina tiene un fondo diferente al blanco?

esaenz22 · #10 (**permalink**) 28/01/2011, 15:18

si. asi es stingogung.

saludos.

stingofung · #11 (**permalink**) 28/01/2011, 17:48

Saludos,

Bien, ¿de que color es el body de tu página?, o en su defecto, ¿estas usando una imagen como fondo de página?

Si tu respuesta a mi primera pregunta es si, ¿cual es el color en RGB?. Si por el contrario es la segunda, entonces alli si tendria que ver el diseño completo de la pagina y ver que se puede hacer.

esaenz22 · #12 (**permalink**) 29/01/2011, 14:41

gracias por responder stingofung. en realidad es un fondo blanco, pero el menu lo coloco en un div que tiene una imagen de fondo.

saludos.

stingofung · #13 (**permalink**) 29/01/2011, 21:20

Entiendo, tienes un link donde pueda ver tu proyecto en acción?

esaenz22 · #14 (**permalink**) 01/02/2011, 09:14

si. disculpa por la demora. aqui esta stingofung.

http://peruarteycolor.com/menu/

saludos.

esaenz22 · #15 (**permalink**) 06/02/2011, 12:36

hola. alguna ayuda ?.

saludos.