Op dit moment is het niet te zien als onder een topmenu een sub zit. Is het ook mogelijk om er een pijltje of iets dergelijks aan toe te voegen?
Fly-out menu
Hiernaast is een model opgenomen van een Fly-out menu.
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 hebben de hoofditems vaste breedte (120 pixels). De submenu's hebben ook een vaste breedte (160 pixels). De hoogte van de hoofditems en subitems is 22 pixels.
De marge van het menu ten opzicht van de content is aangegeven in de stijlen van de container van het menu.
2. Stijl de container van het menu
De module heeft in het voorbeeldmenu een Module Class Suffix: _flyout. We geven de modulecontainer de volgende stijl mee (geldt voor het getoonde menu op deze pagina).
/* ---------------------------
Module container instelling
--------------------------- */
div.moduletable_flyout {
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.
/* ---------------------------------------
Resetten en instellen van de list-items
--------------------------------------- */
div.moduletable_flyout ul,
div.moduletable_flyout ul li,
div.moduletable_flyout ul li ul,
div.moduletable_flyout ul li ul li {
list-style: none;
margin: 0;
padding: 0;
}
Na het toepassen van de list stijlen ziet het menu er als volgt uit.
4. Hoofd en subitems positioneren incl. IE6 en IE7 Fix
Na het resetten van de list stijlen gaan we het menu positioneren. De hoofditems blijven onder elkaar staan, dus je zou denken dat we de list-items niet hoeven te floaten. Echter in IE6 en IE7 sluiten de list-items vertikaal dan niet op elkaar aan. Dus we geven hier wel een float: left en tevens geven we de <ul> van deze items een width van 120px, waardoor de list-items toch onder elkaar worden geplaatst.
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. De hoofditems worden dus relatief gepositioneerd.
/* ----------------------------------
De hoofd- en subitems positioneren
----------------------------------- */
div.moduletable_flyout ul {
width: 120px; /* IE 6/7 fix */
}
div.moduletable_flyout ul li {
position: relative;
float: left; /* IE 6/7 fix */
width: 120px;
}
div.moduletable_flyout ul li ul {
position: absolute;
z-index: 2;
}
Na toepassing van de stijlen ziet het menu er als volgt uit. De hoofd- en subitems vallen allemaal over elkaar heen.
5. Achtergrond afbeeldingen 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 deze achtergrond afbeelding toepassen op de hoofdmenu-items
/* ----------------------------------------------------------
Het instellen van achtergrond afbeelding van de hoofditems
---------------------------------------------------------- */
div.moduletable_flyout ul li {
background-image: url(../images/flyout.png);
background-position: 0 0;
background-repeat: repeat-x;
}
div.moduletable_flyout ul li:hover {
background-image:url(../images/flyout.png);
background-position: 0 -58px;
background-repeat: repeat-x;
}
Na het toepassen van de stijlen ziet het menu er als volgt uit.
6. Stijlen van de hoofd link items
We gaan vervolgens de hoofd link items stijlen.
/* -------------------------------------
Het instellen van de hoofd link items
------------------------------------- */
div.moduletable_flyout ul li a {
display: block;
color: #004678;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 13px;
text-decoration: none;
padding: 4px 10px 5px 10px;
width: 100px; /* IE6 Fix */
height: 13px; /* IE6 Fix */
}
div.moduletable_flyout ul li a:hover,
div.moduletable_flyout 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 10px 5px 10px;
width: 100px; /* 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 link stijlen ziet het menu er als volgt uit.
7. Het stijlen van de borders van de list-items
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_flyout ul li {
border: 1px #999 solid;
margin: -1px 0 0 0;
}
div.moduletable_flyout ul li ul {
margin: 1px 0 0 0;
}
div.moduletable_flyout ul li ul li {
border: 1px #999 solid;
margin: -1px 0 0 -1px;
}
Na het instellen van de borders ziet het menu er als volgt uit.
8. Het instellen van de achtergronden van de subitems
Bij het instellen van de achtergronden geldt niet alleen een andere achtergrond afbeelding de positie van de <ul> van de subitems moet iets worden gecorrigeerd om op dezelfde hoogte te lijnen als de hoofditems. Deze correctie betreft de padding en lettertype van de hoofditem (samen 22 pixels). We geven de <ul> dus een top marge van -22 pixels. Verder willen we dat de sublist-items rechts komt te staan van de hoofditems en wel 121 pixels (120 pixels is de width van de hoofditems + 1 pixel van de border). Vanaf het 2e niveau is deze marge 161 pixels (160 pixels is de breedte van een subitem + 1 pixel van de border.
/* -----------------------------
Het instellen van de subitems
----------------------------- */
div.moduletable_flyout ul li ul {
margin: -22px 0 0 121px;
}
div.moduletable_flyout ul li ul li {
width: 160px;
background-image:url(../images/flyout.png);
background-position: 0 -80px;
background-repeat: repeat-x;
}
div.moduletable_flyout ul li ul li:hover {
width: 160px;
background-image:url(../images/flyout.png);
background-position: 0 -121px;
background-repeat: repeat-x;
}
div.moduletable_flyout ul li ul li ul {
margin: -22px 0 0 161px;
}
Na het toepassen van deze stijlen ziet het menu er als volgt uit.
9. Het instellen van de sub link items
Hieronder zijn de stijlen aangegeven van de sub link items voor alle 3 niveau's.
/* -----------------------------------
Het instellen van de sub link items
----------------------------------- */
/* 1e subniveau */
div.moduletable_flyout ul li ul li a,
div.moduletable_flyout ul li.active ul li a,
/* 2e subniveau */
div.moduletable_flyout ul li ul li ul li a,
div.moduletable_flyout ul li.active ul li.active ul li a,
/* 3e subniveau */
div.moduletable_flyout ul li ul li ul li ul li a,
div.moduletable_flyout 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 10px 5px 10px;
width: 140px; /* IE6 Fix */
height: 13px; /* IE6 Fix */
}
/* 1e subniveau */
div.moduletable_flyout ul li ul li a:hover,
div.moduletable_flyout ul li.active ul li.active a,
/* 2e subviveau */
div.moduletable_flyout ul li ul li ul li a:hover,
div.moduletable_flyout ul li ul li ul li ul li a:hover,
/* 3e subniveau */
div.moduletable_flyout ul li.active ul li.active ul li.active a,
div.moduletable_flyout 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 10px 5px 10px;
width: 140px; /* IE6 Fix */
height: 13px; /* IE6 Fix */
}
Na het toepassen van de stijlen ziet het menu er als volgt uit.
10. Het plaatsen van de achtergrondafbeeldingen voor de actieve menu's
De actieve achtergond afbeeldingenworden met de volgende stijlen ingesteld.
/* -------------------------------------------------------
Het plaatsen van de achtergronden van de actieve menu's
------------------------------------------------------- */
/* Hoofditems */
div.moduletable_flyout ul li.active {
background-image:url(../images/flyout.png);
background-position: 0 -58px;
background-repeat: repeat-x;
}
/* Subitems */
div.moduletable_flyout ul li ul li.active {
background-image:url(../images/flyout.png);
background-position: 0 -120px;
background-repeat: repeat-x;
}
11. Het tonen en verbergen van de submenu's
/* ------------------------------------------
Het het verbergen en tonen van de subitems
------------------------------------------- */
div.moduletable_flyout ul li ul {
left: -999em;
}
div.moduletable_flyout ul li:hover ul {
left: auto;
}
Na toepassen van de stijlen ziet het menu er als volgt uit.
12 Aanvullende stijlen bij meerdere niveau's van submenu's
Het is de beldoeling dat het 2e en 3e niveau van subitems verborgen blijft als we over een hoofditem hoveren. Deze mogen pas verschijnen als we hoveren over het subitems met subitems etc. De onderstaande stijlen zorgen daarvoor.
/* --------------------------------------------
AANVULLENDE STIJLEN BIJ MEERDERE SUBNIVEAU'S
-------------------------------------------- */
/* Het stijlen van de SUBITEMS vanaf het 2e subniveau */
div.moduletable_flyout ul li ul li ul,
div.moduletable_flyout ul li:hover ul li ul {
left: -999em;
}
div.moduletable_flyout ul li:hover ul li:hover ul {
left: auto;
}
/* Het stijlen van de SUBITEMS vanaf het 3e subniveau */
div.moduletable_flyout ul li ul li ul li ul,
div.moduletable_flyout ul li:hover ul li ul li ul,
div.moduletable_flyout ul li:hover ul li:hover ul li ul {
left: -999em;
}
div.moduletable_flyout ul li:hover ul li:hover ul li:hover ul {
left: auto;
}
13 Pijltjes toevoegen
Om aan te geven dat er een submenu schuilt achter een menu-item kan een pijlltje worden ingevoegd. In het voorbeeld-Flyout-menu aan de top van deze pagna zijn deze pijltjes toegepast.
Afbeeldingen van pijltjes voor het Fly-out meu vindt u hieronder.
Wanneer u met uw muisaanwijzer op de afbeelding staat en rechts klikt kunt u de afbeelding opslaan en naar uw eigen server uploaden in de Joomla images directory. De zwarte achtergrondkleur van de witte pijl wordt niet mee opgeslagen. De pijl is dus wit.
Om de pijltjes te kunnen toepassen moet u eerst de Joomla menu instelling aanpassen. Ga naar het betreffende menu en menu-item. Aan de rechterzijde vindt u de opties van het menu-item. Klik op Linktype opties en selecteer de Linktype afbeelding door op "Selecteren" te klikken. Selecteer "Arrow-red.png" of "Arrow-white.png", afhankelijk van welke afbeelding u wit gebruiken.
Zorg dat Menutitel toevoegen op "Ja" staat.
Doe dit voor ieder hoofd of sub menu-item, die weer submenu-items heeft.
Wanneer u het goed gedaan heeft zult u zien dat het pijltje aan de linkerzijde van de menu tekst staat. Om deze aan de rechterkant te krijgen moet u CSS toepassen.
CSS
/* --------------------------------------------
MENU PIJLTJES STIJLEN
-------------------------------------------- */
div.moduletable_flyout ul li a img,
div.moduletable_flyout ul li ul li a img,
div.moduletable_flyout ul li ul li ul li a img {
float: right;
margin: 2px 0 0 0;
}
Hier mee is het menu afgerond.
Reacties (10)
-
Zo'n toevoeging is inderdaad een verbetering. Ik zal dit op de Joomla CSS site plaatsen. Als het gemaakt is laat ik het u weten.
-
De pijltjes toevoegen in het Fly-out menu is inmiddels inclusief CSS op deze pagina opgenomen. Succes.
-
1901-12-13 20:45:52 |Unregistered| Rob van Oudheusden - RE: Fly-out menuStuur even je website url naar info@joomla-css.nl. Dan kan ik even kijken.
-
Jullie mail account is onbereikbaar. Ik heb jullie diverse mailtjes gestuurd maar die komen niet aan.
-
1901-12-13 20:45:52 |Unregistered| René van Santen - Fly out menuIk heb de bovenstaande gegevens zowel aan het begin van de template.css als aan het aan het eind gezet. In beide gevallen zie ik niks terug? Wat doe ik verkeerd?
Powered by Compojoom comment 4.2.1