Dropdown menu vertikale lijst
Hierboven is een model opgenomen van een dropdown menu waarvan de subitems in vertikale richting uitklappen.
Module instelling
Bij "Module parameters" van dit menu dient "Submenu-items altijd tonen" op "Ja" te staan.
De menu-items worden (bij li:hover) 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. Het 2e list-item heeft nog submenu's tot het 3e niveau. Zo'n menu komt wellicht in de praktijk niet zo vaak voor, echter het gaat hier om een voorbeeld.
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). 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 zijn de hoofditems variabel in breedte (afhankelijk van de tekst van het menu-item). De submenu's hebben een vaste breedte. De hoogte van de hoofditems is 22 pixels, de subitems hebben een hoogte van 18 pixels en een breedte van 180 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: _dropdownvertikaal.
We geven de modulecontainer de volgende stijl mee (geldt voor het getoonde menu op deze pagina).
div.moduletable_dropdownvertikaal {
height: 22px;
margin-bottom: 20px;
}
3. List stijlen resetten
Alle list stijlen worden eerst gereset. Dit geldt ook voor alle nivea's van de subitems.
/* ---------------------------------------
Resetten en instellen van de list-items
--------------------------------------- */
div.moduletable_dropdownvertikaal ul,
div.moduletable_dropdownvertikaal ul li,
div.moduletable_dropdownvertikaal ul li ul,
div.moduletable_dropdownvertikaal ul li ul li {
list-style: none;
margin: 0;
padding: 0;
}
Na het toepassen van de list stijlen hierboven 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 en niet onder elkaar, dus geven we die een float:left 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 (onderliggende content) heen vallen. De subitems hebben wel een referentiepunt (relatieve positie) nodig ten opzichte van de hoofditems.
Verder is de <ul> van de submenu's gestijld met een width van 180px. Dat is nodig omdat de submenu items een float: left hebben meegekregen van de hoofditems (inhereted). De list items van de submenu's moeten echter onder elkaar komen en niet naast elkaar. Je zou ook de sublist items een float: none stijl kunnen meegeven, echter dit geeft problemen met IE6 en IE7. Bij float: left worden de subitems nu naadloos in IE6 en IE7 onder elkaar geplaatst.
/* ----------------------------------
De hoofd- en subitems positioneren
----------------------------------- */
div.moduletable_dropdownvertikaal ul li {
float: left;
position: relative;
}
div.moduletable_dropdownvertikaal ul li ul {
position: absolute;
z-index: 2;
width: 180px;
}
Na het toepassen van deze stijlen ziet het menu er rommelig uit. De hoofditems staan, zoals gewenst, naast elkaar (zonder tussenruimte). De subitems vallen over elkaar heen, maar dat was ook de bedoeling.
5. Achtergrond afbeeldingen en links van de hoofditems stijlen
We hebben voor de menuachtergronden een gedeeltelijk transparante afbeelding met Photoshop gemaakt, die zowel voor de normale status als de hover status, alsmede voor de hoofd en subitems gebruikt wordt. Het is één afbeelding en niet, zoals vaak wordt toegepast, losse afbeeldingen voor de normale status en voor de hover status of van hoofd en submenu's. Het voordeel van één afbeelding is dat de browser ook in één keer de afbeelding inlaadt en niet opnieuw hoeft te laden als de achtergrondafbeelding wijzigt door een hover 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 deze afbeelding toepassen op de hoofdmenuitems en daarbij ook de links van de hoofditems stijlen.
/* -----------------------------------------------------------------------
Het instellen van achtergrond afbeeldingen en links van de hoofditems
----------------------------------------------------------------------- */
/* Achtergrond afbeeldingen hoofditems */
div.moduletable_dropdownvertikaal ul li {
background-image: url(../images/dropdown_vertikaal.png);
background-position: 0 0;
background-repeat: repeat-x;
}
div.moduletable_dropdownvertikaal ul li:hover {
background-image:url(../images/dropdown_vertikaal.png);
background-position: 0 -58px;
background-repeat: repeat-x;
}
/* Het instellen van de links hoofditems */
div.moduletable_dropdownvertikaal ul li a {
display: block;
color: #004678;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 13px;
text-decoration: none;
padding: 4px 14px 5px 14px;
}
div.moduletable_dropdownvertikaal ul li a:hover,
div.moduletable_dropdownvertikaal ul li.active a {
display: block;
color: #a50000;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 13px;
text-decoration: none;
padding: 4px 14px 5px 14px;
}
De achtergrond afbeelding van li:hover (de li.active moeten we nog stijlen) heeft nu een vertikale positie van -58px.
Na het toepassen van deze stijlen ziet het menu er als volgt uit.
De hoofditems staan correct naast elkaar. De breedte is variabel, afhankelijk van de tekst van het menu-item. De submenu's hebben de stijlen van de hoofdmenu-item overgenomen (inherted). Dit is een normaal gedrag voor de meeste browsers. De links van de "Home" button en de subitems van "Home" hebben een andere kleur, omdat deze de "active" status hebben. Dit is voor de subitems niet correct. De subitems moeten later nog gestijld worden.
6. Het stijlen van de borders van de listitems
Voordat we de subitems gaan stijlen, gaan we eerst de borders plaatsen. Dat is wat ingewikkelder dan het op het eerste gezicht lijkt. We willen namelijk geen dubbele borders zien. Wanneer we de listitems een borderstijl geven dan ontstaan wel dubbele borders, omdat het ene item met een border geplaatst is naast of onder een ander item met ook een border.
De volgende stijlen voorkomen dit.
/* --------------------------------------------
Het instellen van borders voor de list-items
-------------------------------------------- */
div.moduletable_dropdownvertikaal ul li {
border: 1px #999 solid;
margin: 0 0 0 -1px;
}
div.moduletable_dropdownvertikaal ul li ul {
margin: 1px 0 0 0;
}
div.moduletable_dropdownvertikaal ul li ul li {
border: 1px #999 solid;
margin: -1px 0 0 -1px;
}
Na het toepassen van deze borderstijlen ziet het menu er als volgt uit.
7. Het stijlen van de subitems
De subitems hebben een andere breedte, achtergrond en link kleur dan de hoofditems. Voor de subitems voeren we de volgende stijlen in.
/* ---------------------------------
Het stijlen van de SUBITEMS
---------------------------------- */
/* Het instellen van achtergrond afbeelding van de subitems */
div.moduletable_dropdownvertikaal ul li ul li {
background-image:url(../images/dropdown_vertikaal.png);
background-position: 0 -80px;
background-repeat: repeat-x;
}
div.moduletable_dropdownvertikaal ul li ul li:hover {
background-image:url(../images/dropdown_vertikaal.png);
background-position: 0 -120px;
background-repeat: repeat-x;
}
/* Het instellen van de sub link items voor 3 niveaus sub-items */
/* 1e subniveau */
div.moduletable_dropdownvertikaal ul li ul li a,
div.moduletable_dropdownvertikaal ul li.active ul li a,
/* 2e subniveau */
div.moduletable_dropdownvertikaal ul li ul li ul li a,
div.moduletable_dropdownvertikaal ul li.active ul li.active ul li a,
/* 3e subniveau */
div.moduletable_dropdownvertikaal ul li ul li ul li ul li a,
div.moduletable_dropdownvertikaal ul li.active ul li.active ul li.active ul li a {
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 13px;
color: #ffbcbc;
text-decoration: none;
padding: 4px 0 0 14px;
width: 166px;
height: 18px;
}
/* 1e subniveau */
div.moduletable_dropdownvertikaal ul li ul li a:hover,
div.moduletable_dropdownvertikaal ul li.active ul li.active a,
/* 2e subviveau */
div.moduletable_dropdownvertikaal ul li ul li ul li a:hover,
div.moduletable_dropdownvertikaal ul li ul li ul li ul li a:hover,
/* 3e subniveau */
div.moduletable_dropdownvertikaal ul li.active ul li.active ul li.active a,
div.moduletable_dropdownvertikaal ul li.active ul li.active ul li.active ul li.active a {
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 13px;
color: #fff;
text-decoration: none;
padding: 4px 0 0 14px;
width: 166px;
height: 18px;
}
Na het doorvoeren van deze stijlen ziet het menu er als volgt uit. De subitems staan op de goede positie en hebben de juiste aachtergrond en link kleur. Echter de subitems van het 2e niveau en verder vallen achter het eerste niveau en zijn niet zichtbaar.
8. Het stijlen van de achtergrond afbeeldingen van de actieve menu's
Voordat we de subitems vanaf het 2e niveau gaan stijlen gaan we eerst de achtergrond afbeeldingen stijlen voor de actieve menu's.
/* ------------------------------------------------------------------
Het stijlen van de achtergrond afbeeldingen van de actieve menu's
------------------------------------------------------------------- */
div.moduletable_dropdownvertikaal ul li.active {
background-image:url(../images/dropdown_vertikaal.png);
background-position: 0 -58px;
background-repeat: repeat-x;
}
div.moduletable_dropdownvertikaal ul li ul li.active {
background-image:url(../images/dropdown_vertikaal.png);
background-position: left -120px;
background-repeat: repeat-x;
}
Na het toepassen van de stijlen ziet het menu er als volgt uit. Het laatse submenu is geactiveerd.
9. Het tonen en verbergen van de submenu's
Tot nu toe waren alle submenu's zichtbaar, al vielen ze wel gedeeltelijk over elkaar heen. De bedoeling is echter dat de submenu's normaal niet worden getoond. Pas bij li"hover van een hoofditems worden de betreffende subitems getoond. De volgende stijlen zorgen hiervoor.
Het is mogelijk om in plaats van left: -999em / left: auto bijvoorbeeld display: none / display: block te gebruiken. Een display: block stijl op een <ul> is geen normale die we hier zouden toepassen. Ik geef dan ook de voorkeur aan de hieronder aangegeven stijlen.
/* -------------------------------------------
Het verbergen en tonen van de subitems
-------------------------------------------- */
div.moduletable_dropdownvertikaal ul li ul {
left: -999em;
}
div.moduletable_dropdownvertikaal ul li:hover ul {
left: auto;
}
De subitems zijn nu verborgen en komen met het hoveren over een hoofditem tevoorschijn.
10. Het aanpassen van de positie van het laatste subitem
Het laatste subitem valt buiten de breedte van het totale menu. Dit hoeft geen probleem te zijn, maar als het laatste subitem dan buiten de begrenzing van de website van dan moet dat worden gecorrigeerd.
In dit voorbeeld heeft het laatste subitem een ID of een Class van 169 (afhankelijk van de Joomla versie die u gebruikt). Met de volgende stijlen corrigeren we de positie. Let op dat de CSS statements voor een list item met een ID of Class per Joomla versie verschilt.
/* -------------------------------------------------------------------------
Het het laatste submenu rechts laten lijnen
-------------------------------------------------------------------------- */
/* div.moduletable_dropdownvertikaal ul li.item169 ul (Joomla 1.5) */
/* div.moduletable_dropdownvertikaal ul li#item-169 ul (joomla 1.6) */
div.moduletable_dropdownvertikaal ul li.item-169 ul /* (joomla 1.7/2.5) */
{
left: -999em;
}
/* div.moduletable_dropdownvertikaal ul li:hover.item169 ul (Joomla 1.5) */
/* div.moduletable_dropdownvertikaal ul li:hover#item-169 ul (Joomla 1.6) */
div.moduletable_dropdownvertikaal ul li:hover.item-169 ul /* (Joomla 1.7/2.5) */
{
left: -68px;
}
Hieronder staat een afbeelding met het submenu zonder en daarna met correctie.
11. Het positioneren van de subitems vanaf het 2e niveau
Wanneeer er meer niveau's van submenu;s zijn moet de positie van de subitems vanaf het 2e niveau worden gecorrigeerd. Zonder deze correctie vallen ze achter het 1e niveau van de subitems en zijn niet zichtbaar.
/* --------------------------------------------
AANVULLENDE STIJLEN BIJ MEERDERE SUBNIVEAU'S
--------------------------------------------- */
/* Het stijlen van de SUBITEMS vanaf het 2e subniveau */
div.moduletable_dropdownvertikaal ul li ul li ul,
div.moduletable_dropdownvertikaal ul li:hover ul li ul {
left: -999em;
}
div.moduletable_dropdownvertikaal ul li:hover ul li:hover ul {
left: auto;
margin: -22px 0 0 181px;
}
/* Het stijlen van de SUBITEMS vanaf het 3e subniveau */
div.moduletable_dropdownvertikaal ul li ul li ul li ul,
div.moduletable_dropdownvertikaal ul li:hover ul li ul li ul,
div.moduletable_dropdownvertikaal ul li:hover ul li:hover ul li ul {
left: -999em;
}
div.moduletable_dropdownvertikaal ul li:hover ul li:hover ul li:hover ul {
left: auto;
margin: -22px 0 0 181px;
}
Na het toepassen van deze stijlen zijn alle niveau's naast elkaar zichtbaar. Hiermee is dit menu afgerond.
-
Om u te kunnen helpen moet ik uw website kunnen bekijken, echter dit is niet mogelijk, omdat deze alleen via inloggen kan worden bekeken.
-
2012-05-17 16:06:39 | Meint - Re: Kom niet verder dan punt 2Beste Rob,
Ik heb de website inmiddels beschikbaar gemaakt.
Vriendelijke groet,
Meint
-
Beste Meint,
Het menu is geplaatst in de linkerkolom. Een dropdown menu is dan niet mogelijk, immers een dropdownmenu loopt horizontaal met verticale submenu's.
Wat wel kan is een fly-out menu, waarbij de submenu's horizontaal "uitklappen".
De Module class achtervoegsel moet je eerst instellen. Voor het fly-out menu is dat:
_flyout
Je kunt dit instellen bij Extensies->Modulebeheer->"modulenaam van het menu"
Rechts onder Geavanceerd kan de Module class achtervoegsel worden ingevuld.
Vergeet ook niet om op deze pagina onder Basis Opties het tonen van submenu's op Ja te zetten.
Daarna kun je de stijlen van Joomla CSS gewoon overnemen.
-
Hoi Rob,
Bedankt voor je antwoord. Ik begrjip dat het niet aan de linkerkant kan werken en heb het menu nu verplaats naar de ruimte "top". Ook nu zul je zien dat hij het niet werkt.
Waar ik merkte dat ik vastliep is punt 2 en 3. Na het uitvoeren van deze stappen zouden volgens de handleiding de bullets/list items verdwenen moeten zijn. Bij mij blijven ze echter zichtbaar.
Ik heb de rest van de stappen ook uitgevoerd maar er veranderd vanaf dat punt niks meer aan het menu.
-
2012-05-18 09:19:12 | Rob van Oudheusden - Re: Kom niet verder dan punt 2Je hebt de module class achtervoegsel niet ingesteld. Zie vorige antwoord. Het achtervoegsel moet zijn
_dropdownvertikaal
-
2012-05-18 09:39:12 | Meint - Re- Kom niet verder dan punt 2Hoi Rob,
Het is nu gelukt. Het was me niet duidelijk dat ik dit in Joomla via de backend moest wijzigen dus heb denk ik ergens iets over het hoofd gezien.
Kan weer verder. Bedankt voor je hulp!
Vriendelijke groet,
Meint
-
1901-12-13 20:45:52 |Unregistered| jeeHeel helder en duidelijk artikel. Ben nog redelijk nieuw in Joomla, maar dit maakt een hoop duidelijk.
Wat doe ik fout?