...


Fx-Elements (Menú)

etiquetas | comentarios Sin

Es el menú de colorines que tengo en la cabecera de esta página.



Así lo hice:


  1. .- SCRIPTS:

    <script language='javascript' src='http://junioscripts.googlepages.com/mootools.svn.js' type='text/javascript'/>

    <script type='text/javascript'>

    window.addEvent(&#39;domready&#39;, function(){

    var szNormal = 117, szSmall = 100, szFull = 219;



    var kwicks = $$(&quot;#kwicks .kwick&quot;);

    var fx = new Fx.Elements(kwicks, {wait: false, duration: 300, transition: Fx.Transitions.Back.easeOut});

    kwicks.each(function(kwick, i) {

    kwick.addEvent(&quot;mouseenter&quot;, function(event) {

    var o = {};

    o[i] = {width: [kwick.getStyle(&quot;width&quot;).toInt(), szFull]}

    kwicks.each(function(other, j) {

    if(i != j) {

    var w = other.getStyle(&quot;width&quot;).toInt();

    if(w != szSmall) o[j] = {width: [w, szSmall]};

    }

    });

    fx.start(o);

    });

    });



    $(&quot;kwicks&quot;).addEvent(&quot;mouseleave&quot;, function(event) {

    var o = {};

    kwicks.each(function(kwick, i) {

    o[i] = {width: [kwick.getStyle(&quot;width&quot;).toInt(), szNormal]}

    });

    fx.start(o);

    })



    });

    </script>


  2. .- CSS:

    #kwicks_container {

    background-color: violet;

    height: 100px;

    }

    #kwicks {

    position: relative;

    }



    #kwicks .kwick {

    float: left;

    display: block;

    width: 117px;

    height: 100px;

    }



    #kwick_red {background-color: red;}

    #kwick_orange {background-color: orange;}

    #kwick_yellow {background-color: yellow;}

    #kwick_green {background-color: green;}

    #kwick_blue {background-color: blue;}

    #kwick_indigo {background-color: indigo; color: #fff; }

    #kwick_violet {background-color: violet;}






  3. .- HTML:

    <div id='kwicks_container'>

    <h1>TESTS</h1>

    <ul id='kwicks'>

    <li class='kwick' id='kwick_red'><a href='http://cafe-junio.blogspot.com/'><span>Epílogo</span></a></li>

    <li class='kwick' id='kwick_orange'><a href='http://cuentos-historias.blogspot.com/'><span>Revolutum</span></a></li>

    <li class='kwick' id='kwick_yellow'><a href='http://nada-junio.blogspot.com/'><span>Nada</span></a></li>

    <li class='kwick' id='kwick_green'><a href='http://hiperadri.blogspot.com/'><span>El Juego...</span></a></li>

    <li class='kwick' id='kwick_blue'><a href='http://imagen-junio.blogspot.com/'><span>Imagen</span></a></li>

    <li class='kwick' id='kwick_indigo'><a href='http://slideejemplo-junio.blogspot.com/'><span>Slide-Ejemolo</span></a></li>

    <li class='kwick' id='kwick_violet'><a href='http://jj-junio.blogspot.com/'><span>Inicio</span></a></li>

    </ul>

    <span class='clr'><!-- spanner --></span>

    </div>




Este menú es sólo un ejemplo... a mí me gusta más el que he confeccionado para IMAGEN

Web de referencia: MOOTOOLS

|Sin comentarios

Me aburro...

Slideshow (reformado)

    Ultimas entradas