20 oktober 2017
Dutch CMS
Handleidingen

Met Dutch CMS 2.0

Nog makkelijker een mooie website !
Gemoderniseerd template design
Achtergrondafbeeldingen invoegen
Uitgebreid Contactformulier !
En meer.....

 
 
 
 
 
 
Handleiding Dropdown Menu 3. Sortering en extra opties 30 december 2009
 

Dit is een handleiding voor gebruikers van het CMS systeem Dutch CMS. Kom je via Google op deze pagina en zoek je een goed dropdown menu kijk dan is naar het GRC's Script-Free Pure-CSS Menuing System waar dropdown menu 2 in deze handleiding op gebasseerd is. 

In dit hoofdstuk gaan we de sortering van het dropdown menu bespreken en de overige extra opties.

Sortering van de toplevel menu items

In het vorige hoofdstuk hebben we laten zien hoe je het dropdown menu kan opbouwen. Aan het einde van dat hoofdstuk zag je dat de sortering nog niet goed was maar dat de items alfabetisch worden weergegeven. De submenu items van het dropdown menu worden altijd alfabetisch gesorteerd maar op de toplevel items kun je handmatig sorterig toepassen. Je doet dit door naar het beheerdersgedeelte van de dropdown menu's te gaan via Beheer > Dropdown menu. Momenteel staan alle toplevel items daar op 0.

Je kunt hier aan alle items een eigen sorteringswaarde toekennen waarna de items daarna in die volgorde worden weergegeven. We willen dat de toplevel menu items weergegeven gaan worden van links naar rechts in de volgorde.

Vereniging | Projecten | Tuinwinkel | Forum | Links

We gaan terug naar de website en vernieuwen de pagina. Het resultaat is precies zoals we het willen hebben.

Er zijn nog een aantal extra opties met betrekking tot de dropdown menus die wel belangrijk zijn om goed te begrijpen. Hier een overzicht.

De opbouw van een dropdown menu - surfgedrag en webdesign

Na vele websites te hebben bezocht die een dropdown menu bovenaan hun pagina hebben en na diverse dropdown menu's te hebben bekeken is de conclusie dat iedere webdesigner hier zijn eigen benadering in kiest. In sommige dropdown menu's is de toplevel link (dus stel dat je klikt op Vereniging) uitgeschakeld. Er gebeurt dan niks. Andere websites hebben belangrijke informatie op hun toplevel pagina staan waarbij de eerste link in het dropdownmenu op dezelfde pagina uitkomt als wanneer je zou klikken op de toplevel link.
Ook het surfgedrag van een bezoeker is niet te voorspellen. Sommige bezoekers zullen als ze een muishandje zien gelijk geneigd zijn te klikken dus als ze bv met hun muis over Vereniging gaan zullen ze daar gelijk op klikken terwijl andere bezoekers eerst naar beneden zullen gaan met hun muis in het dropdown menu en dan zullen klikken. Om jouw als webmaster/beheerder zelf de keuze hierin te geven zijn er twee extra opties namelijk "Eerste dropdownlink" en "Toon links nog is extra op de toplevel pagina". Hier een uitleg van deze opties zodat je volledig kan inspelen op het surfgedrag van je bezoekers.

Benadering 1 - Eerste dropdownlink is hetzelfde als toplevel link

Als je bij Beheer > Dropdownmenu > Dropdown instellingen voor dropdown menu 2 kiest zie je een extra optie verschijnen genaamd "Eerste dropdownlink".  Je kunt hier kiezen uit 2 opties namelijk "Eerste dropdownlink is echte link" en "Eerste dropdownlink is hetzelfde als toplevel link". Deze optie is ingebouw voor hen die belangrijke informatie op hun toplevel pagina zetten en niet willen dat bezoekers die informatie missen want wat als iemand nou niet op de toplevel link klikt ?

We kiezen nu voor "Eerste dropdownlink is hetzelfde als toplevel link" en kijken wat er gebeurt.

Zoals je kunt zien is er een extra dropdown optie bijgekomen bovenaan in het dropdown menu. Die heeft nog geen tekst omdat we dat nog even leeg gelaten hebben bij de eerdere opbouw van het menu in deze handleiding. Om deze link tekst te geven gaan we terug naar Beheer > Pagina's maken > Pagina menu en selecteren we Vereniging in de gemaakte pagina's en klikken we op bewerken.

We zien daar dan Titel 1e dropdown item.

