Operation Manual

DREAMWEAVER CS3
Handboek
435
Opmerking: Als de site al ergens anders een verticaal menubalkobject heeft, hoeft u deze stap niet uit te voeren. U kunt het
bestand SpryMenuBarVertical.css ook heel eenvoudig aan de pagina koppelen door in het paneel CSS-stijlen (Venster > CSS-
stijlen) op de knop Stijlpagina koppelen te klikken.
3 Verwijder de verticale menubalk.
4 Ga naar de codeweergave (Beeld > Code), zoek de klasse MenuBarHorizontal en verander deze in MenuBarVertical. De
klasse MenuBarHorizontal is gedefinieerd in de tag
ul in de container van de menubalk (<ul id="MenuBar1"
class="MenuBarHorizontal">
).
5 Zoek na de code voor de menubalk de constructor van de menubalk:
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
6 Verwijder de laadoptie imgDown (inclusief komma) uit de constructor:
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
Opmerking: Als u echter een verticale menubalk in een horizontale converteert, voegt u de laadoptie imgDown en de komma toe.
7 (Optioneel) Als de pagina geen andere horizontale menubalkobjecten meer bevat, verwijdert u de koppelingen naar het
voormalige bestand MenuBarHorizontal.css in de kop van het document.
8 Sla de pagina op.
Het menubalkobject aanpassen
Hoewel u vanuit de eigenschappencontrole eenvoudige bewerkingen in een menubalkobject kunt uitvoeren, worden
aangepaste opmaaktaken niet ondersteund. U kunt de CSS-regels voor het menubalkobject wijzigen en een menubalk
maken die naar uw eigen smaak is opgemaakt. Voor een geavanceerdere lijst met opmaaktaken gaat u naar
www.adobe.com/go/learn_dw_sprymenubar_custom_nl.
Alle CSS-regels in de volgende onderwerpen verwijzen naar de standaardregels in het bestand SpryMenuBarHorizontal.css
of SpryMenuBarVertical.css (afhankelijk van uw selectie). Wanneer u een Spry-menubalkobject maakt, slaat Dreamweaver
deze CSS-bestanden op in de map SpryAssets van uw site. Deze bestanden bevatten ook nuttige informatie over diverse
stijlen die u op het object kunt toepassen.
Hoewel u de regels voor het menubalkobject gemakkelijk rechtstreeks in het bijbehorende CSS-bestand kunt bewerken, kunt
u ook het paneel CSS-stijlen gebruiken om de CSS van een menubalk te bewerken. Het paneel CSS-stijlen is handig om de
CSS-klassen te zoeken die aan de verschillende onderdelen van het object zijn toegewezen, met name als u de modus Huidig
van het paneel gebruikt.
Zie ook
“Het paneel CSS-stijlen in de modus Huidig” op pagina 121
De tekststijl van een menu-item wijzigen
De CSS die aan de tag <a> is gekoppeld, bevat de informatie over de tekstopmaak. Er zijn diverse waarden voor
tekstopmaakklassen die zijn gekoppeld aan de tag <a> en die iets zeggen over de verschillende menutoestanden.
❖ Als u de tekstopmaak van een menu-item wilt wijzigen, gebruikt u de volgende tabel om de juiste CSS-regel op te zoeken,
en verandert u de standaardwaarde:
Te wijzigen stijl CSS-regel voor verticale of
horizontale menubalk
Relevante eigenschappen en
standaardwaarden
Standaardtekst ul.MenuBarVertical a,
ul.MenuBarHorizontal a
kleur: #333; text-decoration: none;
Tekstkleur wanneer de muisaanwijzer
eroverheen schuift
ul.MenuBarVertical a:hover,
ul.MenuBarHorizontal a:hover
kleur: #FFF;