Hablando con un amigo me hizo recuerdo de este fantástico efecto de “Lavalamp” echo por Ganeshji Marwaha.
Y.. justamente ahora tengo un proyecto en Joomla! que hacer así que me dispuse a usar este asombroso efecto en el “Top Menú” de sitio e hice algunas pruebas en mi servidor local (localhost) para ver la complejidad de adaptar este plugin al menú de Joomla! y descubrí que no era complicado asi que ahora les posteo este mini tutorial de como agregarlo al “Template del Joomla“.
1.- Creamos el menú en y todos los items que necesitaremos en el mismo, en mi caso agregué 6 items de muestra para que se note más el efecto.
2.- Publicamos el módulo en la posición donde queremos que aparezca el menú (y el efecto XD) tenemos que tener en cuenta que solo lo usaremos de forma horizontal, también tenemos que agregar un “id” y una clase al la lista “UL” y debería quedar más o menos asi:
Como ven usé de ID “lavalamp” y de Class “_lavalamp” hice esto para que la estructura de nuestro menú quede así:
<div class="left">
<ul class="menu_lavalamp" id="lavalamp">
<li class="item16"><a href="#"><span>Home</span></a></li>
<li class="item17"><a href="#"><span>Quienes somos?</span></a></li>
<li class="item18"><a href="#"><span>Productos</span></a></li>
<li class="item19"><a href="#"><span>Noticias</span></a></li>
<li class="item20"><a href="#"><span>Reservas</span></a></li>
<li class="item21"><a href="#"><span>Contactos</span></a></li>
</ul>
</div>
Donde resaltaremos esto:
<ul class=”menu_lavalamp” id=”lavalamp” >
Que hará toda la magia, ahora solo nos queda agregar los JS y el CSS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/pruebas/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/pruebas/js/jquery.lavalamp.js"></script>
<script type="text/javascript">
$(function() {
$("#lavalamp").lavaLamp({
fx: "backout",
speed: 700,
});
});
</script>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/pruebas/css/template.css" type="text/css" />
Tip: Siempre es bueno usar las librerias hosteadas en otro servidor para reducir el tiempo de carga de la página.
Gracias a MATI que me hizo dar cuenta del bug que tenia el tutorial, modifiqué un poco el Script de “jquery.lavalamp.min.js” así que ahora lo que tiene que contener este .js es:
/**
* LavaLamp - A menu plugin for jQuery with cool hover effects.
* @requires jQuery v1.1.3.1 or above
*
* http://gmarwaha.com/blog/?p=7
*
* Copyright (c) 2007 Ganeshji Marwaha (gmarwaha.com)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Version: 0.2.0
* Requires Jquery 1.2.1 from version 0.2.0 onwards.
* For jquery 1.1.x, use version 0.1.0 of lavalamp
*
*
* Modify by Jorge A. Inturias C. for Jooomla Menu
* www.inturias.com
*
*/
(function($) {
$.fn.lavaLamp = function(o) {
o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});
return this.each(function() {
var me = $(this), noop = function(){},
$back = $('<li class="back"><div class="left"></div></li>').appendTo(me),
$li = $("li", this), curr = $("li.active", this)[0] || $($li[0]).addClass("current")[0];
$li.not(".back").hover(function() {
move(this);
}, noop);
$(this).hover(noop, function() {
move(curr);
});
$li.click(function(e) {
setCurr(this);
return o.click.apply(this, [e, this]);
});
setCurr(curr);
function setCurr(el) {
$back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" });
curr = el;
};
function move(el) {
$back.each(function() {
$(this).dequeue(); }
).animate({
width: el.offsetWidth,
left: el.offsetLeft
}, o.speed, o.fx);
};
});
};
})(jQuery);
No se guardar el codigo de arriba en: jquery.lavalamp.min.js.
Por ultimo cargaremos el CSS en el archivo “template.css” que usé yo para hacer la plantilla.
*{border:0;margin:none;padding:0}
.menu_lavalamp { position: relative; height: 29px; width:700px; background:#FF8400; padding: 15px; margin: 10px 0; overflow: hidden; border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px; }
.menu_lavalamp li { float: left; list-style: none; }
.menu_lavalamp li.back { background:#E57907;width: 9px; height: 30px; z-index: 8; position: absolute;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px; }
.menu_lavalamp li a { font: bold 14px arial; text-decoration: none; color: #fff; outline: none; text-align: center; top: 7px; text-transform: uppercase; letter-spacing: 0; z-index: 10; display: block; float: left; height: 30px; position: relative; overflow: hidden; margin: auto 10px; }
.menu_lavalamp li a:hover, .menu_lavalamp li a:active, .menu_lavalamp li a:visited { border: none; }
Tip: recuerden siempre usar un “reset” de elementos. ( Tips y Comentarios sobre como escribir correctamente CSS )
Use Css3 para hacer los bordes redondeados para evitar la carga de imagenes innecesarias XD ( Como crear bordes redondeados y transparentes con CSS3 )
Y listo eso es todo!
Todavía no lo subí a ningún servidor para que puedan ver el demo online pero les pongo un Screenshot de mi localhost en una plantilla varia pero funciona al 100%.
Demo | Demo Menú Joomla con Lavalamp
Comentarios?
