 Joomla menu / main menu css stijlen
Bij het installeren van Joomla, zonder voorbeeldgegevens, is één menu reeds aangemaakt, het Main menu (in de voorbeeld website is Main Menu hernoemd naar Hoofdmenu). Standaard is de menustijl een lijst. Het is aan te bevelen geen gebruik te maken van de legacy lijsten (horizontaal, verticaal en platte lijst). In de voorbeeld website ziet het nog ongestijlde menu er als volgt uit.
Het is raadzaam, wanneer u het menu specifiek wilt stijlen, om bij de module instellingen van het menu suffixen toe te voegen. Vaak volstaat het toevoegen van de module class suffix, maar je kunt het menu ook een menu class suffix toevoegen (voor het stijlen van het list-item) of een menu tag ID (een id toevoegen aan de ul). In ons voorbeeld hebben we alle suffixen een class meegegeven van “_hoofdmenu”.
Structuur
div.moduletable_hoofdmenu
h3 Hoofdmenu
ul.menu_hoofdmenujoshoofdmenu
li.active.item1#current a
li.item2 a
li.item3 a
li.item4 Etc.
We kunnen dit menu op vele manieren anders stijlen, bijvoorbeeld met een achtergrondkleur, zonder bullits. We hebben onderstaande stijlen toegepast.
div.moduletable_hoofdmenu h3 {
margin: 5px 16px 0 0;
padding: 3px 0 3px 3px;
color: #ffffff;
background-color: #ff2700;
}
div.moduletable_hoofdmenu ul.menu_hoofdmenu {
list-style: none;
margin: 0 16px 10px 0;
padding: 0;
}
div.moduletable_hoofdmenu ul.menu_hoofdmenu li a,
div.moduletable_hoofdmenu ul.menu_hoofdmenu li a:visited {
display: block;
margin: 1px 0 1px 0;
padding: 3px 4px 3px 4px;
color: #ffffff;
text-decoration: none;
background-color: #ff2700;
}
div.moduletable_hoofdmenu ul.menu_hoofdmenu li a:hover,
div.moduletable_hoofdmenu ul.menu_hoofdmenu li.active a {
display: block;
margin: 1px 0 1px 0;
padding: 3px 4px 3px 4px;
color: #ffffff;
text-decoration: none;
background-color: #8a0f00;
}
Met deze stijlen ziet het menu er als volgt uit.
Het is ook mogelijk om achtergrondafbeeldingen toe te passen. We gebruiken hiervoor de volgende 2 afbeeldingen.
 (a, a:visited) en  (a:hover)
div.moduletable_hoofdmenu h3 {
margin: 5px 16px 0 0;
padding: 3px 0 3px 3px;
color: #ffffff;
background-color: #333333;
border: 1px #660000 dotted;
}
div.moduletable_hoofdmenu ul.menu_hoofdmenu {
list-style: none;
margin: 0 16px 10px 0;
padding: 0;
}
div.moduletable_hoofdmenu ul.menu_hoofdmenu li a,
div.moduletable_hoofdmenu ul.menu_hoofdmenu li a:visited {
display: block;
padding: 2px 0 7px 4px;
color: #660000;
text-decoration: none;
background-image: url(../images/hoofdmenu.gif);
background-position: top left;
background-repeat:repeat-x;
}
div.moduletable_hoofdmenu ul.menu_hoofdmenu li a:hover,
div.moduletable_hoofdmenu ul.menu_hoofdmenu li.active a {
display: block;
padding: 2px 0 7px 4px;
color: #660000;
text-decoration: none;
background-image: url(../images/hoofdmenu_hover.gif);
background-position: top left;
background-repeat:repeat-x;
}
Met de achtergrond afbeeldingen ziet het menu er als volgt uit.
|
en nog iets... De module titels zijn niet zichtbaar, hoe maak ik deze zichtbaar?
deze site is extreem handig, ga zo verder!