Menu para Joomla

[jalex16]

Creo que es un menú hecho con Mootools (moomenu). Implementé algo parecido a un template que hice.


Incluyes la posición del menú en tu plantilla templates/nombredeltemplate/index.php

Código HTML:

<div id="hornav" class="float">
   <jdoc:include type="modules" name="hornav"/>
</div> 

El CSS del menú. templates/nombredeltemplate/css/menu.css

Código HTML:

#hornav{
    height:38px;
}
#hornav .moduletable{
    margin:0;
}

#hornav ul{
    margin:0;
    padding: 2px 0 0 0;
    width:auto;
    list-style: none;
}
#hornav ul li{
    margin:0;
    padding:0;
    float:left;
    position:relative;
}
#hornav ul li a{
    text-transform: uppercase;
    height: 34px;
    display: block;
    color:#FFF;
    background:url("../images/tableft10.gif") no-repeat left top;
    margin:0 0 0 0;
    padding: 0 0 0 4px;
}
#hornav ul li a:hover{
    text-decoration:none;
    color: #FFCC00;
}
#hornav ul li a span {
    display:block;
    background: url("../images/tabright10.gif") right top;
    padding:11px 8px 10px 3px;
    color:#FFF;
}
#hornav ul li ul {
    display:block;
    height:auto;
    width: 14em;
    position:absolute;
    z-index:99;
    left: -999em;
    background: #333333;
    padding: 0;
}

#hornav ul li ul ul {
    margin: -40px 0 0 14em;
}

#hornav ul li li {
    width: 14em;
}
#hornav ul li li a{
    text-transform: none;
    display: block;
    background: none;
    margin: 0;
    padding: 10px;
    height: 20px;
}
#hornav ul li li a span{
    float: none;
    display:block;
    background: none;
    padding: inherit;
    height: inherit;
}

#hornav ul li ul {
    left: -999em;
}

#hornav ul li:hover ul ul, #hornav ul li:hover ul ul ul {
    left: -999em;
}

#hornav ul li:hover ul, #hornav ul li li:hover ul, #hornav ul li li li:hover ul {
    left: auto;
}

#hornav ul a:hover span {
    color: #FFCC00;
}
#hornav ul a:hover {
background-position:0% -42px;
}
#hornav ul a:hover span {
background-position:100% -42px;
}

#hornav ul #current a {
background-position:0% -42px;
}
#hornav ul #current a span {
background-position:100% -42px;
}
#hornav ul #current .parent{
background-position:100% -42px;
}

Luego añades en el HEAD de la plantilla el archivo moomenu.js, el cual no recuerdo de dónde lo saque y colocar las imágenes de fondo en templates/nombredeltemplate/images .

Debes quitar los sufijos del módulo correspondiente al menú. Además debes colocarlo en la posición hornav.

Espero que te sirva, saludos