Pagina hits: 3588 [Vandaag: 1] | Momenteel: 5 gebruikers online

Het menu (deel 2)

Het menu in Website Baker

Website Baker gebruikt sinds versie 2.7 de module show_menu2() om menu's op te bouwen.
Show_menu2 is een zeer uitgebreide module, waarbij de mogelijkheden veel te uitgebreid zijn om hier allemaal te bespreken. We gaan ons dus nu even beperken tot een simpel menu, met maar 1 nivo.
Wil je meer lezen over show_menu2, dan kan dat op de pagina van de ontwikkelaar (Engels)

In deel 1 hebben we kunnen zien hoe de browser met behulp van een paar simpele regels een menu opbouwt.
De standaard manier daarbij is om de menu links in een ongeordende lijst <ul> te plaatsen, met daaromheen een <div> die zorgt dat we dat lijstje kunnen "opmaken".

Show_menu2

De show_menu2 functie in Website Baker zorgt automatisch voor de complete <ul><li> structuur, met daarbij nog wat aardige aanvullingen die we later zullen behandelen.
Er zijn wel een paar "minimale" parameters noodzakelijk, omdat de functie show_menu2 anders niet weet wat hij precies moet gaan doen.

De eerste parameter bepaalt welk menu gemaakt moet worden. Website Baker kan pagina's koppelen aan verschillende menu's (WB help pagina), en show_menu2 wil graag weten welk menu je wilt laten zien.
Als je geen meerdere menu's hebt, of je wilt ze allemaal kunnen gebruiken gebruik je als parameter 0, ander het nummer van het menu wat je wilt laten zien.

De tweede parameter bepaalt vanaf welk nivo show_menu2 het menu moet gaan opbouwen.
Meestal zal dit het eerste nivo zijn, maar bij meertalige websites kan dat ook het tweede (of hoger) nivo zijn.
Voor het eerste nivo gebruiken we als parameter de show_menu2 variabele SM2_ROOT.

Met de derde parameter bepaal je of subpagina's meegenomen moeten worden. Omdat we in dit voorbeeld geen subpagina's gebruiken is de benodigde parameter SM2_START.
Andere opties zijn SM2_ALL (alles meenemen), SM2_CURR (alle pagina's in het huidige nivo), of bijvoorbeeld SM2_START+3 (de eerste 3 nivo's vanaf het begin)

De vierde verplichte parameter is nodig om te bepalen wat er buiten het huidige menu nog meer getoond moet kunnen worden.
Dit is vooral van belang als we meerdere sub-pagina's gaan gebruiken.
De meest "standaard" optie is SM2_ALL. Die zullen we nu dan ook gebruiken.

In de template die we gebruiken in Website Baker maken we eerste de <div> die we nodig hebben om de CSS te vertellen waar het menu staat.
Binnen de <div></div> plaatsen we vervolgens een regeltje PHP code die het menu gaat opbouwen.

Wat je dus in de template moet zetten ziet er zo uit:

<div class="menu">
  <?php show_menu2(0,SM2_ROOT,SM2_START,SM2_ALL); ?>
</div>

Het resultaat is een menu blok zoals in deel 1 is gebruikt:

<div class="menu">
<!-- show_menu2 -->
 <ul class="menu-top">
    <li class="menu-expand menu-parent menu-first"><a href="http://www.wbhulp.nl" target="_top">Home</a>    </li>
    <li class=""><a href="http://www.wbhulp.nl/tips" target="_top">Tips</a>    </li>
    <li class="menu-expand"><a href="http://www.wbhulp.nl/voorbeelden" target="_top">Voorbeelden</a>    </li>
    <li class=""><a href="http://www.wbhulp.nl/wb_sites" target="_top">WB Sites</a>    </li>
    <li class="menu-expand menu-last"><a href="http://www.wbhulp.nl/reageer" target="_top">Reageer</a>    </li>
 </ul>

</div>

Als werkend menu, "live" gegenereerd in deze website, ziet het er dan zo uit.
De gebruikte CSS stylesheet is gelijk aan de stylesheet in deel 1.

Binnenkort (hopelijk) deel 3 waarbij we subpagina's gaan gebruiken.




Submenu


Meest gelezen


Laatste tips

Problemen met FCK editor en IE9

De FCK Editor die standaard in WebsiteBaker wordt meegeleverd heeft problemen met Internet Explorer 9.

De oplossing is simpel.

lees verder..
Limiteren hoeveel pagina's er gemaakt kunnen worden in WebsiteBaker

Als je websites "verkoopt" en je wilt zorgen dat je klant maar 10 pagina's kan aanmaken.. Hoe doe je dat??

lees verder..
Wrapper module

Al je de wrapper module gebruikt om bijvoorbeeld een catalogus van een externe website te laten zien dan wil je graag dat een nieuwe pagina ook weer naar boven springt wanneer er op een link wordt geklikt.

lees verder..