18 december 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 4. De CSS van de Dropdown Menu's 5 januari 2010
 

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. 

Twee CSS bestanden

In dit laatste hoofdstuk besteden we kort nog wat aandacht aan de CSS van de dropdown menu's met nog wat kleine voorbeelden erbij. Beide dropdown menu's hebben hun eigen bijbehorende CSS bestand. Dropdown menu 1 heeft als CSS bestand dropdownmenu1.css en dropdown menu 2 heeft als CSS bestand dropdownmenu2.css. Je vindt deze bestanden (bij een standaard installatie) in de map templates > css > dutchcms.

In ieder CSS bestand vindt je duidelijke uitleg en toelichting bij iedere class of id zodat je weet waar die class of id precies mee correspondeert in het dropdown menu. Natuurlijk kom je er pas echt achter door bv een kleur te veranderen, het bestand opnieuw te uploaden met FTP, je pagina te verversen en te zien wat er veranderd is. Op die manier pas je het menu dan aan aan je eigen wensen tot je het mooi vindt door de kleuren te veranderen en eventueel de marges, paddings, hoogtes of breedtes en positie.

Daar bovenop nog een korte uitleg over een aantal zaken.

Korte of langere teksten

Zoals aan het begin van hoofdtuk 1 al uitgelegd is dropdown menu 1 meer geschikt voor langere teksten en dropdown menu 2 meer voor kortere teksten. Laten we nog is kijken naar ons nieuwe menu gemaakt in deze handleiding zoals het eruit ziet in dropdown menu 2

We hebben in deze handleiding veel aandacht besteed aan dropdown menu 2. Vooral omdat op dit menu de extra opties iets belangrijker zijn. Dit laat niet weg dat ze voor dropdown menu 1 ook belangrijk zijn. Vooral het gedeelte over wel of niet informatie op je toplevel pagina plaatsen blijft van belang en of je wel of niet de links daar dan nog onder weegeeft. Als we nu naar de dropdown instellingen gaan en kiezen voor dropdown menu 1 ziet ons nieuwe dropdown menu er als volgt uit.

En na klikken op Vereniging.

Zoals je ziet heb je nog ruimte over zowel op het toplevel als in het uitklap gedeelte.  Je zou de teksten dus ook als volgt kunnen aanpassen.

Natuurlijk hangt het helemaal af van de aard en het onderwerp van je website voor welke menu je kiest en welke menu titels je gaat gebruiken en ook van hoeveel items je plaatst in het menu.

Geen oneindig aantal top of sublevel items

Dat laatste is ook belangrijk want je kan natuurlijk geen oneindig aantal toplevel of sublevel items in het menu plaatsen. Het moet niet alleen mooi blijven maar ook praktisch. Als je namelijk te veel items in het menu plaats dan wordt het menu te breed en gaat het zogezegd wrappen wat tot zeer ongewenste effecten kan leiden. Laten we nog is 2 extra items toevoegen in ons dropdown menu en kijken wat er gebeurt.

Zoals je ziet verschuift het item Link door naar linksonder. Hetzelfde kan ook gebeuren als je te veel subitems hebt in dropdown menu 1 of te lange teksten voor je subitems. Hoe kun je dit nu voorkomen. Naast het meest voor de hand liggende namelijk niet te veel items in het menu kun je ook de breedte nog aanpassen van de items via de CSS (linker en rechter padding en margin) en je kunt het lettertype nog veranderen of kleiner maken. Standaard heeft de gehele pagina een minimale breedte van 750 pixels zodat de pagina ook goed wordt weergegeven op computers die hun resolutie nog hebben staan op 800 x 600 alhoewel dit wel steeds minder wordt tegenwoordig. Dit staat ingesteld in het bestand templatelayout.css bij html, body in de map templates > css > dutchcms. Je kunt die eventueel ook nog iets ruimer maken bv richting 800. Om te testen of je items naar onderen wrappen moet je even je beeldschermresolutie aanpassen naar 800 x 600.

Vaste en variabele breedte

Als laatste gaan we het nog even hebben over het aanpassen van de afzonderlijke breedte van de toplevel items. Als je nog is even kijkt naar het uitgebreide nieuwe menu in dropdown weergave 1 dan zie je dat de toplevel items zich aanpassen aan de breedte van de tekst. Kijk maar is naar de forumlink bij Het forum, die is smaller dan de anderen.

Bij dropdown menu 1 past de breedte van een vak zich automatisch aan. Bij dropdown menu 2 is dit niet automatsich het geval. Daar hebben alle menu items een vaste breedte.

Je kunt dit echter wel wijzigen in de CSS. Wil je dat ze een flexibele breedte hebben dus aangepast aan de lengte van de tekst van de toplevel menu items dan kun je de width omspannen met /*        */ in dropdownmenu2.css bij 

a.ltoplevel:link, a.ltoplevel:visited, a.ltoplevel:active, a.ltoplevel:focus {
en
.drmenu2 ul li:hover a, .drmenu2 ul li a:hover {

Hierdoor wordt de breedte flexibel. Na ook de padding-left en padding-right aangepast te hebben (iets breder gemaakt) is het resultaat dan als volgt.

Zoals je ziet kunnen er veel meer menu items op. Of het mooi is is vraag 2. Het heeft wel wat als het qua kleuren en inhoud past bij de rest van de website. Heb je een grote website dan kun je altijd ook pagina's maken in het normale menublok van het CMS door simpelweg geen vinkje te plaatsen bij activeer in het dropdown menu. Hierdoor kun je nog meer informatie kwijt op je website door 2 menu's te hebben: een aan de linkerkant en een aan de bovenkant. En zelfs drie kan door ook de blauwe topnavigatiebalk nog te gebruiken.

Let op
Let erop in beide CSS bestanden dat er ook conditionele CSS tussenstaat voor Internet Explorer 6. Er zijn nogsteeds pc gebruikers met IE6 geinstalleerd. Dit komt omdat er onder Windows 2000 niet geupgrade kan worden naar een hogere Internet Explorer versie. Houdt hier dus rekening mee door IE tester te gebruiken en de marges, paddings, heights en widths aan te passen aan deze IE versie want die verschillen soms (gek genoeg) net een paar pixels om hetzelfde resultaat te krijgen. Aanwijzigen hiervoor staan ook in de CSS bestanden. Conditionele CSS voor IE6 is te herkennen aan het streepje ervoor _. Dat is dus geen typefout. In IE tester kies je een IE6 tabblad en open je je website en vergelijk je het met je huidige nieuwe browser (IE 8 of FireFox etc).

Dat was het dan. Hopelijk beleef je veel plezier aan de nieuwe dropdown menu's. Heb je nog vragen dan kun je altijd terecht in het Forum van Dutch CMS.

Dutch CMS

Powered by Dutch CMS v2.0 XHTML Strict

Bezoek ook de Webdesign website van Dutch CMS