Menu Java Script - Jquery

Jessi11 · #1 (**permalink**) 22/02/2011, 19:52

Buenas, tengo una simple preguntita:

Estoy tratando de hacer un menú con jquery que en el hover se desplace suavemente hacia arriba, entonces bajé un código de un menú similar al que quiero, pero éste se desliza hacia la derecha y no hacia arriba como deseo.

Cita:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#social_nav_vertical li a').hover(function() {
$(this).stop().animate({ marginLeft: '20px' },300); // on Mouseover move to left
}, function() { //on Mouseout move back to original positon
$(this).stop().animate({ marginLeft: '0px' }, 300);
});

});
</script>

<style type="text/css">

#social_nav_vertical ul {
margin: 0;
padding: 0;
margin-top: 20px;
}
#social_nav_vertical ul li {
padding: 5px 0 0 5px;
margin-left: 5px;
list-style-type: none;
float:left
}

</style>
</head>

<body>

<div id="social_nav_vertical">
<ul>
<li> <a href="">Delicious</a></li>
<li><a href="">Facebook</a></li>
<li><a href=""> Stumble</a></li>
<li><a href="">Twitter</a></li>
</ul>
</div> 

</body>
</html>

Bueno, ahí esta el código, que tengo que editar para que en el hover se deslicen hacia arriba?
(No se nada de java script, aunque probé editar donde dice "marginleft" por "marginbottom pero no andubo :P )

Muchas Gracias!

MaxDgy · #2 (**permalink**) 22/02/2011, 21:06

Mirá este que está muy bueno, usa imagen pero creo que se puede adaptar de forma muy simple para lo que buscas.

Un poco del código del post original

Código Javascript:

Ver original// Begin jQuery
 
$(document).ready(function() {
 
/* =Reflection Nav
-------------------------------------------------------------------------- */   
 
    // Append span to each LI to add reflection
 
    $("#nav-reflection li").append(""); 
 
    // Animate buttons, move reflection and fade
 
    $("#nav-reflection a").hover(function() {
        $(this).stop().animate({ marginTop: "-10px" }, 200);
        $(this).parent().find("span").stop().animate({ marginTop: "18px", opacity: 0.25 }, 200);
    },function(){
        $(this).stop().animate({ marginTop: "0px" }, 300);
        $(this).parent().find("span").stop().animate({ marginTop: "1px", opacity: 1 }, 300);
    });
 
/* =Shadow Nav
-------------------------------------------------------------------------- */
 
    // Append shadow image to each LI
 
    $("#nav-shadow li").append('<img class="shadow" src="images/icons-shadow.jpg" alt="" width="81" height="27" />');
 
    // Animate buttons, shrink and fade shadow
 
    $("#nav-shadow li").hover(function() {
        var e = this;
        $(e).find("a").stop().animate({ marginTop: "-14px" }, 250, function() {
            $(e).find("a").animate({ marginTop: "-10px" }, 250);
        });
        $(e).find("img.shadow").stop().animate({ width: "80%", height: "20px", marginLeft: "8px", opacity: 0.25 }, 250);
    },function(){
        var e = this;
        $(e).find("a").stop().animate({ marginTop: "4px" }, 250, function() {
            $(e).find("a").animate({ marginTop: "0px" }, 250);
        });
        $(e).find("img.shadow").stop().animate({ width: "100%", height: "27px", marginLeft: "0px", opacity: 1 }, 250);
    });
 
// End jQuery
 
});

URL del post
http://www.adrianpelletier.com/2009/05/31/create-a-realistic-hover-effect-with-jquery-ui/

Demo
http://adrianpelletier.com/sandbox/jquery_hover_nav/

Ojalá te sea de utilidad. Saludos!

..