Het maken van een submenu
From Joomla! Documentation
Het maken van een submenu in een Joomla! site
Contents
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.
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.
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.- Navigeer naar Menubeheer door te klikken op Menu's → Beheren
- In de werkbalk, klik op "Nieuw".
- 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:
- Klik op Systeemlinks scroll naar beneden en selecteer Externe URL.
- Voeg de Menutitel ("Honden") toe en type bij de Link een hashtag "#" in.
- Sla uw menu-item op.
- Herhaal stap 2 - 6 voor het Katten bovenliggende menu-item.
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.
- In de werkbalk, klik op "Nieuw".
- Klik, in het nieuwe menu-item, op de Menu-itemtype selecteer knop:
- Selecteer Artikelen → Individueel artikel uit de getoonde lijst.
- Klik, terug op de menu-item detail pagina, op de Selecteer artikel lijst.
- Selecteer het "Collies" artikel voor dit voorbeeld.
- 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.
- Klik op de knop Opslaan & sluiten bovenaan.
- 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.
- 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:
- Hoe het menu eruit ziet;
- Waar op de pagina het zal worden getoond;
- 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.
Volg, om dit te laten zien als één module, deze stappen:
- 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
- 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.
- Zet in de Module details het Startniveau op 1, het Eindniveau op Alle en zet Toon submenu-items op Ja.
- 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.
- Klik op "'Opslaan & sluiten"'.
- 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.
- 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>
Volg, om in een aparte module te tonen op een andere positie, deze stappen:
- 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
- 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.
- 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.
- Voor deze handleiding hebben we het tabblad Menutoewijzing gebruikt en hebben deze menumodule toegewezen aan alle pagina's behalve de startpagina.
- Klik op "'Opslaan & sluiten"'.
- 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.
- 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.