Een eigen Joomla template maken (14) – de navigatie (dl 1)

Joomla 1.5 Templates
Inmiddels zijn we gestart met een nieuwe serie over joomla templates in Joomla 1.5!

In het vorige artikel in deze serie heb je een nieuwe bovenkant gemaakt van Joomla template: een logo, omschrijving en zoekveld. In dit deel een uitleg over de navigatie.

Het beoogde effect: een navigatiebalk
Het doel van dit artikel is de volgende navigatiebalk:

De navigatiebalk insluiten
De navigatie sluit je in met de volgende php include:

De inhoud van navigation.php
Het bestand dat je insluit (navigation.php) ziet er alsvolgt uit:

Toelichting navigation.php
Zoals je kunt zien bestaat deze include uit 3 onderdelen:
1) een wrapper DIV met (id = navigation)
En daarbinnen:
2) een DIV voor de linkerkant van de navigatie (met de inhoud van de navigatie; id = navigationleft)
3) een DIV aan de rechterkant (met eigen inhoud; id = navigationright)

De hoofdnavigatie aan de linkerkant
Hier valt nog het volgende over te melden:
1) Voor de linkerkant van de navigatie kijk je of de navigatie module actief is. Dit doe je met de functie mosCountModules("user3"). De navigatie module heeft de naam user3.
2) De inhoud van topmenu wordt nu opgehaald (dit is de standaard navigatie van Joomla). Deze laad je daarna in met mosLoadModules ( 'user3',-1).
3) Het getal -1 zorgt ervoor dat het automatisch een lijst wordt. De code wordt dus opgebouwd uit

Waar stel je de inhoud van het topmenu in?
In de backend van Joomla kun je de inhoud van je topmenu instellen; ga hiervoor naar Menu > topmenu.

Het stylesheet
Je kunt in Joomla instellen dat een lijst horizontaal of verticaal getoond moet worden. Dit kan via de backend in de Modules sectie. Klik op de naam van het menu en kies vervolgens de 'list style'. Hierover meer in het volgende artikel. Voor nu kies ik ervoor om de horizontale weergaven zelf met CSS te regelen [zie onder].

De hoofdnavigatie aan de rechterkant
Zoals je kunt zien is de navigatie aan de rechterkant volledig uitgetypt. Dit heet hard-coded. Dit zul je wijzigen naar een eigen menu. Hoe dit in zijn werk gaat licht ik toe in het volgende artikel in deze serie.

Het CSS stylesheet
Het stylesheet dat bij de navigatie hoort ziet er als volgt uit:

Toelichting stylesheet
Een paar dingen zijn de moeite om even toe te lichten:
1) Met #navigation li > display:inline zorg je ervoor dat je een horizontale lijst krijgt.
2) Met li:last-child kun je aangeven dat het laatste element in een lijst een andere behandeling moet krijgen; dat gebruik je hier om het streepje aan de rechterkant van het laatste item van je navigatie niet te tonen.
3) De linker- en rechterkant van de navigatie lijn ik links en rechts uit met float:left en float:right.

Hoe nu verder?
Het is natuurlijk niet de bedoeling dat links en rechts dezelfde informatie staat. In het volgende artikel licht ik toe:
a) hoe je een eigen menu erbij maakt voor het rechterdeel van de navigatie en
b) elementen van links naar rechts verplaatst.

Downloads
De laatste versie van het template vind je in de downloadsectie van whelp.nl

Stem / Bookmark [?]