Menú horizontal con pestañas ( Tabs Menu) para Joomla
Para el diseño de la plantilla de la Estación de Servicio Pena de Malate se nos plantea un menú horizontal con pestañas de un sólo nivel. Para conseguir el efecto pedido decidimos basarnos en el código de #Professional 5 de CssPlay para menús horizontales.
Código original
.menu5 {padding:5px 0 0 1em; margin:0; list-style:none; height:40px; position:relative; background:transparent url(pro_five_0c.gif) repeat-x left bottom; font-size:11px;} .menu5 li {float:left; height:40px; margin-right:1px;} .menu5 li a {display:block; float:left; height:40px; line-height:35px; color:#333; text-decoration:none; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 4px; cursor:pointer; background:url(pro_five_0a.gif) no-repeat;} .menu5 li a b {float:left; display:block; padding:0 16px 5px 12px; background:url(pro_five_0b.gif) no-repeat right top;} .menu5 li.current a {color:#000; background:url(pro_five_2a.gif) no-repeat;} .menu5 li.current a b {background:url(pro_five_2b.gif) no-repeat right top;} .menu5 li a:hover {color:#000; background: url(pro_five_1a.gif) no-repeat;} .menu5 li a:hover b {background:url(pro_five_1b.gif) no-repeat right top;} .menu5 li.current a:hover {color:#000; background: url(pro_five_2a.gif) no-repeat; cursor:default;} .menu5 li.current a:hover b {background:url(pro_five_2b.gif) no-repeat right top;} </style> </head> <body> <ul class="menu5"> <li><a href="#nogo"><b>Home</b></a></li> <li><a href="#nogo"><b>Privacy Policy</b></a></li> <li><a href="#nogo"><b>Products</b></a></li> <li><a href="#nogo"><b>Where to find us</b></a></li> <li class="current"><a href="#nogo"><b>Contact us</b></a></li> <li><a href="#nogo"><b>Search</b></a></li> </ul> </body> </html>
Cambios realizados en las CSS
- Sustituimos la referencia a .menu5 por .menu que es nombre que le da Joomla por defecto
- La referencia a <b> la sustuimos por la referencia a <span>
- En Joomla el activo se marca con id="current" por lo que en las CSS debemos poner #current en vez de .current
Las CSS resultantes son:
.menu {padding:5px 0 0 1em; margin:0; list-style:none; height:40px; position:relative; background:transparent url(pro_five_0c.gif) repeat-x left bottom; font-size:11px;}.menu li {float:left; height:40px; margin-right:1px;}
.menu li a {display:block; float:left; height:40px; line-height:35px; color:#333; text-decoration:none; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 4px; cursor:pointer; background:url(pro_five_0a.gif) no-repeat;}
.menu li a span {float:left; display:block; padding:0 16px 5px 12px; background:url(pro_five_0b.gif) no-repeat right top;}
.menu li#current a {color:#000; background:url(pro_five_2a.gif) no-repeat;}
.menu li#current a span {background:url(pro_five_2b.gif) no-repeat right top;}
.menu li a:hover {color:#000; background: url(pro_five_1a.gif) no-repeat;}
.menu li a:hover span {background:url(pro_five_1b.gif) no-repeat right top;}
.menu li#current a:hover {color:#000; background: url(pro_five_2a.gif) no-repeat; cursor:default;}
.menu li#current a:hover span {background:url(pro_five_2b.gif) no-repeat right top;}
Importante:
La configuración del menú está en Lista.
Ver la implementación