Algemeen - Lees dit eerst !
Het stijlen van submenu's (CSS) en deze goed laten functioneren is niet eenvoudig. Om deze reden is op deze website een zo gedetailleerd mogelijke werkwijze beschreven en zijn ver diverse voorbeelden van submenu's uitgewerkt. Alle voorbeeldmenu's zijn getest in IE6, 7, 8 en 9, Firefox, Opera, Safari en Google Chrome.
Soorten submenu's
De gemaakte voorbeelden op deze website zijn gebaseerd op de volgende soorten menu's
- Dropdown menu
- Flyout menu
- Klik menu
- Combinatiemenu
- Menu met uitsluitend afbeeldingen, zonder HTML link teksten
Van iedere soort is een compleet voorbeeld uitgewerkt en wordt een modelmenu getoond.
Submenu's in Internet Explorer 6
Bij het gebruik van CSS voor submenu's wordt veel gebruik gemaakt van de hover functie van een list-item (li:hover) en soms een combinatie van 2 stijlen op een li element (bijvoorbeeld: li.class1.class2).
Internet Explorer 6 ondersteunt deze toepassingen niet, waardoor het submenu niet werkt. Wanneer u toch de bezoekers van uw website met Internet Explorer 6 de submenu's wilt laten tonen op dezelfde wijze als in de recentere browsers kunt u gebruik maken van een HTML Component Script (htc), dat u aan uw site toevoegt. Dit script (bestaat uit 2 bestnden) heeft de titel "What ever hover script" en kunt u hier downloaden. Meer informatie over de ontwikkelaar van dit script vindt u hier.
Note
Er zijn meerdere oplossingen voor het laten functioneren van submenu's in IE6, waaronder het "suckerfish" script. Het htc scipt heeft echter een aantal belangrijke voordelen:
- U kunt vele html elementen de pseudoclass :hover meegeven (niet alleen li:hover, maar ook ul:hover, div:hover etc.);
- combinatiestijlen (.class1.class2) werken met dit script;
- U hoeft geen aparte IE6 stijlen op te nemen.
Het plaatsen van het htc script
Wanneer u het script heeft gedownload moet het toegevoegd worden aan de Joomla website bestanden.
- Unzip het bestand (csshover3.zip -> csshover3.htc en htcmime.php).
Het php bestand zal het htc script in het juiste mime type plaatsen, wanneer dit niet juist is ingesteld op uw server. - Plaats het script en het php bestand in uw Joomla website.
U kunt het .htc en php bestand overal in uw website plaatsen, echter om het ordelijk te houden kunt u dit het beste plaatsen in uw templatemap in een subdirectory htc.
templates/<uw template map>/htc/csshover3.htc
templates/<uw template map>/htc/htcmime.php
Voorbeeld: De template map voor deze site is joomla-css.
De bestanden worden dan opgeslagen in
templates/joomla-css/htc/csshover3.htc en
templates/joomla-css/htc/htcmime.php. - Wanneer u de bestanden heeft geplaatst hoeft u verder geen aanpassingen door te voeren in andere joomla bestanden of uw index.php bestand van uw template. Een verwijzing in het template.css bestand is voldoende.
Neem de onderstaande code op in uw template.css bestand (bovenaan in het CSS document) en wijzig "uw template map" in de naam van uw template map van uw (joomla) website. Wanneer u de bestanden op een andere plaats heeft gezet moet u het pad aanpassen. Het pad voor deze code verwijst altijd vanuit de root directory en niet vanuit de locatie waar uw template.css bestand staat.
/* =====================
What ever hover htc
====================== */
body {
behavior: url("templates/uwtemplatemap/htc/htcmime.php?file=csshover3.htc");
}
Wanneer u SEF urls gebruikt kan het zijn dat het relatieve pad niet werkt. Kies dan voor een absoluut pad.
/* =====================
What ever hover htc
====================== */
body {
behavior: url("http://www.uwdomein.com/templates/uwtemplatemap/htc/htcmime.php?file=csshover3.htc");
}