Zaragoza News Tab Menu

Zaragoza Tabs Menu is a three-level CSS,  tabs and  unobtrusive menu specially designed for high-traffic sites.

Main features:

• Only CSS (do not use javascript): valid CSS 2.1
• Clean code: valid XHTML 1.0
• CSS clean and easy configuration
• Tab menu
• 3-level menu
• A different class style for each item.
• Non clickeable active menu

Change log:

Version 3.1.1 (13/06/2010):

• Fixed custom CSS parameter Bug

Version 3.1.0 (12/06/2010):

• Non clickeable active menu.
  
• A diferent class style for each item added.

Version 3.0.1:

• Fixed custom CSS parameter Bug

Version 3.0.0:

• Third level implemented.
• New CSS
• New itemid class sufix

Version 2.0.0:

• New div structure
• Fixed bugs with margins
• New CSS
• New parameter to include your own CSS styles (just paste your styles in the textarea)

How to:

This menu system is too easy to install and configure:

1. Install de module
2. Select the menu in the module params.
3. Append your own CSS styles if you want.
4. Publish the module.

Note that the main div appens to the newsmenu class the item class with the itemid variable, so you can configure the margins to the second and third level (for example: .item-14 .nivel2 .menu_news { margin-right: 50px; }

Div structure:

<div class="newsmenu item-14">
   <div class="nivel1">
       <ul class="menu_news">
         <li id="current" class="parent active"><a href="..."><span>xxxxxxx</span></a></li>
         <li><a href="..."><span>xxxxxxx</span></a></li>
       </ul>
   </div>
   <div class="arreglo"></div>
  <div class="nivel2">
       <ul class="menu_news">
         <li id="current" class="parent active"><a href="..."><span>xxxxxxx</span></a></li>
         <li><a href="..."><span>xxxxxxx</span></a></li>
       </ul>
   </div>
   <div class="arreglo"></div>
   <div class="nivel3">
      <ul class="menu_news">
         <li><a href="..."><span>xxxxxxx</span></a></li>
         <li><a href="..."><span>xxxxxxx</span></a></li>
       </ul>
   </div>
   <div class="arreglo"></div>
</div>

CSS:

.newsmenu {
margin:0;
padding:0;
}
.nivel1 {
float : left;
margin : 0;
padding : 0;
font-size : 1.3em;
width : 100%;
background-color : #8ec1da;
}
.nivel2 {
float : left;
margin : 0;
padding:0;
font-size : 1.1em;
width : 100%;
background-color:#FFFFFF;
}
.nivel3 {
float : left;
margin : 0;
padding:0;
font-size : 1.1em;
width : 100%;
background-color:#a2daf4;
}
.menu_news {
margin : 0;
padding : 0;
}
.menu_news li {
list-style-type : none;
display : block;
float : left;
background-image:none;
}
.menu_news li li{
display:none;
visibility:hidden;
}
.menu_news li span {
padding : 0;
margin : 0;
}
.nivel1 .menu_news li {
margin : 0;
padding-left : 18px;
padding-right : 18px;
padding-bottom : 7px;
padding-top : 7px;

border-right : 2px solid #8ec1da;
}
.nivel2 .menu_news li {
padding-left : 12px;
padding-right : 12px;
padding-bottom : 7px;
padding-top : 7px;
margin-top:5px;
margin-left:5px;
color: #ffffff;
}
.nivel3 .menu_news li {
padding-left : 8px;
padding-right : 8px;
padding-bottom : 7px;
padding-top : 7px;
margin-top:5px;
background-color:#a2daf4;
color: #000000;
}
.nivel1 .menu_news li.active {
background-color:#FFFFFF;
}
.nivel1 .menu_news li.active a:link, .nivel1 .menu_news li.active a:visited {
text-decoration:none;
color:#000000;
}
.nivel1 .menu_news #current a:link, .nivel1 .menu_news #current a:visited {
text-decoration:none;
color:#000000;
}
.nivel2 .menu_news li#current, .nivel2 .menu_news li.active {
background-color:#a2daf4;
}
.newsmenu a:link, .newsmenu a:visited {
text-decoration : none;
}
.newsmenu a:hover{
text-decoration:underline;
}
.nivel1 a:link, .nivel1 a:visited {
color : #ffffff;
}
.nivel1 .menu_news li a:hover {
color : #ffffff;
}
.nivel2 a:link, .nivel2 a:visited {
color : #000;
}
.nivel2 .menu_news li a:hover {
color : #000;
}
.nivel2 .menu_news #current a:link, .nivel2 .menu_news #current a:visited {
text-decoration:none;
color:#000000;
}
.nivel2 .menu_news #current a:hover {
text-decoration:underline;
}
.nivel3 a:link, .nivel3 a:visited {
color : #000;
}
.nivel3 .menu_news li a:hover {
color : #000;
}

Click here to download this module