Efecto rollover en menu con Jquery?

Telúrico · #1 (**permalink**) 13/05/2011, 02:39

Hola muuuy buenas!

Queria hacer un efecto en el menu de la web que estoy haciendo para un cliente que hiciera lo siguiente:

http://jquery-menu.com/es/ejemplos-c...qgrid-php.html

No me interesa el menu desplegable, si no que lo que me interesa es el efecto brillo que se mueve dependiendo de donde se stue el ratón.

¿Alguien sabe como se llama ese efecto o de donde puedo descargar un ejemplo o tutorial?

Muuuchas gracias de antemano :)

Telúrico · #2 (**permalink**) 13/05/2011, 05:23

Bueno, veo que me han movido el tema de foro. Pido disclpas por haberlo puesto donde no era :)

masterpuppet · #3 (**permalink**) 13/05/2011, 05:25

El efecto se llama lavalamp y el que estas mostrando es este.

Saludos.

Dany_s · #4 (**permalink**) 13/05/2011, 09:43

yo hice esto si te sirve

lo que hace en la función mover es tomar el ancho del li, el ancho de div #efecto, restar los valores y dicidirlo por 2 asi obtengo los limites o lo que sobra a la izquierda y derecha del div #efecto, al sumarlo con la posición izquierda de un li sumo ese valor y queda posicionado en el centro del li

no se si se entiende :S

podes darle estilos a tu gusto y el div #efecto podes ponerle una imagen con fondo transparente o iluminado

Código Javascript:

Ver original<html>
    <head>
        <title>Ejemplo</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script>
 
            $( function(){
                    
                    lista = $('#menu li');
 
                    lista.mouseover( function(){
                        mover($(this));
                    }).click( function(){
                        lista.removeClass('seleccionado');
                        $(this).addClass('seleccionado');
                    });
                    
                    $('#menu ul').mouseleave( function(){
                        mover($('#menu li.seleccionado'));
                    });
 
                    $('#menu li.seleccionado').trigger('mouseover');
 
                    function mover(li){
                        var tamanoLi = li.outerWidth();
                        var tamanoEfecto = $('#efecto').outerWidth();
                        var sobrante = (tamanoLi - tamanoEfecto) / 2;
                        var posLeft = li.offset().left;
                        var mover = posLeft + sobrante;
                        $('#efecto').stop().animate({'left':mover}, 500);
                    }
 
            });
 
 
 
    </script>
 
    <style>
 
    body {
        margin:50px
    }
 
    #menu{
        background:#ccc;
        height:50px;
        width:500px;
    }
 
    #menu ul {
        list-style:none;
        margin:0;
        padding:0;
    }
 
    #menu li {
        float:left;
        padding:10px;
        width:100px;
        text-align:center;
        position:relative;
        cursor:pointer;
    }
 
    #efecto {
        position:absolute;
        width:50px;
        height:50px;
    }
 
    #menu .seleccionado{
        font-weight:600
    }
 
    </style>
 
</head>
<body>
 
    <div id="menu">
        <div id="efecto">
            <img src="http://www.gloriacalero.com/wp-content/uploads/2010/07/button-9458.png" />
        </div>
        <ul>
            <li class="seleccionado">Uno</li>
            <li>Dos</li>
            <li>Tres</li>
            <li>Cuatro</li>
        </ul>
    </div>
 
</body>
</html>

Telúrico · #5 (**permalink**) 13/05/2011, 11:45

Muchas gracias por decirme como se llama masterpuppet, y por el link, de hecho ese link lo habia encontrado... pero lo habia perdido xD. Asique muchas gracias.

Y bueno, tambien muchisimas gracias a Dany_s por ese codigo, es practicamente lo que busco, solo una duda.

En mi caso queria hacerlo para un menú lateral, no vertical, que código habria uqe cambiar en el que me mandaste? estuve mirando pero no se bien que habria que modificar. :(

Dany_s · #6 (**permalink**) 13/05/2011, 17:05

sacas el float left de la lista, el tamaño de alto del div #efecto lo podés poner del mismo tamaño que el de las opciones asi ubicás el dibujo donde quieras para no tener que andar calculando entonces lo decis que se mueva a la posición top del li

Código Javascript:

Ver original<html>
    <head>
        <title>Ejemplo</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script>
 
            $( function(){
 
                    lista = $('#menu li');
 
                    lista.mouseover( function(){
                        mover($(this));
                    }).click( function(){
                        lista.removeClass('seleccionado');
                        $(this).addClass('seleccionado');
                    });
 
                    $('#menu ul').mouseleave( function(){
                        mover($('#menu li.seleccionado'));
                    });
 
                    $('#menu li.seleccionado').trigger('mouseover');
 
                    function mover(li){
                        var mover = li.offset().top;
                        $('#efecto').stop().animate({'top':mover}, 500);
                    }
 
            });
 
 
 
    </script>
 
    <style>
 
    body {
        margin:50px
    }
 
    #menu{
        background:#ccc;
        width: 150px
    }
 
    #menu ul {
        list-style:none;
        margin:0;
        padding:0;
    }
 
    #menu li {
        padding:10px;
        width:100px;
        height: 50px;
        text-align:center;
        position:relative;
        cursor:pointer;
    }
 
    #efecto {
        position:absolute;
        width:50px;
        height:50px;
        margin-left: 35px;
    }
 
    #menu .seleccionado{
        font-weight:600
    }
 
    </style>
 
</head>
<body>
 
    <div id="menu">
        <div id="efecto">
            <img src="http://www.gloriacalero.com/wp-content/uploads/2010/07/button-9458.png" />
        </div>
        <ul>
            <li class="seleccionado">Uno</li>
            <li>Dos</li>
            <li>Tres</li>
            <li>Cuatro</li>
        </ul>
    </div>
 
</body>
</html>

porqué no mejor usar el plugin que te pasó masterpuppet?

hay varios ejemplos http://nixboxdesigns.com/projects/jq.../original.html

Telúrico · #7 (**permalink**) 14/05/2011, 03:35

Muchas gracias por la explicacion Dany_s. Voy a probarlo a ver que tal. Y como bien dices, el link que me pasó masterpuppet tambien esta genial, pero me conozco, y el tuyo lo habia probado y me funcionaba bien, entonces para ir sobre seguro, de todas formas me quedo con las dos opciones :)

Mil gracias a los dos!!