Tutorial: Het maken van een submenu

Afdrukken PDF
Geschreven door Remco op maandag 09 maart 2009 22:15, in: Menu's (1.5.x)
In Joomla!, kan men submenu's presenteren, hetzij als een menu met twee of meer niveaus of als volledig aparte menu-modules. Om te laten zien hoe u dit moet doen, zullen we stap voor stap door het creëren van een twee-niveau menu gaan en vervolgens laten zien dat het zowel voor een groot menu of als gescheiden menu’s met een onderniveau. 
 

Voorbeeld Data 

In ons voorbeeld, hebben we een menu genaamd "Huisdieren". Het zal twee top-level menu-items hebben, genaamd "Honden" en "Katten". Onder Honden, hebben we "Collies" en "Greyhounds". Onder Katten hebben we "Tabbies" en "Siamese". Dus de structuur van het huisdieren menu ziet er als volgt uit: 
  • Honden 
    • Collies 
    • Greyhounds 
  • Katten 
    • Tabbies 
    • Siamese 

Menu en Menu Items 

Voor het maken van deze structuur, creëren we een menu met twee niveaus van menu-items.

We doen dit, zowel als we alles willen laten zien als een groot menu, of als we aparte menu-modules willen laten zien (een ouder kind en twee menu's).

We zullen dit later laten zien, als we de modules aanmaken. 
Hier zijn de stappen om het menu en de menu-items aan te maken. 
  1. Maak een nieuw menu in de Menu Manager genaamd "Huisdieren". 
  2. Voeg een nieuw menu-item genaamd "Honden" toe. Voor dit voorbeeld, maakt het niet echt uit wat het type van de menu-items is. Bijvoorbeeld, je kunt gewoon een artikel genaamd "Pet Menu Test"  aanmaken, en maak al de menu-items als type artikel → artikel Inrichting en verwijs naar dit artikel. 
  3. Voeg een tweede menu item "collies" toe ( Menu Soort artikel Layout als hierboven). In het Hoofdniveau vak, selecteert u "Honden", zoals hieronder weergegeven:
    submenu1
  4. Voeg een derde menu item toe "Greyhounds", opnieuw wordt "Honden" het hoofd menu item. (Vergeet niet, deze kunnen allemaal naar hetzelfde artikel verwijzen.) 
  5. Voeg de "Katten" in het menu. Wees er zeker van dat dit menu-item "top" is. 
  6. Voeg de laatste twee menu-items toe, "Tabbies" en "Siamese", waardoor "Katten" voor beide het hoofd menu-item is. 
Als u klaar bent, moet het menu-item Manager er als volgt uitzien:
submenu2
 

Menu Modules 

Op dit punt hebben we het menu en Menu objecten behandeld. Nu moeten we menu Modules aanmaken.  In Joomla!, bepaalt de Menu-module drie belangrijke dingen: (1) hoe het menu eruit ziet, (2) waar op de pagina het gepresenteerd zal worden, en (3) op welke pagina's het gepresenteerd zal worden. We zullen twee voorbeelden laten zien. In het eerste voorbeeld, zullen we er een maken. Menu Module that shows all of the items in one menu. Menu Module dat alle items in een menu laat zien. In de tweede, zullen we drie afzonderlijke menu modules aan maken, die de  Dieren, Honden, Katten menu's als afzonderlijke modules laat zien. 
Een Menu Module 
Om dit te laten zien als een module, volg deze stappen: 
  1. Navigeer naar Extensiebeheer → Module Manager, klik op de "New" icoon in de werkbalk en kies "Menu". 
  2. Voer de titel in als "Huisdieren Menu" en positioneer als "links". 
  3. In de  menu Opdracht, voer "Selecteer Menu Item (s) in de lijst" en kies "Home" (onder "hoofdmenu"), en alle van de menu-items in het kader van de "huisdieren-menu". 
  4. In Menu Naam, selecteert u "huisdieren-menu" van de drop-down keuzelijst. 
  5. Als u de standaard "rhuk_milkyway" sjabloon gebruikt en u  wilt het menu laten uitzien als de andere menu's in de Advanced Parameters voer "_menu" voor Module Class Suffix. 
Nu, ga naar de front-end home page: U ziet het Dieren Menu zoals hieronder weergegeven: 
 
dierenmenu
 
Klik op de Honden menu-item. Het geselecteerde artikel komt te voorschijn en het Honden-menu wordt uitgevouwen om de twee submenu-items, Collies en Greyhounds. 
Merk op dat we een parameter in de Module Manager zo kunnen instellen dat altijd submenu items getoond worden. Hier hebben we de standaard waarde van "Nee" af moeten zetten. Klik op "collies" en het artikel verandert. (Dit zou gebeuren, als we verschillende artikelen hadden voor elk menu item!) Het scherm moet er als hieronder uitzien: 
 
submenu4

Het kruimelpad toont nu drie niveaus: Home, Honden, Collies. Omdat we submenu’s gebruiken, weet Joomla! dat collies onder Honden valt.

 

Aparte menu Modules 

Nu zullen we ons voorbeeld  veranderen door drie afzonderlijke menu’s aan te maken - een voor het hoogste niveau (honden en katten), een voor de honden (Collies en Greyhounds), en een voor de katten (Tabbies en Siamese). 
 
 

Zorg ervoor dat uw menu items elk een unieke Alias waarde hebben. Als u de opdracht Kopiëren in de werkbalk van het menu-item Manager gebruikt voor het maken van deze menu-items, zal de alias  dezelfde zijn als het item dat wordt gekopieerd.

 In dit geval, moet u de Alias bewerken zodat de waarde uniek is (bijvoorbeeld dezelfde als de titel). Als u twee dezelfde Alias waarden heeft, zullen de menu’s  niet correct werken als de parameter SEF URL's is ingesteld op Ja in Algemene instellingen. 
Om dit te doen: 
  1. Open het menu Dieren in de Module Manager en verander de titel naar "Huisdieren Menu Top Level Alleen". 
  2. Selecteer de linker positie. 
  3. Onder Module Parameters, selecteer de menu naam "Huisdieren Menu" 
  4. Onder Module Parameters, verander het menu Stijl op "Lijst". 
  5. Stel de Start-niveau op "0" en de Eind-niveau op "1". 
  6. Dit is optioneel. Het maakt het mogelijk uw sjabloon toe te passen speciaal een menu stijl op het menu (een grens, bijvoorbeeld). Bij Advanced Module Parameters gezet "_menu" in Module Class Suffix. 
  7. Voor submenu Honden  in extensies menu selecteer Module Manager, klik op Nieuw en selecteer Menu en de titel "Honden Submenu". 
  8. Stel de positie naar "links". 
  9. Dit deel is erg belangrijk. We willen dit submenu alleen  laten zien wanneer we in een van de honden menu-items zijn. :Dus, in het menu Opdracht vak, selecteert u de drie punten "Dogs", "collies", en "Greyhounds", zoals hieronder weergegeven: 
    submenu5
  10. Onder Module Parameters, kies de menu naam "Huisdieren Menu" en verander de Menu Style op "Lijst". 
  11. Stel de Start-niveau op "1" en Eind niveau "2". 
  12. Dit is optioneel. In Advanced Module Parameters, ingesteld Module Class Suffix aan "_menu". 
  13. Voor het "Katten Submenu", herhaalt u de stappen 7 tot 12 met uitzondering van stap 9. In het menu Opdracht vak, selecteert u de items "Katten", "Tabbies" en "Siamese" (dus dit menu wordt alleen weergegeven onder deze menu-items). 
Op dit punt hebben we drie menu modules alle wijzen naar het Dieren Menu. De enige verschillen tussen hen zijn (1) het begin en het einde Niveaus en (2) Het menu-item Cessie. 
Nu, in de front-end naar de Home-pagina gaan . Het "Huisdieren Menu Top Level Alleen" menu moet nu zichtbaar zijn. Selecteer de "honden" in het menu. Het "Honden Submenu" moet nu zichtbaar zijn als een apart menu, zoals hieronder weergegeven: 
 
submenu6

 

Klik op het collies menu item en merk op dat opnieuw de Breadcrumbs de hiërarchie toont van de "Home", "Honden", en "collies". 

Met behulp van deze techniek is het gemakkelijk om het derde niveau submenu’s aan te maken. Je maakt met de moeder Menu Item een tweede niveau submenu. Dan kunt u gebruik maken van dezelfde techniek voor het maken van een aparte module met Menu Start niveau van 2 en Einde Level 3. Dit zou slechts het derde niveau van menu-items laten zien. 

 

Donateurs: Startmakelaar