Combinatie menu
Hierboven is een model opgenomen van een menu waarin horizontale en vertikale dropdown technieken worden gecombineerd. Het is daarom een complex menu. Er is geen javascript nodig om dit menu te laten werken. Voor IE6 is wel het htc script nodig (zie hoofdstuk "Algemeen - lees dit eerst".
Module instelling
Bij "Module parameters" van dit menu dient "Submenu-items altijd tonen" op "Ja" te staan.
Zonder stijling ziet het menu er als volgt uit. Er zijn 3 hoofditems. Ieder hoofditem heeft een verschillend aantal subitems. Zo'n menu komt wellicht in de praktijk niet zo vaak voor. Het menu is afgeleid van de website van logistiek Nederland (www.logistiek.nl). Het menu van die site gebruikt echter javascript. Het menu zoals getoond op deze pagina werkt op zuiver CSS.
1. Maak een ontwerp van uw menu
Wanneer u een menu gaat maken, zeker bij complexere menu's, is het zeer aan te raden om vooraf een ontwerp maakt (bijvoorbeeld in Photoshop). Zo weet u hoeveel pixels uw menu maximaal breed of hoog wordt, hoe breed of hoog uw (sub) menu items worden, welke achtergrond afbeeldingen u wilt gebruiken. Wanneer u dat op de tast doet komt u vaak niet goed uit. Wanneer u niet met Photoshop of een vergelijkbaar programma werkt, maak dan minstens een tekening waarop de maten staan aangegeven.
De totale breedte van dit menu is 528px. De hoofd- en subitems hebben een vaste breedte van 176 pixels. De hoogte van de hoofditems is 25 pixels en van de subitems 20 pixels.
2. Stijl de container van het menu
De module heeft in het voorbeeldmenu een Module Class Suffix: _combinatie.
We geven de modulecontainer de volgende stijl mee (geldt voor het getoonde menu op deze pagina).
div.moduletable_combinatie {
width: 528px;
height: 85px;
position: relative;
margin-bottom: 20px;
}
3. List stijlen resetten
Alle list stijlen worden eerst gereset. Dit geldt ook voor de subitems.
/* -----------------------
Reset de ul en li items
----------------------- */
div.moduletable_combinatie ul,
div.moduletable_combinatie ul li,
div.moduletable_combinatie ul li ul,
div.moduletable_combinatie ul li ul li {
list-style: none;
margin: 0;
padding: 0;
}
Na toepassen van de reset stijlen ziet het menu er als volgt uit.
4. De hoofd list-items laten floaten
De hoofditems willen we naast elkaar. De <ul> van de subitems erven deze instelling waardoor de subitems onder elkaar komen te staan. Later zullen ze naast elkaar worden geplaatst.
/* ---------------------------------------------
Hoofd list-items floaten en een breedte geven
--------------------------------------------- */
div.moduletable_combinatie ul li {
float: left;
width: 176px;
}
Na het toepassen van deze stijlen ziet het menu er als volgt uit.
5. Hoofd en sub link-items stijlen
We stijlen eerst de link elementen inclusief een IE6 fix.
/* -----------------------------
Hoofdmenu link-items stijlen
------------------------------ */
div.moduletable_combinatie ul li a {
display: block;
padding: 5px 0 0 10px;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 14px;
color: #000;
text-decoration: none;
width: 166px; /* IE6 fix */
height: 20px; /* IE6 fix */
}
div.moduletable_combinatie ul li a:hover,
div.moduletable_combinatie ul li.active a {
display: block;
padding: 5px 0 0 10px;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 14px;
color: #fff;
text-decoration: none;
font-weight: bold;
width: 166px; /* IE6 fix */
height: 20px; /* IE6 fix */
}
/* --------------------------
Submenu link-items stijlen
--------------------------- */
div.moduletable_combinatie ul li ul li a,
div.moduletable_combinatie ul li.active ul li a {
display: block;
padding: 4px 0 0 10px;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 12px;
color: #000;
text-decoration: none;
font-weight: normal;
width: 166px; /* IE6 fix */
height: 16px; /* IE6 fix */
}
div.moduletable_combinatie ul li ul li a:hover,
div.moduletable_combinatie ul li.active ul li.active a {
display: block;
padding: 4px 0 0 10px;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 12px;
color: #fff;
text-decoration: none;
font-weight: normal;
width: 166px; /* IE6 fix */
height: 16px; /* IE6 fix */
}
Toelichting op de IE6 fix
In de meeste browsers leidt een link (a), gestijld met een display: block en padding om de link heen, tot het activeren van het gehele list-item als link, dus ook in het padding gebied. In IE6 is alleen de link zelf geactiveerd. Om het hele menu-item als link te activeren is een width en een height nodig in IE6. Om deze reden is hier een width en een height in de link stijl meegegeven.
Na het toepassen van de stijlen ziet het menu er als volgt uit.
Achtergrond afbeeldingen
We hebben voor de menuachtergronden twee afbeeldingen met Photoshop gemaakt, voor de hoofditems en apart voor de subitems. Maak geen aparte afbeeldingen voor de hover of active status van een menu-item. Het voordeel namelijk van één afbeelding voor zowel de normale als de hover en active status is dat de browser de afbeelding in één keer inlaadt en niet opnieuw hoeft te laden als de achtergrondafbeelding wijzigt door een hover of active effect. Dit inladen van een andere, nog niet ingeladen afbeelding, geeft altijd een verstorend effect. De achtergrond wijzigt nu door het instellen van andere coördinaten van de achtergrondafbeelding.
6. Subitems positioneren en achtergrond afbeeldingen toepassen
Om het overzichtelijk te houden beginnen we met het positioneren van de subitems.
Belangrijk: De subitems moeten "absoluut" worden gepositioneerd. Hiermee worden de subitems als het ware losgemaakt van de andere elementen en kunnen ze over andere elementen heen vallen. De subitems hebben wel een referentiepunt (relatieve positie) nodig ten opzichte van de modulecontainer, omdat alle subitems uiterst links beginnen. De modulecontainer heeft net als bij het dropdown horizontaal menu al een position: relative meegekregen.
Verder is de <ul> van de submenu's gestijld met een width van 528 pixels. Dat is nodig omdat de ul van de submenu items over de volle breedte van het menu moeten kunnen lopen. De subitems hebben een float: left al geërfd van de hoofditems. Deze stijl hoeft dus niet nog eens aangegeven te worden.
Hoewel volgens onderstaande stijlen alle subitems op left: 0 (dus helemaal aan de inker kant beginnen) willen we de groep van de subitems van hoofditem 2 176 pixels laten inspringen en van hoofditem 3 352 pixels. Deze listitems beginnen dus altijd onder het hoofditem.
De <ul> achtergronden vallen over elkaar heen van links naar rechts. Daarom zijn van Hoofditem 1 maar 3 subitems zichtbaar, evenals van hoofditem 2. In werkelijkheid zijn ze wel aanwezig maar vallen dus achter elkaar. Let op dat de CSS statements voor een list item met een ID of Class per Joomla versie verschilt.
/* ------------------------------------
Het het positioneren van de subitems
------------------------------------- */
/* div.moduletable_combinatie ul li.item169 ul Joomla 1.5 */
/* div.moduletable_combinatie ul li#item-169 ul Joomla 1.6 */
div.moduletable_combinatie ul li.item-169 ul /* Joomla 1.7/2.5 */
{
background-image: url(../images/combinatiemenu_subitem.png);
background-position: 0 0;
background-repeat: repeat-x;
position: absolute;
width: 528px;
height: 63px;
left: 0;
}
/* div.moduletable_combinatie ul li.item182 ul Joomla 1.5 */
/* div.moduletable_combinatie ul li#item-182 ul Joomla 1.5 */
div.moduletable_combinatie ul li.item-182 ul /* Joomla 1.7/2.5 */
{
background-image: url(../images/combinatiemenu_subitem.png);
background-position: 176px 0;
background-repeat: no-repeat;
position: absolute;
width: 352px;
height: 63px;
padding-left: 176px;
left: 0;
}
/* div.moduletable_combinatie ul li.item191 ul Joomla 1.5 */
/* div.moduletable_combinatie ul li#item-191 ul Joomla 1.6 */
div.moduleetable_combinatie ul li.item-191 ul /* Joomla 1.7/2.5 */
{
background-image: url(../images/combinatiemenu_subitem.png);
background-position: 352px 0;
background-repeat: no-repeat;
position: absolute;
width: 176px;
height: 63px;
padding-left: 352px;
left: 0;
}
div.moduletable_combinatie ul li:hover ul,
div.moduletable_combinatie ul li.active ul {
background-image: url(../images/combinatiemenu_subitem.png);
background-position: 0 0;
background-repeat: repeat-x;
}
Na toepassen van de stijlen ziet het menu er als volgt uit.
7. Achtergronden van de hoofd en sub-items stijlen
We beginnen met de hoofditems. Hiervoor passen we de volgende stijlen toe.
/* -----------------------------------------
Achtergronden van de hoofditems instellen
----------------------------------------- */
div.moduletable_combinatie ul li {
background-image: url(../images/combinatiemenu_hoofditem.png);
background-position: 0 0;
background-repeat: no-repeat;
}
div.moduletable_combinatie ul li:hover,
div.moduletable_combinatie ul li:hover.parent,
div.moduletable_combinatie ul li.active {
background-image: url(../images/combinatiemenu_hoofditem.png);
background-position: 0 -25px;
background-repeat: no-repeat;
}
Na toepassen van de stijlen ziet het menu er als volgt uit.
De sub list items hebben de stijlen van de hoofditems "geërfd". Dit moeten we corrigeren met de volgende stijlen.
/* ----------------------------------------------
Achtergrond van geërfde hoofditems verwijderen
---------------------------------------------- */
div.moduletable_combinatie ul li ul li,
div.moduletable_combinatie ul li:hover ul li,
div.moduletable_combinatie ul li ul li:hover,
div.moduletable_combinatie ul li.active ul li,
div.moduletable_combinatie ul li.active ul li:hover {
background: none;
}
Na hetr toepassen van deze stijl ziet het menu er als volgt uit. De hoofd en subitems hebben de goede achtergrond gekregen.
Bij het testen van het menu blijkt echter dat de hoofditems goed functioneren bij hover en active. De subitems niet (zie voorbeeld hieronder).
De subitems moet dus nog de juiste achtergrond krijgen bij hover en active. We gaan eerst de stijlen voor hover toepassen.
Net als bij het "Dropdown menu horizontaal" zullen we de z-indexen moeten omkeren, omdat een menu-item, dat actief is, bij hover van een ander menu-item onderop moet komen te liggen. Let op dat de CSS statements voor een list item met een ID of Class per Joomla versie verschilt.
/* -----------------------------------------------------------------
Submenu's instellen bij hover hoofditem (omkeren van de z-indexen)
------------------------------------------------------------------ */
/* div.moduletable_combinatie ul li:hover.item169 ul Joomla 1.5 */
/* div.moduletable_combinatie ul li:hover#item-169 ul Joomla 1.6 */
div.moduletable_combinatie ul li:hover.item-169 ul /* Joomla 1.7/2.5 */
{
background-image: url(../images/combinatiemenu_subitem.png);
background-position: 0 -63px;
background-repeat: repeat-x;
position: absolute;
z-index: 70;
}
/* div.moduletable_combinatie ul li:hover.item182 ul Joomla 1.5 */
/* div.moduletable_combinatie ul li:hover#item-182 ul Joomla 1.6 */
div.moduletable_combinatie ul li:hover.item-182 ul /* Joomla 1.7/2.5 */
{
background-image: url(../images/combinatiemenu_subitem.png);
background-position: 0 -63px;
background-repeat: repeat-x;
position: absolute;
z-index: 60;
}
/* div.moduletable_combinatie ul li:hover.item191 ul Joomla 1.5 */
/* div.moduletable_combinatie ul li:hover#item-191 ul Joomla 1.6 */
div.moduletable_combinatie ul li:hover.item-191 ul /* Joomla 1.7/2.5 */
{
background-image: url(../images/combinatiemenu_subitem.png);
background-position: 0 -63px;
background-repeat: repeat-x;
position: absolute;
z-index: 50;
}
Na het toepassen van de stijlen werken de achtergronden bij hover prima.
Als laatste stellen we de actieve subitems in. Let op dat de CSS statements voor een list item met een ID of Class per Joomla versie verschilt.
/* -----------------------------------------
Submenu's instellen bij active hoofditems
----------------------------------------- */
/* div.moduletable_combinatie ul li.item169.active ul Joomla 1.5 */
/* div.moduletable_combinatie ul li#item-169.active ul Joomla 1.6 */
div.moduletable_combinatie ul li.item-169.active ul /* Joomla 1.7/2.5 */
{
background-image: url(../images/combinatiemenu_subitem.png);
background-position: 0 -63px;
background-repeat: repeat-x;
left: 0;
z-index: 1;
}
/* div.moduletable_combinatie ul li.item182.active ul Joomla 1.5 */
/* div.moduletable_combinatie ul li#item-182.active ul Joomla 1.6 */
div.moduletable_combinatie ul li.item-182.active ul /* Joomla 1.7/2.5 */
{
background-image: url(../images/combinatiemenu_subitem.png);
background-position: 0 -63px;
background-repeat: repeat-x;
position: absolute;
left: 0;
z-index: 1;
}
/* div.moduletable_combinatie ul li.item191.active ul Joomla 1.5 */
/* div.moduletable_combinatie ul li#item-191.active ul Joomla 1.6 */
div.moduletable_combinatie ul li.item-191.active ul /* Joomla 1.7/2.5 */
{
background-image: url(../images/combinatiemenu_subitem.png);
background-position: 0 -63px;
background-repeat: repeat-x;
position: absolute;
left: 0;
z-index: 1;
}