Web Tutorials

Dreamweaver | Webdesign | Web Tutorials

Aanpassingen van een Spry Framework functie

Al verschillende malen is het Spry Framework van CS3 en zijn functies hier aangehaald. Ditmaal gaan we het hebben over de visuele aanpassingen van zo’n Spry functie. Mede door een aanvraag van een bezoeker kiezen we voor het Spry Menu Bar om te laten zien hoe dergelijke aanpassingen kunnen gedaan worden via het CSS palet.

De Spry menu bar is een menu opgemaakt met CSS. Voor degene die niet goed overweg kunnen met CSS of nooit gebruikt hebben wordt hier uitgelegd hoe en waar je aanpassingen kan doen om dit menu aan te passen.

Zelf heb ik de functies van de CSS geselecteerd die nodig zijn om de aanpassingen te doen. Er staan verschillende gevorderde functies tussen die dienen om het menu gelijkwaardig te tonen in alle browsers. Deze best laten zoals ze zijn.

Om de CSS te kunnen aanpassen klikken we het CSS palet open rechts bovenaan in Dreamweaver. Dit is hetgeen we te zien krijgen :

Om een bepaald onderdeel te kunnen aanpassen dien je te rechts klikken op een naam en kiezen voor ‘Edit’. Er verschijnt nu een venstertje waarin je de mogelijkheid hebt om dit éne specifieke onderdeel aan te passen. Zoals je al merkt heeft elke onderdeel in dit CSS palet een functie. We overlopen…

ul.MenuBarHorizontal :

Deze functie is de allesomvattende div van het menu. Hier kan je de breedte van je menu instellen, lettertype en grootte. We klikken rechts op de naam en kiezen voor edit en selecteren het onderdeel ‘Box’. Zie voorbeeld :

Achter width zie je ‘auto’ staan deze kan je aanpassen naar bv 500px. Let wel dat bij deze stap je menu onder elkaar kan komen te staan mits de width van de individuele items meer bedraagt dan deze 500px. Deze worden verder in deze tutorial aangepast.

Vervolgens kiezen we in hetzelfde venstertje voor het onderdeel ‘Type’. Daar stellen we bij ‘Font’ een lettertype in en bij ‘Size’ de lettergrootte. Klik op ok en bekijk het resultaat. Tijdens je aanpassingen in dit venstertje kan je op ‘Apply’ klikken, dit dient om je aanpassingen te bekijken zonder op te slaan en zonder dat het venstertje verdwijnt.

ul.MenuBarHorizontal li

In deze functie kan de individuele breedte van elk menu item aangepast worden. Rechts klik op de functie, kies voor ‘Edit’ en links in het venstertje kiezen we voor ‘Box’. Bij width kan je bv 75px ingeven, bekijk het effect.

Vervolgens kiezen we voor ‘Block’ en zien dat bij ‘Text align’ het woord ‘center’ staat weergegeven. Dit wil zeggen dat de tekst in elk menu item gecentreerd is. Deze kan je veranderen naar Left of Right indien gewenst.

ul.MenuBarHorizontal ul

In dit onderdeel kan je dezelfde toepassingen doorvoeren als beschreven hierboven. Deze functie slaat namelijk op de sub menus. Best dat je deze dan ook afstemt op de aanpassingen die je in bovenstaande hebt doorgevoerd. Het principe is steeds hetzelfde.

ul.MenuBarHorizontal ul li

Deze functie is ook een onderdeel van het submenu. Indien je bovenaan bij de ‘ul.MenuBarHorizontal ul’ functie de width hebt aangepast moet je dit bij deze ook doen. Dezelfde waarde meegeven. Dit om je achtergrond gelijk te houden.

ul.MenuBarHorizontal ul ul

Bij deze functie is het standaard ingesteld dat het tweede submenu een heel klein beetje overlapt. Dit kan als volgt aangepast worden. Rechts klikken, Edit en kiezen voor Box in het venstertje. Daar zie je enkele waarden ingevuld bij ‘margin’. Hier kan je een andere waarden invullen afhankelijk hoe je wil dat het tweede submenu overlapt of niet. Spelenderwijs kan je hier het best het effect ervan zien.

ul.MenuBarHorizontal ul

Hier wordt de border ingesteld van de sub menus. Aanpassen? Rechts klikken, Edit en kiezen voor Border in in het venstertje. Daar zie je de instellingen staan van het soort border(style), de dikte van de border(width) en de kleur van de border(color) :

ul.MenuBarHorizontal a

In deze functie kan je 3 veranderingen aanbrengen. De achtergrondkleur, de kleur van je link(de tekst) en de padding van het menu item. Rechts klikken, Edit en kiezen voor Background in het venstertje. Daar kan je bij ‘Background color’ de kleur van je achtergrond kiezen. Eens ingesteld gaan we verder en kiezen voor ‘Type’, bij ‘color’ kan je de kleur kiezen van je linktekst in je menu. Bij ‘Box’ kan je de padding instellen van de menu items, door bij ‘Top’ en ‘Bottom’ de instellingen te verwijderen zie je dat het menu smaller wordt. Verhoog de waarde wordt hij breder..

ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible

Hier kan je je hover effecten instellen, de verandering indien je er met je muis over gaat. Hier geldt hetzelfde principe als bij de functie hierboven.

ul.MenuBarHorizontal a.MenuBarItemSubmenu

ul.MenuBarHorizontal ul a.MenuBarItemSubmenu

ul.MenuBarHorizontal a.MenuBarItemSubmenuHover

ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover

Bij deze vier functies is het pijltje ingesteld dat je ziet verschijnen bij de menu items waar een submenu bij hoort. Om deze aan te passen opnieuw rechts klikken, Edit en kiezen voor ‘Background’.

Bij ‘Background image’ kan je een ander icoontje plaatsen in plaats van het pijltje. Navigeer via ‘Browse’ tot bij het gewenste plaatje. Wil geen icoontje? Delete gewoon de tekst achter ‘Background image’. Je ziet ook enkele waarden ingeven bij ‘Horizontal position’ en ‘Vertical position’. Hier wordt weergeven op welke plaats het icoontje in je menu item moet staan.

Zo nu hebben we de belangrijkste functies om aanpassingen te doen in het menu overlopen. Al de andere functies zijn meer gevorderde toepassingen om het menu in alle browser gelijkwaardig te tonen. Heb je nog problemen met aanpassingen of ben ik iets vergeten te vermelden… Laat het mij weten via het forum.

Veel succes met de aanpassingen in je menu!

Nog vragen? Bezoek het forum...

Indien je het nuttig vond mag je altijd een bericht achterlaten of u inschrijven op onze nieuwsbrief om altijd op de hoogte te blijven.

Copyright 2008. Web Tutorials. All rights reserved