Dreamweaver CS3 - Adobe

DREAMWEAVER CS3
Handboek
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 > CSSstijlen)
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 ().
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 is gekoppeld, bevat de informatie over de tekstopmaak. Er zijn diverse waarden voor
tekstopmaakklassen die zijn gekoppeld aan de tag 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
Standaardtekst ul.MenuBarVertical a,
ul.MenuBarHorizontal a
Tekstkleur wanneer de muisaanwijzer
eroverheen schuift
ul.MenuBarVertical a:hover,
ul.MenuBarHorizontal a:hover
Relevante eigenschappen en
standaardwaarden
kleur: #333; text-decoration: none;
kleur: #FFF;
435