Vertikaal klikmenu
Door op een hoofditem met submenu's te klikken klapt het submenu uit. Deze site heeft een vergelijkbaar menu aan de linkerzijde.
Module instelling
In tegenstelling tot de voirge menu's moet de module parameters voor "Submenu-items altijd tonen" nu standaar op "nee" worden gezet.
Zonder stijling ziet het menu er als volgt uit. Er zijn 5 hoofditems. Ieder hoofditem heeft subitems. Het 2e hoofditem is geactiveerd, zodat die subitems worden getoond. De overige subitems worden niet getoond omdat de module instelling dat zo bepalen. dit is ook de bedoeling, dat alleen het actieve hoofditem het submenu laat zien.
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 hebben de hoofditems een vaste breedte (190 pixels). De submenu's hebben ook een vaste breedte, maar springen iets in (170 pixels). De hoogte van de hoofditems is 22 pixels, de subitems hebben een hoogte van 16 pixels.
2. Stijl de container van het menu
De module heeft in het voorbeeldmenu een Module Class Suffix: _klikmenul.
We geven de modulecontainer de volgende stijl mee (geldt voor het getoonde menu op deze pagina).
div.moduletable_klikmenu {
float: left;
padding: 4px 15px 10px 0;
}
3. List stijlen resetten
Alle list stijlen worden eerst gereset. Dit geldt ook voor alle nivea's van de subitems. Daarbij geven we het hoofdlistime een width mee van 190 pixels.
/* --------------------------------------------
Resetten en instellen van de list hoofditems
-------------------------------------------- */
div.moduletable_klikmenu ul,
div.moduletable_klikmenu ul li,
div.moduletable_klikmenu ul li ul,
div.moduletable_klikmenu ul li ul li {
list-style: none;
margin: 0;
padding: 0;
}
/* List item stijlen */
div.moduletable_klikmenu ul li {
width: 190px;
}
Na toepassen van de stijlen ziet het menu er als volgt uit.
4. Het instellen van de linkitems met achtergrond afbeeldingen
In tegenstelling tot de vorige menu's gaan we de achtergrond afbeeldingen stijlen in de link items en niet in de list-items.
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.
CSS
/* ---------------------------------------------------------
Het instellen van de link items met achtergrondafbeelding
--------------------------------------------------------- */
/* Hoofd linkitems normal */
div.moduletable_klikmenu ul li a {
display: block;
text-align: left;
color: #004678;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 13px;
text-decoration: none;
background-image: url(../images/vertikaal_klik.png);
background-position: 0 0;
background-repeat: repeat-x;
cursor: pointer;
padding: 5px 10px 4px 10px;
width: 170px; /* IE6 fix */
height: 13px; /* IE6 fix */
}
/* Hoofd linkitems hover en active */
div.moduletable_klikmenu ul li a:hover,
div.moduletable_klikmenu ul li.active a {
display: block;
text-align: left;
color: #a50000;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 13px;
text-decoration: none;
background-image: url(../images/vertikaal_klik.png);
background-position: 0 -56px;
background-repeat: repeat-x;
cursor: pointer;
padding: 5px 10px 4px 10px;
width: 170px; /* IE6 fix */
height: 13px; /* IE6 fix */
}
/* Sub linkitems normal */
div.moduletable_klikmenu ul li ul li a,
div.moduletable_klikmenu ul li.active ul li a {
display: block;
text-align: left;
color: #ffbcbc;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 13px;
text-decoration: none;
background-image: url(../images/vertikaal_klik.png);
background-position: 0 -80px;
background-repeat: repeat-x;
cursor: pointer;
padding: 3px 10px 3px 10px;
width: 150px; /* IE6 fix */
height: 13px; /* IE6 fix */
}
/* sub linkitems hover en active */
div.moduletable_klikmenu ul li ul li a:hover,
/* div.moduletable_klikmenu ul li ul li#current a Joomla 1.5 */
div.moduletable_klikmenu 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: none;
background-image: url(../images/vertikaal_klik.png);
background-position: 0 -120px;
background-repeat: repeat-x;
cursor: pointer;
padding: 3px 10px 3px 10px;
width: 150px; /* IE6 fix */
height: 13px; /* 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. Deze IE6 fix is ook bij de sublist-items meegeven.
Na het toepassen van de stijlen ziet het menu er als volgt uit.
5. Submenu's aan beide kanten laten inspringen
Om extra te accentueren dat het hier om subitems gaat laten we deze aan beide kanten inspringen met de volgende stijlen.
/* -------------------------------------------
Submenu's aan beide kanten laten inspringen
------------------------------------------- */
div.moduletable_klikmenu ul li ul {
margin: 0 0 0 10px;
}
div.moduletable_klikmenu ul li ul,
div.moduletable_klikmenu ul li ul li {
width: 170px;
}
Na het toepassen van deze stijlen ziet het menu er als volgt uit.
6. Het stijlen van de borders
Borders plaatsen is hier 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. Let op dat de CSS statements voor een list item met een ID of Class per Joomla versie verschilt.
/* ----------------------------------------------------------
Instellen van de borders van de hoofditems
----------------------------------------------------------- */
div.moduletable_klikmenu ul li a {
border-left: 1px #999 solid;
border-right: 1px #999 solid;
border-top: 1px #999 solid;
}
/* Border bottom instellen voor het laatste hoofditem */
/* div.moduletable_klikmenu ul li.item342 a Joomla 1.5 */
/* div.moduletable_klikmenu ul li#item-342 a Joomla 1.6 */
div.moduletable_klikmenu ul li.item-342 a /* Joomla 1.7/2.5 */
{
border-bottom: 1px #999 solid;
}
/* Border bottom instellen bij active hoofditems */
div.moduletable_klikmenu ul li.active a {
border-bottom: 1px #999 solid;
}
/* Border bottom verwijderen bij actieve hoofditems zonder subitems */
/* div.moduletable_klikmenu ul li.active.item334 a Joomla 1.5 */
/* div.moduletable_klikmenu ul li.active#item-334 a Joomla 1.6 */
div.moduletable_klikmenu ul li.active.item-334 a /* Joomla 1.7/2.5 */
{
border-bottom: 0 none;
}
/* ----------------------------------------
Instellen van de borders van de subitems
----------------------------------------- */
/* Dubbele topborders verwijderen */
div.moduletable_klikmenu ul li.active ul li a {
border-top: 0 none;
}
/* Dubbele bottom borders van de verwijderen Joomla 1.5 */
div.moduletable_klikmenu ul li.active ul li.item341 a,
div.moduletable_klikmenu ul li.active ul li.item345 a,
div.moduletable_klikmenu ul li.active ul li.item348 a {
border-bottom: 0 none;
}
/* Dubbele bottom borders van de verwijderen Joomla 1.6 */
div.moduletable_klikmenu ul li.active ul li#item-341 a,
div.moduletable_klikmenu ul li.active ul li#item-345 a,
div.moduletable_klikmenu ul li.active ul li#item-348 a {
border-bottom: 0 none;
}
/* Dubbele bottom borders van de verwijderen Joomla 1.7/2.5 */
div.moduletable_klikmenu ul li.active ul li.item-341 a,
div.moduletable_klikmenu ul li.active ul li.item-345 a,
div.moduletable_klikmenu ul li.active ul li.item-348 a {
border-bottom: 0 none;
}
De afbeeldingen hieronder geven de diverse stadia weer van het toepassen van de borderstijl.
De afbeelding hierboven laat zien wanneer alleen hooofditems alleen een left, right en top border hebben. Er zijn nergens dubbele borders, maar er is ook geen bottom border voor het actieve hoofditem.
Hierboven is een border bottom ingesteld voorhet laatste en het 2e actieve hoofditem. Nu zijn er dubbele borders ontstaan bij de subitems en bij een actief hoofditem zonder subitems.
In de afbeelding hieronder zijn de dubbele borders voor de actieve hoofditems zonder subitems gecorrigeerd.
In de afbeelding hieronder zijn de dubbele borders bij het eerste subitem verwiderd.
In de afbeelding hieronder zijn de dubbele borders van het laatste subitem verwijderd.
