Joomla: crear un menú horizontal con extended menu [RESUELTO]

La mayoría de templates para Joomla vienen preparados con un menú vertical. Vamos a ver cómo añadir un menú horizontal en Joomla de una forma correcta y rápida.

Modificando el template (theme) para contener la zona del menú

Para mostrar las zonas preparadas para módulos en tu sitio joomla, puedes usar el parámetro ?tp=1. Por ejemplo, si tu sitio web es http://www.joomlaspanish.org puedes consultar la dirección http://www.joomlaspanish.org/?tp=1 y verás las zonas marcadas en tu theme. Algo asi:
joomla mostrar zonas para módulos con parámetro ?tp=1

Quizá nos sirva alguna de las zonas que ya tenemos predefinida. Si no nos sirve ninguna, habrá que añadirla.

Añadir una nueva zona a tu template de Joomla

Añadir una zona nueva es realmente sencillo. Por ejemplo os enseño cómo añadí la zona llamada headermiguel que podéis ver en la anterior imagen:

Empezamos editando el fichero /templates/tu-template/templateDetails.xml y añadiendo la información para definir la nueva zona. Algunos templates ya tienen definida la zona positions. Otros no. Si no la tiene, habrá que definirla:

<positions>
	<position>headermiguel</position>
</positions>

Después editamos el fichero /templates/tu-template/index.php para añadir la nueva zona para incluir el módulo headermiguel:

<div id="bajo_header_miguel">
     <jdoc:include type="modules" name="headermiguel" />
</div>

Ahora podremos colocar cualquier módulo en la nueva zona headermiguel. Para ello, nos vamos al menú de Administración, Extensiones -> Gestor de módulos. Allí podremos indicar, para cada módulo, en qué posición aparece. Veremos que en el listado aparece una nueva posición llamada headermiguel. Vamos bien.

Instalar extensión/componente Joomla Extended Menu

Esta extensión nos va a facilitar bastante el trabajo de creación de un menú horizontal, pues nos proporciona un marcado HTML correcto y nos facilita el camino para darle estilo con CSS.

Empezamos descargando Extended Menu, lo instalamos, lo habilitamos (Extensiones->Gestor de módulos), lo colocamos en la nueva zona headermiguel que hemos definido en el apartado anterior, le damos un nombre y marcamos que se despliegue como “flat list”. Atención a las tres flechas rojas y al Menu class suffix (donde he introducido _listamiguel, que nos facilitará la creación de un estilo para ese menú).

joomla extended menu

Guardamos y si recargamos la web y nos fijamos en el fuente, veremos una lista desordenada (ul), algo del tipo:

<div id="bajo_header_miguel">
  <ul  id="mainlevel_listamiguel">
      <li><a href="/" class="mainlevel_listamiguel" id="active_menu_listamiguel">Inicio</a></li>
      <li><a href="http://www.hyips.es/forum" class="mainlevel_listamiguel">FORO</a></li>
      <li><a href="/Partners" class="mainlevel_listamiguel">Partners</a></li>
      <li><a href="/banners-hyips" class="mainlevel_listamiguel">Banners</a></li>
      <li><a href="/Contacto" class="mainlevel_listamiguel">Contacto</a></li>
  </ul>
</div>

Dando estilo (CSS) a nuestro menú horizontal

Ya tenemos la zona, tenemos el código de la lista… lo único que falta es darle estilo, para que todos los elementos (li) aparezcan en una misma línea. Os dejo los estilos que he aplicado yo (editando el fichero template.css o el fichero CSS que corresponda a vuestro template):

/* horizontal menu by miguel
 * apoyado en extended menu (plugin)
 */
 
 #bajo_header_miguel{
 background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("../images/miguel_bg.png");
    background-origin: padding-box;
    background-position: center top;
    background-repeat: repeat-y;
    background-size: auto auto;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 3px;
    text-align: left;
    width: 940px;
    height:25px;
 
}
 
 ul#mainlevel_listamiguel {
      margin:0px;
      padding-top: 5px;
      margin-left: 10px;
      margin-right: 10px;
      height: 20px;
      /*background-color: #002B89;*/
      /*background: #002B89 url("../images/miguel_a_medias1.png");*/
      background: url("http://www.hyips.es/templates/siteground-j15-54/images/h3.png");
      padding-left:0px;
  }
 
  ul#mainlevel_listamiguel li {
      display: inline; /* Shows each item side-by-side */
      list-style-type: none; /* Gets rid of the bullet points */
  }
 
  ul#mainlevel_listamiguel a {
      display: block;
      float: left;
      padding: 0 2em; /* separación entre items --> anchura total de todos los elementos */
      text-transform:uppercase;
      font-size: 1.4em;
      text-decoration: none;
      font-weight:bold;
      color: #BBB;
  }
 
  ul#mainlevel_listamiguel a:hover {
      display: block;
      float: left;
      padding: 0 2em; /* separación entre items --> anchura total de todos los elementos */
      text-transform:uppercase;
      font-size: 1.4em;
      text-decoration: none;
      font-weight:bold;
      color: #FFF;
  }
 
 /* ******************* fin de horizontal menu *************************/

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Post Navigation