Lo prometido es deuda aquí esta  el DEMO que prometí del tutorial de Como usar el efecto “Lavalamp” en el menú de Joomla!?.

Tutorial | Como usar el efecto “Lavalamp” en el menú de Joomla!? Fixed!

Demo | Demo de Lavalamp en el Menú de Joomla!

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?

Al momento de crear nuevos Themes para WordPress puede que sea necesario añadir un elegante dropdown, en el menú del sitio.

Ahora bien como normalmente se cargan las páginas en el menú usando la funcion “wp_list_pages()” será este lo que usare en el ejemplo.

Primeramente añadiremos el jQuery  y el script en el header.

<?php wp_enqueue_script('jquery'); ?>

<script type='text/javascript'>
 jQuery(document).ready(function() {
  jQuery("#dropmenu ul").css({display: "none"}); // Opera Fix
 jQuery("#dropmenu li").hover(function(){
  jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(268);
 },function(){
  jQuery(this).find('ul:first').css({visibility: "hidden"});
});
});
</script>

Ahora bien añadiremos la funcion que carga en lista las páginas del sitio en el lugar que corresponda el menú.

<ul id="dropmenu">
<?php wp_list_pages('sort_column=menu_order&amp;amp;title_li='); ?>
</ul>

Con esto ya tenemos el menú y el efecto, solo queda poner bien los estilos en el archivo .CSS que estemos usando (style.css).

#dropmenu, #dropmenu ul {margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; z-index:300; width:100%; background:#fff; font-weight:bold;}
#dropmenu a {display:block; padding:0.25em 1em; color:#686868; border-right:1px solid #c8c8c8; text-decoration:none; background:#fff;}
#dropmenu a:hover {background:#888; color:#fff;}
#dropmenu li {float:left; position:relative;}
#dropmenu ul {position:absolute; display:none; width:12em; top:1.9em; left:-1px;}
#dropmenu ul a {border-left:1px solid #c8c8c8;}
#dropmenu li ul {border-top:1px solid #c8c8c8; width:14.1em;}
#dropmenu li ul a {width:12em; height:auto; float:left;  border-bottom:1px solid #c8c8c8;}
#dropmenu ul ul {top:auto;}
#dropmenu li ul ul {left:12em; margin:0px 0 0 10px;}
#dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {display:none;}
#dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {display:block;}

y con esto tenemos terminado el minitutorial de como agregar el dropdown con jQuery a WordPress

Este tutorial muestra como crear un menú desplegable utilizando solo Css3, en el tutorial muestra como usar Border-Shadhow, Text-Shadow y Box-Shadow.

Como ven en la imagen trae soporte para navegadores que soportan Css3 y para los que no lo soportan también.

Aquí el código en una imagen.

Link | CSS3 Dropdown Menu

Demo | Demo Dropdown Menu

Este es un pequeño tutorial de como crear los items del menú en dos lineas como se ha visto en las plantillas de pago del Joomla.

Primero y antes que nada copiar el default.php del modulo “mod_mainmenu” en el directorio de “html” del template que estamos editando o diseñando

Copiar -> root\modules\mod_mainmenu\tmpl\default.php  a -> root\templates\NombrePlantilla\html\mod_mainmenu\default.php

Luego abrir con el archivo copiado para editarlo y copiar la siguiente linea entre la linea nro 75.

// Código para poner el item del menu en dos lineas
	if (isset($node->_children[0]) && isset($node->_children[0]->span[0])) {
		$title = $node->_children[0]->span[0];
		$split = explode('//', $title->data(), 2);
		if (count($split) == 2) {
			$span =& $node->_children[0]->span[0]->addChild('span', array('class' => 'title'));
			$span->setData(trim($split[0]));
			$span =& $node->_children[0]->span[0]->addChild('span', array('class' => 'sub'));
			$span->setData(trim($split[1]));
		}
	}

y el resultado seria este en el html interpretado en el navegador

<li class="active item16" id="current">
  <a href="/index.php?option=xxxxx">
    <span>
      <span class="title">Ubicación</span>
      <span class="sub">Direcciones</span>
    </span>
  </a>
</li>

El resto es el CSS

.topmenu li span.title{ display:block; margin:10px 0 0 0; color:#12266B; font-weight:bold; font-size:13px;}

.topmenu li span.sub{ display:block; margin:1px 0 7px 0; font-size:11px; font-style:italic; color:#fff;}

Como ven lo que hace el código es agregar dos spans con clases de title y sub estos se separan por “//” que se tienen que agregar en el administrador de joomla al crear el menu:

Todos los estilos y el código que separa los span se pueden editar a gusto, así que no tengan miedo en experimentar.

En Joomla uno puede agregar “menus y submenus” con un simple módulo, pero siempre queda la duda de como se hizo o de como lo añadiria en mi Plantilla, bueno en esta ocación les traigo un pequeño tutorial de como agregar el submenu de forma nativa a la plantilla del Joomla.

Primero añadir la posición del menu en el index.php de tu plantilla.

<div class="topmenu">
	<jdoc:include type="modules" name="topmenu" style="raw" />
</div>
 (más...)