Dropdown menu horizontale lijst
Hierboven is een model opgenomen van dit menu. Het kenmerk van dit menu is dat de subitems zichtbaar blijven als zij actief zijn.
Module instelling
Bij "Module parameters" van dit menu dient "Submenu-items altijd tonen" op "Ja" te staan.
De menu-items worden (bij li:hover en li.active) getoond of verborgen met CSS en niet met Joomla.
Zonder stijling ziet het menu er als volgt uit. Er zijn 5 hoofditems. Ieder hoofditem heeft subitems. Dit menu is niet geschikt voor meer dan 1 niveau van subitems.
1. Maak een ontwerp van uw menu
Wanneer u een menu gaat maken is het zeer aan te raden om vooraf uw menu te ontwerpen. (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.
Voor dit menu hebben de hoofditems een vaste breedte (width: 105px). De submenu's hebben een variabele breedte (width: auto), afhankelijk van de inhoud van de menu-items. De hoogte van de hoofd- en subtems is 22 pixels. De marge van het menu tot de daarop volgende content is 20 pixels.
2. Stijl de container van het menu
De module heeft in het voorbeeldmenu een Module Class Suffix: _dropdownhorizontaal.
We geven de modulecontainer de volgende stijl mee (geldt voor het getoonde menu op deze pagina).
div.moduletable_dropdownhorizontaal {
width: 525px;
height: 44px;
margin-bottom: 20px;
position: relative;
}
De module container heeft hier een "postion: relative" mee gekregen. Dit is nodig omdat we later de submenu's absoluut moeten stijlen en de submenu's geralteerd moeten worden aan de linker positie van de menucontainer. In het vorige menu moesten de subitems worden gerelateerd aan de positie van de hoofditems. Dit is her dus anders omdat alle subitems links beginnen.
3. List stijlen resetten
Alle list stijlen worden eerst gereset. Dit geldt ook voor de submenu's.
/* --------------------------------------------
Resetten en instellen van de list hoofditems
--------------------------------------------- */
div.moduletable_dropdownhorizontaal ul,
div.moduletable_dropdownhorizontaal ul li,
div.moduletable_dropdownhorizontaal ul li ul,
div.moduletable_dropdownhorizontaal ul li ul li {
list-style: none;
margin: 0;
padding: 0;
}
Na het toepassen van de reset stijlen ziet het menu er als volgt uit.
4. Hoofd en subitems positioneren
Na het resetten van de list stijlen gaan we het menu positioneren. De hoofditems moeten op een rij staan, een vaste breedte hebben, dus geven we die een float:left en een width: 105px mee.
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 al een position: relative meegekregen.
Verder is de <ul> van de submenu's gestijld met een width van 525px. Dat is nodig omdat 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. Verder hebben de subitems een variabele breedte (width: auto).
/* ----------------------------------
De hoofd- en subitems positioneren
---------------------------------- */
div.moduletable_dropdownhorizontaal ul li {
width: 105px;
float: left;
}
div.moduletable_dropdownhorizontaal ul li ul {
position: absolute;
width: 525px;
left: 0;
}
div.moduletable_dropdownhorizontaal ul li ul li {
width: auto;
}
Na het toepassen van deze stijlen ziet het menu er als volgt uit.
De hoofditems zijn goed gepositioneerd. De subitems vallen allemaal over elkaar heen en beginnen allemaal aan de linkerzijde en dat was precies de bedoeling.
5. Achtergrond afbeeldingen van de hoofditems stijlen
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 het menu. 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.
We gaan nu de afbeeldingen toepassen op de hoofdmenu- en submenu-items.
/* -----------------------------------------------------------------
Het instellen van achtergrond afbeelding van de hoofd en subitems
----------------------------------------------------------------- */
/* Normal Hoofditems */
div.moduletable_dropdownhorizontaal ul li {
background-image: url(../images/dropdownhorizontaal.jpg);
background-position: 0 0;
background-repeat: no-repeat;
}
/* Normaal subitems */
div.moduletable_dropdownhorizontaal ul li ul {
background-image: url(../images/dropdownhorizontaalsub.jpg);
background-position: 0 0;
background-repeat: repeat-x;
}
div.moduletable_dropdownhorizontaal ul li ul li {
background: none;
}
/* Hover Hoofditems */
div.moduletable_dropdownhorizontaal ul li:hover {
background-image: url(../images/dropdownhorizontaal.jpg);
background-position: 0 -50px;
background-repeat: no-repeat;
}
/* Hover subitems */
div.moduletable_dropdownhorizontaal ul li:hover ul {
background-image: url(../images/dropdownhorizontaalsub.jpg);
background-position: 0 -50px;
background-repeat: repeat-x;
}
div.moduletable_dropdownhorizontaal ul li:hover ul li {
background: none;
}
Na het toepassen van deze stjilen ziet het menu er als volgt uit.
De afbeeldingen hieronder laten ook de hover status zien na het toepassen van de stijlen.
6. De hoofd- en subitems stijlen aanvullen
Na de achtergrond afbeeldingen te hebben gestijld gaan we nu de links stijlen en de achtergronden van de active items instellen.
/* -----------------------------------------
Het aanvullend instellen van de menuitems
------------------------------------------ */
/* Hoofditems normal en hover */
div.moduletable_dropdownhorizontaal ul li a,
div.moduletable_dropdownhorizontaal ul li a:hover {
display: block;
text-align: center;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 13px;
text-decoration: none;
padding: 5px 0 4px 0;
width: 105px; */ IE6 fix */
}
/* Hoofditems active */
div.moduletable_dropdownhorizontaal ul li.active {
background-image: url(../images/dropdownhorizontaal.jpg);
background-position: 0 -50px;
background-repeat: no-repeat;
}
/* Subitems normal */
div.moduletable_dropdownhorizontaal ul li ul li a {
display: block;
text-align: left;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 13px;
text-decoration: none;
padding: 5px 0 4px 15px;
width: auto; */ IE 6 fix */
}
/* subitems hover en active */
div.moduletable_dropdownhorizontaal ul li ul li a:hover,
/* div.moduletable_dropdownhorizontaal ul li ul li#current a = joomla 1.5 */
div.moduletable_dropdownhorizontaal ul li ul li.current a {
display: block;
text-align: left;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 13px;
text-decoration: underline;
padding: 5px 0 4px 15px;
width: auto; */ IE 6 fix */
}
De joomla stijl "current" verschilt tussen joomla 1.5 (=ID) en Joomla 1.6/1,7 (=class). Beide stijlen zijn vermeld.
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 in de link stijl meegegeven. Een height is hier niet nodig omdat de sublist-items precies tegen de onderzijde van de hoofditems liggen, waardoor er geen "dood" gebied aanwezig is direkt onder de links van de hoofd-items.
Na het toepassen van de stijlen ziet het menu er als volgt uit. Hier moeten nog correcties op worden doorgevoerd.
7. De subitems verbergen en bij hover weer tonen
Eerst gaan we de subitems verbergen en bij hover tonen met de volgende stijlen.
/* ------------------------------------------
Het het verbergen en tonen van de subitems
------------------------------------------ */
div.moduletable_dropdownhorizontaal ul li ul {
left: -999em;
}
div.moduletable_dropdownhorizontaal ul li:hover ul {
left: 0;
}
Na het toepassen van de stijlen wordt het submenu verborgen. Bij hover wordt het submenu getoond.
8. De subitems bij een actief hoofdmenu altijd tonen
We willen echter dat de submenu's altijd worden getoond bij een actief hoofditem. Daarom passen we de volgende stijlen toe. De achtergrond van de sub list items moeten we nog verbergen (zie onder punt 6, waar het subitem de achtergrond van het hoofditem overneemt).
/* ------------------------------------------------
Het instellen van de blijvend zichtbare subitems
------------------------------------------------ */
div.moduletable_dropdownhorizontaal ul li.active ul {
left: 0;
background-image: url(../images/dropdownhorizontaalsub.jpg);
background-position: 0 -50px;
background-repeat: repeat-x;
}
div.moduletable_dropdownhorizontaal ul li.active ul li {
background: none;
}
Na het toepassen van de stijlen ziet het menu er als volgt uit.
Het menu lijkt bijna af, echter als er een hoofditem actief is dan worden de subitems aan de rechterszijde wel en aan de linkerzijde bij hover van het hoofditem niet getoond. Dit komt omdat alle <ul> elementen van de subitems over elkaar heen vallen van links naar rechts. Om dit te corrigeren moeten de waarden z-indexen worden omgekeerd. Het laatste subitems krijgt de laagste z-index en het eerste subitem de hoogste. Op die wijze zal bij hover van een hoofditem de submenu's van het betreffende hoofditem altijd worden getoond, dus ook over een actief hoofd- en subitem heen.
9. De z-indexen van de <ul> van de subitems corrigeren
/* ----------------------------------------------------------
Submenu's zichtbaar maken bij hover niet-actief menu-item
---------------------------------------------------------- */
/* z-indexen omkeren */
/* div.moduletable_dropdownhorizontaal ul li.item228:hover ul Joomla 1.5 */
/* div.moduletable_dropdownhorizontaal ul li#item-228:hover ul Joomla 1.6 */
div.moduletable_dropdownhorizontaal ul li.item-228:hover ul /* Joomla 1.7/2.5 */
{
background-image: url(../images/dropdownhorizontaalsub.jpg);
background-position: 0 -50px;
background-repeat: repeat-x;
position: absolute;
width: 525px;
left: 0;
z-index: 70;
}
/* div.moduletable_dropdownhorizontaal ul li:hover.item231 ul Joomla 1.5 */
/* div.moduletable_dropdownhorizontaal ul li:hover#item-231 ul Joomla 1.6 */
div.moduletable_dropdownhorizontaal ul li:hover.item-231 ul /* Joomla 1.7/2.5 */
{
background-image: url(../images/dropdownhorizontaalsub.jpg);
background-position: 0 -50px;
background-repeat: repeat-x;
position: absolute;
width: 525px;
left: 0;
z-index: 60;
}
/* div.moduletable_dropdownhorizontaal ul li:hover.item242 ul Joomla 1.5 */
/* div.moduletable_dropdownhorizontaal ul li:hover#item-242 ul Joomla 1.6 */
div.moduletable_dropdownhorizontaal ul li:hover.item-242 ul /* Joomla 1.7/2.5 */
{
background-image: url(../images/dropdownhorizontaalsub.jpg);
background-position: 0 -50px;
background-repeat: repeat-x;
position: absolute;
width: 525px;
left: 0;
z-index: 50;
}
/* div.moduletable_dropdownhorizontaal ul li:hover.item244 ul Joomla 1.5 */
/* div.moduletable_dropdownhorizontaal ul li:hover#item-244 ul Joomla 1.6 */
div.moduletable_dropdownhorizontaal ul li:hover.item-244 ul /* Joomla 1.7/2.5 */
{
background-image: url(../images/dropdownhorizontaalsub.jpg);
background-position: 0 -50px;
background-repeat: repeat-x;
position: absolute;
width: 525px;
left: 0;
z-index: 40;
}
/* div.moduletable_dropdownhorizontaal ul li:hover.item246 ul Joomla 1.5 */
/* div.moduletable_dropdownhorizontaal ul li:hover#item-246 ul Joomla 1.6 */
div.moduletable_dropdownhorizontaal ul li:hover.item-246 ul /* Joomla 1.7/2.5 */
{
background-image: url(../images/dropdownhorizontaalsub.jpg);
background-position: 0 -50px;
background-repeat: repeat-x;
position: absolute;
width: 525px;
left: 0;
z-index: 30;
}
Let op dat de CSS statements voor een list item met een ID of Class per Joomla versie verschilt.
10. IE6 en IE7 fix voor achtergrondafbeeldingen
Bij IE6 en IE7 worden de hover afbeeldingen van de hoofditems niet correct weergegeven. Om dit te corrigeren worden de onderstaande stijlen toegepast. Let op dat de CSS statements voor een list item met een ID of Class per Joomla versie verschilt.
/* IE fix voor Joomla 1.5 */
div.moduletable_dropdownhorizontaal ul li:hover.item228,
div.moduletable_dropdownhorizontaal ul li:hover.item231,
div.moduletable_dropdownhorizontaal ul li:hover.item242,
div.moduletable_dropdownhorizontaal ul li:hover.item244,
div.moduletable_dropdownhorizontaal ul li:hover.item246 {
background-image: url(../images/dropdownhorizontaal.jpg);
background-position: 0 -50px;
background-repeat: no-repeat;
}
/* IE fix voor Joomla 1.6 */
div.moduletable_dropdownhorizontaal ul li:hover#item-228,
div.moduletable_dropdownhorizontaal ul li:hover#item-231,
div.moduletable_dropdownhorizontaal ul li:hover#item-242,
div.moduletable_dropdownhorizontaal ul li:hover#item-244,
div.moduletable_dropdownhorizontaal ul li:hover#item-246 {
background-image: url(../images/dropdownhorizontaal.jpg);
background-position: 0 -50px;
background-repeat: no-repeat;
}
/* IE fix voor Joomla 1.7/2.5 */
div.moduletable_dropdownhorizontaal ul li:hover.item-228,
div.moduletable_dropdownhorizontaal ul li:hover.item-231,
div.moduletable_dropdownhorizontaal ul li:hover.item-242,
div.moduletable_dropdownhorizontaal ul li:hover.item-244,
div.moduletable_dropdownhorizontaal ul li:hover.item-246 {
background-image: url(../images/dropdownhorizontaal.jpg);
background-position: 0 -50px;
background-repeat: no-repeat;
}
1. Maak een ontwerp van uw menu
Wanneer u een menu gaat maken is het zeer aan te raden om vooraf een ontwerp maakt (bijvoorbeeld in Photoshop).
Dit is mijn 1ste kennismaking met deze site. Ziet er gaaf uit. Ik denk dat ik er als beginner veel aan zal hebben. Grt
Henk