Hace rato que estoy usando Windows 7 como sistema operativo principal, y debo decir que APESTA tanto o más que Windows Vista, pero dejando de lado eso, en esta oportunidad les traigo un efecto bastante atractivo inspirándome en la nueva “super barra de tareas” de Windows 7.

El efecto consiste en “una luz que sigue al mouse” mientras lo movemos sobre el botón, algo que no se puede apreciar en la siguiente imagen, pero que si lo podemos hacer con la demo.

Creando la maqueta

La idea es la siguiente:

<span class="win7">
  <div></div>
  <a href="#">Button</a>
</span>

Pero para no ensuciar tanto el código HTML que tenemos que crear cada vez que queremos un botón, vamos a crear ese div por medio del javascript, de manera que nuestro código html real será el siguiente:

<span class="win7"><a href="#">Button</a></span>

CSS Code

.win7
{
  font-family:"Segoe UI", Arial, Helvetica, sans-serif;
  font-size:12px;

  position:relative;
  float:left;
  height:29px;
  width:100%;
  background:url('../images/nav-bg.png') repeat-x top left;
}

.win7 div
{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:29px;
  background:url('../images/active1.png') no-repeat center;
  z-index:0;
}

.win7 a
{
  line-height:29px;
  text-align:center;
  display:block;
  position:relative;
  padding:0 25px;
  z-index:2;
}

Ahora vamos a darle bordes redondeados:

span.win7
{
  width:auto;
  overflow:hidden;

  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;

  border:2px solid #deded2;
}

MooTools code

Iniciamos siempre despues de cargar el dom:

window.addEvent('domready', function() {

Internet Explorer 6 trabaja mal con el background, refrescándolo cada vez que el visitante mueve el mouse. “Afortunadamente“ existe un hack para decirle a IE que “use el cache” y no vuelva a pedir la imagen que ya ha sido cargada:

    if (Browser.Engine.trident4) {
      try { document.execCommand("BackgroundImageCache", false, true); }
      catch(err) {}
    }

Ahora vamos a recorrer el DOM en busca de todos los enlaces con la clase “win7″, y a cada enlace le agregamos el “div” y le asignamos el evento “mousemove” ajustando la posición del background relativo al mouse:

    $$('.win7 a').each(function(el) {

      el.win7BG = new Element('div', {'styles':{'opacity':0}}).injectBefore(el);
      el.win7BG.set('morph', {'duration':300});

      el.addEvent('mousemove', function (ev) {
        el.win7BG.setStyle('background-position', - ((600/2) - (ev.event.layerX||ev.event.offsetX||0))+'px top');
      });

Lo siguiente es para agregarle el efecto “fade”, aunque no es el objetivo principal de este artículo, queda muy bonito:

      el.addEvent('mouseenter', function (ev) {
        el.win7BG.morph({'opacity': 1});
      });

      el.addEvent('mouseout', function (ev) {
        el.win7BG.morph({'opacity': 0});
      });

    }); // end each

}); // end domready

Lo instalamos en nuestra página, agregando el siguiente código en el HEAD:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js"></script>

<script type="text/javascript" src="js/win7.js"></script>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="all" />

(acomoda las rutas a tu conveniencia).

jQuery code

Hacemos lo mismo que en mootools, sólo que con código de jQuery:

$(document).ready(function(){

  if ( document.all && !window.opera && !window.XMLHttpRequest && $.browser.msie ) {
    // stupid jquery ie6 detection
      try { document.execCommand("BackgroundImageCache", false, true); }
      catch(err) {}
  }

  $('.win7 a').each(function() {
    var el = $(this);

    el.win7BG = $(document.createElement('div')).css({'opacity': 0});
    el.win7BG.insertBefore(el);

    el.mousemove(function(ev) {
      el.win7BG.css({'background-position' : -((600/2) - (ev.originalEvent.layerX||ev.originalEvent.offsetX||0))+'px top'});
    });

    el.hover(
      function() {
        el.win7BG.stop().animate({'opacity':1},300);
      },
      function() {
        el.win7BG.stop().animate({'opacity':0},300);
      }
    );

  });
});

Lo instalamos en el HEAD de nuestra página:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="js/win7.js"></script>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="all" />

(acomoda las rutas a tu conveniencia).

Creando los Botones y el Menu

Para crear un menu:

<ul class="win7">
  <li><a href="#">Home</a></li>
</ul>

Para crear un botón:

<span class="win7"><a href="#">Button</a></span>

He agregado más clases con diferentes colores que puedes ver en la demo, pero la técnica sigue siendo la misma.

Demo

Puedes ver la demo en mootools como la demo en jQuery.