Probleem is hiermee opgelost. Bedankt.
Afbeeldingen menu
Hierboven is een fantasie model opgenomen van een afbeeldingenmenu, met alleen afbeeldingen. Hoewel dit model geen submenu's heeft kan dit principe ook worden toegepast om subitems.
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 menu-items een vaste breedte (125 pixels) en hoogte (94 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: _afbeeldingen.
We geven de modulecontainer de volgende stijl mee (geldt voor het getoonde menu op deze pagina).
/* -----------------
Module instelling
----------------- */
div.moduletable_afbeeldingen {
clear: both;
height: 80px;
margin-bottom: 20px;
}
Zonder stijling ziet het menu er als volgt uit.
3. List stijlen resetten
Alle list stijlen worden eerst gereset.
/* --------------------------------------------
Resetten en instellen van de list hoofditems
-------------------------------------------- */
div.moduletable_afbeeldingen ul,
div.moduletable_afbeeldingen ul li {
list-style: none;
margin: 0;
padding: 0;
}
Na het toepassen van de reset stijlen ziet het menu er als volgt uit.
4. List items naast elkaar plaatsen
De list items laten we links floaten om ze naast elkaar te zetten.
/* ----------------
List item stijlen
-------------------- */
div.moduletable_afbeeldingen ul li {
float: left;
}
Na het toepassen van de stijlen ziet het menu er als volgt uit.
5. Achtergrond afbeelding toepassen
We hebben voor de menuachtergronden één afbeeldingen met Photoshop gemaakt, voor alle situaties van de menu-items. Maak geen aparte afbeeldingen voor de hover of active status van het menu. Het voordeel namelijk van één afbeelding voor zowel de normale, de hover en de 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.
De afbeelding ziet er als volgt uit.
8. Het instellen van de menu-item links met de achtergrondafbeelding
Voor het instellen van de links houden we rekening met IE6.
De linkitems krijgen een font-size van 0 en een line-height van 0. Hiermee zijn de linkitems nagenoeg onzichtbaar geworden. In Joomla 1.5 is er een span om de linktekst heen geplaatst. Hierdoor kunt u voor Joomla 1.5, als alternatief voor de font-size en line-height, de span van de link een visibility: hidden geven. Let op dat de CSS statements voor een list item met een ID of Class per Joomla versie verschilt.
/* ------------------------------------------------
Achtergrond afbeelding instellen voor link items
------------------------------------------------- */
/* Menu-item Sun */
/* div.moduletable_afbeeldingen ul li.item370 a Joomla 1.5 */
/* div.moduletable_afbeeldingen ul li#item-370 a Joomla 1.6 */
div.moduletable_afbeeldingen ul li.item-370 a /* Joomla 1.7/2.5 */
{
background-image: url(../../../images/joomla15/afbeeldingenmenu.jpg);
background-position: 0 0;
background-repeat: no-repeat;
display: block;
text-decoration: none;
width: 125px; /* IE6 Fix */
height: 94px; /* IE6 Fix */
color: #000;
font-size: 0;
line-height: 0;
}
/* div.moduletable_afbeeldingen ul li.item370 a:hover,
div.moduletable_afbeeldingen ul li#current.item370 a Joomla 1.5 */
/* div.moduletable_afbeeldingen ul li#item-370 a:hover,
div.moduletable_afbeeldingen ul li.current#item-370 a Joomla 1.6 */
div.moduletable_afbeeldingen ul li.item-370 a:hover,
div.moduletable_afbeeldingen ul li.current.item-370 a /* Joomla 1.7/2.5 */
{
background-image: url(../../../images/joomla15/afbeeldingenmenu.jpg);
background-position: 0 -94px;
background-repeat: no-repeat;
display: block;
text-decoration: none;
width: 125px; /* IE6 Fix */
height: 94px; /* IE6 Fix */
color: #000;
font-size: 0;
line-height: 0;
}
/* Menu-item Flower */
/* div.moduletable_afbeeldingen ul li.item371 a Joomla 1.5 */
/* div.moduletable_afbeeldingen ul li#item-371 a Joomla 1.6 */
div.moduletable_afbeeldingen ul li.item-371 a /* Joomla 1.7/2.5 */
{
background-image: url(../../../images/joomla15/afbeeldingenmenu.jpg);
background-position: -125px 0;
background-repeat: no-repeat;
display: block;
text-decoration: none;
width: 125px; /* IE6 Fix */
height: 94px; /* IE6 Fix */
color: #000;
font-size: 0;
line-height: 0;
}
/* div.moduletable_afbeeldingen ul li.item371 a:hover,
div.moduletable_afbeeldingen ul li#current.item371 a Joomla 1.5 */
/* div.moduletable_afbeeldingen ul li#item-371 a:hover,
div.moduletable_afbeeldingen ul li.current#item-371 a Joomla 1.6 */
div.moduletable_afbeeldingen ul li.item-371 a:hover,
div.moduletable_afbeeldingen ul li.current.item-371 a /* Joomla 1.7/2.5 */
{
background-image: url(../../../images/joomla15/afbeeldingenmenu.jpg);
background-position: -125px -94px;
background-repeat: no-repeat;
display: block;
text-decoration: none;
width: 125px; /* IE6 Fix */
height: 94px; /* IE6 Fix */
color: #000;
font-size: 0;
line-height: 0;
}
/* Menu-itenm Bike */
/* div.moduletable_afbeeldingen ul li.item372 a Joomla 1.5 */
/* div.moduletable_afbeeldingen ul li#item-372 a Joomla 1.6 */
div.moduletable_afbeeldingen ul li.item-372 a /* Joomla 1.7/2.5 */
{
background-image: url(../../../images/joomla15/afbeeldingenmenu.jpg);
background-position: -250px 0;
background-repeat: no-repeat;
display: block;
text-decoration: none;
width: 125px; /* IE6 Fix */
height: 94px; /* IE6 Fix */
color: #000;
font-size: 0;
line-height: 0;
}
/* div.moduletable_afbeeldingen ul li.item372 a:hover,
div.moduletable_afbeeldignen ul li#current.item372 a Joomla 1.5 */
/* div.moduletable_afbeeldingen ul li#item-372 a:hover,
div.moduletable_afbeeldingen ul li.current#item-372 a Joomla 1.6 */
div.moduletable_afbeeldingen ul li.item-372 a:hover,
div.moduletable_afbeeldingen ul li.current.item-372 a /* Joomla 1.7/2.5 */
{
background-image: url(../../../images/joomla15/afbeeldingenmenu.jpg);
background-position: -250px -94px;
background-repeat: no-repeat;
display: block;
text-decoration: none;
width: 125px; /* IE6 Fix */
height: 94px; /* IE6 Fix */
color: #000;
font-size: 0;
line-height: 0;
}
/* Menu-item Globe */
/* div.moduletable_afbeeldingen ul li.item373 a Joomla 1.5 */
/* div.moduletable_afbeeldingen ul li#item-373 a Joomla 1.6 */
div.moduletable_afbeeldingen ul li.item-373 a /* Joomla 1.7/2.5 */
{
background-image: url(../../../images/joomla15/afbeeldingenmenu.jpg);
background-position: -375px 0;
background-repeat: no-repeat;
display: block;
text-decoration: none;
width: 125px; /* IE6 Fix */
height: 94px; /* IE6 Fix */
color: #000;
font-size: 0;
line-height: 0;
}
/* div.moduletable_afbeeldingen ul li.item373 a:hover,
div.moduletable_afbeeldingen ul li#current.item373 a =Joomla 1.5 */
/* div.moduletable_afbeeldingen ul li#item-373 a:hover,
div.moduletable_afbeeldingen ul li.current#item-373 a Joomla 1.6 */
div.moduletable_afbeeldingen ul li.item-373 a:hover,
div.moduletable_afbeeldingen ul li.current.item-373 a /* Joomla 1.7/2.5 */
{
background-image: url(../../../images/joomla15/afbeeldingenmenu.jpg);
background-position: -375px -94px;
background-repeat: no-repeat;
display: block;
text-decoration: none;
width: 125px; /* IE6 Fix */
height: 94px; /* IE6 Fix */
color: #000;
font-size: 0;
line-height: 0;
}
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.
Reacties (5)
-
1901-12-13 20:45:52 |Unregistered| Rob van Oudheusden - AfbeeldingenmenuIn Joomla 1.7 zijn de id's van de items wederom gewijzigd in classes. Dus de stijl li#item-xx moet nu weer worden geschreven als li.item-xx. Tja, zo blijven we wel bezig toch.
Als je dus in je CSS bestand de hekjes # van de list-items wijzigt in een punt . is het probleem waarschijnlijk opgelost.
-
1901-12-13 20:45:52 |Unregistered| Fred Jansen - AfbeeldingenmenuIk heb het geheel werkzaam gekregen in Joomla 1.6. Na conversie van Joomla 1.6.5 naar Joomla 1.7.0 werkt het echter niet meer. Ik krijg een menu te zien als na punt 4. Itemnummers, etc. kloppen. Daar ligt het dus iet aan. Waaraan kan het dan wel liggen?
Powered by Compojoom comment 4.2.1