Joomla! Documentation™

Tutorial
Het maken van een submenu in een Joomla! site

Joomla! 

3.x

In Joomla kunnen submenu's óf als een menu met twee of meer niveaus getoond worden óf als compleet aparte menu modules. Dit is handig bij het bouwen van menu's die hoofd en onderliggende navigatie tonen of voor het tonen van onderliggende menu-items op een heel andere positie van uw template. Om te laten zien hoe dat kan lopen we door het aanmaken van hoofd en onderliggende menu-items en zien dan hoe deze getoond worden binnen een groot menu en een apart menu met alleen onderliggende niveaus die getoond worden op een aparte positie van een template.

We hebben om te beginnen drie basiselementen:

• Artikelen - u heeft content nodig om naar te verwijzen. Dit kunnen ook component-delen, andere menu-items, of externe links zijn.
• Menu - beschrijving van de menu-items, het soort navigatie, hun ouder/kind relatie tot andere menu-items en de volgorde dat ze getoond worden.
• Menu Module - bepaalt de positie en de weergave van het menu.

Begin, voor deze handleiding met in te loggen in het Joomla beheergedeelte. Bekijk, als u niet bekend bent hoe in te loggen, dit artikel: In of uitloggen in het beheergedeelte.

Let op: Voor deze handleiding heeft u beheerdersrechten nodig of rechten genoeg om artikelen, menu-items en modules aan te maken en aan te passen. Kijk, voor meer informatie over gebruikersrechten: ACL handleiding.

Stap 1 - Het aanmaken van uw artikelen

In ons voorbeeld maken we top-level menu-items aan voor honden en katten. Onder honden hebben we Collies en Pomeranians. Onder katten hebben we Burmees en Russisch blauw. De structuur van ons voorbeeld menu-item zal als volgt zijn:

• Honden
  • Collies
  • Pomeranians
• Katten
  • Burmees
  • Russisch blauw

Maak eerst 4 artikelen zodat onze menu-items ergens naartoe kunnen linken: Collies, Pomeranians, Burmees en Russisch blauw. Zie deze handleiding als u hulp nodig hebt bij het aanmaken van een artikel: Een nieuw artikel aanmaken.

Stap 2 - Aanmaken van het bovenste niveau menu-item

Om de structuur aan te maken moeten we naar het menu navigeren waar we onze nieuwe menu-items willen hebben. Als dit een nieuw menu is, moet u die aanmaken. Bekijk de handleiding over hoe een menu aangemaakt moet worden: Een nieuw menu aanmaken.

Zodra u uw menu in Menubeheer heeft, voegt u het bovenliggende menu toe door gebruik te maken van de Systeemlinks → Externe URL voor elke navigatie link: Honden en Katten.

Let op, er zijn andere menu-itemtypes die gebruikt kunnen worden als bovenliggend niveau van de navigatiestructuur.

Hier staan de stappen om voorbeeld menu-items aan te maken met onze voorbeeldgegevens. Zie, voor meer informatie over het aanmaken van menu-items: Toevoegen van een nieuw menu-item.

1. Navigeer naar Menubeheer door te klikken op Menu's → Beheren
   
2. In de werkbalk, klik op "Nieuw".
   
3. Voor deze oefening maken we "tijdelijke" links aan met gebruik van het Systeem → Externe URL menutype voor de Honden en Katten hoofdmenu-items. Klik dus in het nieuwe menu-item, op de Selecteren Menu-itemtype knop:
   
4. Klik op Systeemlinks scroll naar beneden en selecteer Externe URL.
   
5. Voeg de Menutitel ("Honden") toe en type bij de Link een hashtag "#" in.
   
6. Sla uw menu-item op.
   
7. Herhaal stap 2 - 6 voor het Katten bovenliggende menu-item.

Stap 3 - Maak de onderliggende menu-items aan

Nu voegt u de onderliggende menu-items toe met behulp van Artikelen → Individueel artikel door menu links naar de afzonderlijke pagina's Collies, Pomeranians, Birmees en Russisch blauw. Voor elk aangemaakt menu-item zetten we de Hoofditem op Honden of Katten.

Voor meer gedetailleerde informatie over het maken van een enkel artikel menu-type,zie: Een menu-item dat naar een artikel wijst toevoegen.

Let op: Er zijn andere menu-itemtypes die gebruikt kunnen worden als onderliggend niveau van de navigatiestructuur.

1. In de werkbalk, klik op "Nieuw".
   
2. Klik, in het nieuwe menu-item, op de Menu-itemtype selecteer knop:
   
3. Selecteer Artikelen → Individueel artikel uit de getoonde lijst.
   
4. Klik, terug op de menu-item detail pagina, op de Selecteer artikel lijst.
   
5. Selecteer het "Collies" artikel voor dit voorbeeld.
   
6. Vul, zodra u bent teruggekeerd op de artikel detailpagina, het "Menu-Item Titel" veld in. Klik vervolgens op het Hoofditem in de rechter kolom. Zoek en selecteer het Honden item door door de item-lijst te scrollen. Let op dat menu-niveaus getoond worden met streepjes: "-" (een enkel streepje) is het hoogste niveau, "--" (twee streepjes) is het tweede niveau, "---" derde niveau enzovoort.
   
7. Klik op de knop Opslaan & sluiten bovenaan.
   