Daar staat nu nog niks maar daar moet dus een representatief woord komen wat goed aanduidt dat het om algemene informatie over de vereniging gaat. Je kunt dan denken aan woorden als Algemeen of Informatie maar misschien kun je zelf nog andere woorden bedenken die beter bij je website en onderwerp passen. In dit voorbeeld vullen we in: Informatie en slaan de wijzigingen op.

Als we nu de pagina verversen op de website en teruggaan naar Vereniging in het dropdown menu zien we daar onder Vereniging als eerste link Informatie.

Het maakt nu niet meer uit of een bezoeker op Vereniging klikt of op Informatie. Beide links gaan naar dezelfde pagina.

Benadering 2 - Toon dropdownlinks nog is extra op de toplevel pagina

Benadering 2 houdt in dat je geen belangrijke informatie op de toplevel pagina zet. Maar wat als iemand dan toch op de toplevel pagina klikt ? Dan zou hij een lege pagina zien. Voor dat geval is er de optie "Toon dropdownlinks nog is extra op de toplevel pagina.

We gaan terug naar de verenigingspagina en laten zien wat er gebeurt als je dit aanvinkt. We gaan uit van een lege toplevel pagina en voor iedere pagina hebben we bij "Beschrijving / samenvatting" een duidelijke maar korte beschrijving opgegeven. Ook halen kiezen we bij "Eerste dropdownlink" voor "Eerste dropdownlink is echte link" wat inhoudt dat als je nu dus algemene informatie over de vereniging wilt weergeven je dus daar nog een extra pagina voor moet maken en daarop de informatie zet die we in het voorbeeld hiervoven op de toplevelpagina hadden staan. Je kunt die linkt nog wel steeds Algemeen noemen. Als we nu op Vereniging klikken zien we daar het volgende staan.

Wat je ziet is een mooi overzicht van de pagina's die zich ook in het dropdown menu bevinden met hun beschrijving erbij.

Benadering 1 en benadering 2 combineren

Wat ook nog kan is een combinatie van beide. Je zet dan wel informatie op de toplevel pagina en je kies ook voor "Eerste dropdownlink is hetzelfde als toplevel link" en toch zet je een vinkje bij "Toon dropdownlinks nog is extra op de toplevel pagina". De links met beschrijving komen dan onder de informatie op de toplevel pagina te staan.

Zoals je ziet kun je dus met de extra opties alle kanten op en mag kun je dus helemaal zelf bepalen hoe je menu is opgebouwd en welke informatie op welke pagina wordt getoont.

Extra opties - Homelink toevoegen

Als laatste dan nog de optie "Activeer Home in dropdown". Wanneer je dat aanvinkt gaat de Home link van de navigatiebalk bovenaan naar het dropdown menu. We nemen even de Dutch CMS website als voorbeeld na een schone installatie. Je ziet dan in de blauwe bovenbalk (standaard navigatiebalk) Home | Faqs | Links | Forum staan.

En na aanvinken van "Activeer Home in dropdown" zie Faqs | Links | Forum.

Standaard zijn de onderdelen Faq's, Links en Forum geactiveerd in de navigatiebalk. Als je besluit om met een van de dropdown menu's te gaan werken kun je deze onderdelen dus ook verplaatsen naar het dropdown menu. Het gaat er dan zo uitzien (na het maken van een Faq pagina en een Links pagina).

Je ziet dat dat blauwe navigatiebalk dan dus leeg is als je er voor kiest om verder geen onderdelen in die navigatiebalk te plaatsen (via Beheer > Thema instellingen > Normale instellingen  en dan het onderdeel en dan Onderdeel weergave). Let erop dat als je het onderdeel Forum wit gebruiken op je website dat je deze balk nog wel nodig hebt voor de registratielink, profiel bewerken en uitloggen.

Je kunt hem echter wel inkorten en ergens anders positioneren verplaatsen zoals in het onderstaande voorbeeld te zien is met de nadruk op voorbeeld waarbij voor de zichtbaarheid van het voorbeeld even een witte rand eromheen is gedaan.

Houd hierbij rekening met een gebruikernsaam die 20 tekens lang kan zijn !

Je kunt deze top-navigatiebalk ook helemaal weghalen door de CSS op display:none te zetten, maar dat kun je alleen doen als je zeker weet dat je het forum niet gaat gebruiken.

Je past de CSS dan aan in het CSS bestand headerfooter.css bij #navtabel. Dit brengt ons bij het laatste hoofdstuk namelijk de CSS van de dropdown menu's.

Naar hoofdstuk 4 >>

Powered by Dutch CMS v2.0 XHTML Strict

Bezoek ook de Webdesign website van Dutch CMS