8. Herhaal de stappen 1-7 voor de overige artikelen Pomeranians met de Honden ouders en de artikelen Burmees en Russisch blauw voor de Katten ouder.
9. Indien u klaar bent met de "Menu-items" sectie, zou menu-item beheer er ongeveer als volgt uitzien:
   

Stap 4 - De Menu Module instellen

Op dit punt hebben we onze Artikelen en Menu-items af. Nu moeten we de Menu Module updaten. In Joomla!, bepaalt de Menu Module drie belangrijke dingen:

1. Hoe het menu eruit ziet;
2. Waar op de pagina het zal worden getoond;
3. Op welke pagina's het getoond wordt.

Wij zullen twee voorbeelden laten zien:

• In het eerste voorbeeld stellen we de parameters in die de bovenliggende niveau menu-items tonen met de onderliggende items.
• In het tweede voorbeeld voegen we een extra menu-module toe die verschijnt in de linker kolom en die alleen de menu-items op het tweede niveau toont.

Let op: We doen beide voorbeelden met het Protostar template dat in de core Joomla! installatie zit.

Voorbeeld 1 - Een Menu Module met menu-items op het tweede niveau

Volg, om dit te laten zien als één module, deze stappen:

1. Navigeer naar Extensies → Modules en zoek de Menu Module gekoppeld aan uw menu. Kijk, als u een nieuwe menu-module moet aanmaken, voor instructies over het aanmaken van een menu-module: Module Menu
   
2. Klik op de modulenaam gekoppeld aan uw menu. In deze handleiding selecteren we Main Menu. Let op: in deze afbeelding is gefilterd door te kiezen voor Menu in het type filter.
   
3. Zet in de Module details het Startniveau op 1, het Eindniveau op Alle en zet Toon submenu-items op Ja.
   
4. Voor deze handleiding hebben we stijling toegevoegd op het Geavanceerd tabblad. In het Menu class achtervoegsel hebben we ingevoerd navbar-nav nav-pills. U kunt ook navbar-nav nav-tabs teovoegen voor een iets andere uitstraling. Let op: er staat een spatie voor navbar-nav.
   
5. Klik op "'Opslaan & sluiten"'.
   
6. Ga naar de frontend van uw site en uw menu zou er ongeveer zo uit moeten zien. In het Protostar Template worden de onderliggende menu-items getoond als drop-down menu-items.
   
7. De gegenereerde bron-code zal er ongeveer zo uitzien:

<ul class="nav menu navbar-nav nav-pills">
  <li class="item-101 current active"><a href="/" >Home</a></li>
  <li class="item-102"><a class="dropdown-toggle" href="/about-us" >About Us</a></li>
  <li class="item-210 deeper parent"><a href="#" >Dogs</a>
    <ul class="nav-child unstyled small">
      <li class="item-212"><a href="/2015-11-24-14-19-31/collies" >Collies</a></li>
      <li class="item-213"><a href="/2015-11-24-14-19-31/pomeranians" >Pomeranians</a></li>
    </ul>
  </li>
  <li class="item-211 deeper parent"><a href="#" >Cats</a>
    <ul class="nav-child unstyled small">
      <li class="item-214"><a href="/2015-11-24-14-20-12/burmese" >Burmese </a></li>
      <li class="item-215"><a href="/2015-11-24-14-20-12/russian-blues" >Russian Blues</a></li>
    </ul>
  </li>
</ul>

Voorbeeld 2 - Een tweede Menu Module met onderliggende menu-items

Volg, om in een aparte module te tonen op een andere positie, deze stappen:

1. Navigeer naar Extensies → Modules en zoek of maak een tweede Menu Module gekoppeld aan uw menu. Kijk, als u onbekend bent met het aanmaken van een nieuwe menu-module, voor instructies over het aanmaken van een menu-module: Module menu
   
2. Klik op de modulenaam gekoppeld aan uw menu. In deze handleiding selecteren we Right Menu. Let op: in deze afbeelding is gefilterd door te kiezen voor Menu in het type filter.
   
3. Stel, in de Module details, het Startniveau in op 2, het Eindniveau in op Alle en stel Toon submenu-items in op Ja. Let op: De positie is veranderd en het menu waar we naar verwijzen is Main Menu.
   
4. Voor deze handleiding hebben we het tabblad Menutoewijzing gebruikt en hebben deze menumodule toegewezen aan alle pagina's behalve de startpagina.
   
5. Klik op "'Opslaan & sluiten"'.
   
6. Ga naar de frontend van uw website en navigeer naar het Collies artikel. Uw menu zou er ongeveer zo uit moeten zien. Merk op dat alleen de onderste niveau sub-items zichtbaar zijn.
   
7. De gegenereerde bron-code zal er ongeveer zo uitzien:

<ul class="nav menu">
  <li class="item-212 current active"><a href="/2015-11-24-14-19-31/collies" >Collies</a></li>
  <li class="item-213"><a href="/2015-11-24-14-19-31/pomeranians" >Pomeranians</a></li>
</ul>

Sub-Sub-Menu's

Met behulp van dezelfde techniek, is het gemakkelijk sub-menu's te maken op een derde niveau. U maakt gewoon een bovenliggend menu-item op het tweede niveau. U gebruikt nu dezelfde techniek voor het maken van een aparte menu-module die begint met niveau 2 en eindigt op niveau 3. Dit toont alleen de derde niveau menu-items.