Dropdown menu in DreamWeaver

Status
Niet open voor verdere reacties.
L

LuukJ

Gebruiker
Lid geworden
15 feb 2013
Berichten
12
Beste,

ik ben bezig met een website in HTML & CSS. Nu heb ik zelf in Photoshop een navigatiebalk gemaakt, in deze in DreamWeaver geïmporteerd (met een roll-over image, weet niet of dit van belang kan zijn). Nu wil ik hier nog een drop down menu onder zetten. Is dit mogelijk (omdat ik de navigatiebalk in Photoshop gemaakt heb)? DreamWeaver genereerde onderstaande code voor mijn navigatiebalk (4 buttons).

De code (#### worden links):

<!-- SPECIALITEITEN -->
<a href="######################" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('navbar01','','images/images/images/images/images/navbar_01.jpg',1)"><img src="images/images/images/images/navbar_01.jpg" alt="Specialiteiten" width="200" height="40" id="navbar01"></a>

<!-- ADVOCAAT -->
<a href="#####################" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('navbar02','','images/images/images/images/images/navbar_02.jpg',1)"><img src="images/images/images/images/navbar_02.jpg" alt="Advocaat" width="201" height="40" id="navbar02"></a>

<!-- PUBLICATIES -->
<a href="########################" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('navbar03','','images/images/images/images/images/navbar_03.jpg',0)"><img src="images/images/images/images/navbar_03.jpg" alt="Publicaties" width="198" height="40" id="navbar03"></a>

<!-- CONTACT -->
<a href="###########################" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('navbar04','','images/images/images/images/images/navbar_04.jpg',1)"><img src="images/images/images/images/navbar_04.jpg" alt="Contact" width="201" height="40" id="navbar04">

Dus kan hier nog een drop down menu voor gemaakt worden?? En zo ja, weet iemand een oplossing hiervoor? De website is voor een advocatenkantoor, en hoop dit een beetje professioneel af te kunnen handelen en aan hun wensen te voldoen.

Alvast bedankt voor jullie hulp,

LuukJ
 
Hoi LuukJ,
Eerst het goede nieuws: ja, het is mogelijk onder een image-menu een dropdownmenu te hangen. :)

Dan de afdeling Werk aan de Winkel!
  • Dreamweaver heeft het op z'n ouderwets Dreamweaver-achtig gedaan: hover-afbeeldingen die met omslachtig javascript bediend worden.
  • En om toonbaar te kunnen zijn, zal Dreamweaver ook nog het rijtje script-functies met "MM_preload" "MM_swapImgRestore()" enz. in de <head> gezet hebben.
  • Zo zijn er dus 4 images en 4 hover-images nodig: 8 stuks, die allemaal gedownload moeten worden.
  • En alle links zijn "koud achter elkaar" gezet, in plaats van in een opsommingsrijtje. Dan is er geen dropdown van te maken.
Maar .. het kan anders en beter!
  • Er kan een getrapte opsommingsrij komen, waar ook de submenu-items in zitten.
  • Dat is prachtig met css op te maken, en ook de hovers kunnen er met css in komen: helemaal geen javascript meer nodig!
  • En er kan met één (1!) gecombineerd image volstaan worden, een zogenaamde "css-sprite". Daar wordt dan telkens een gedeelte van gebruikt. Omdat dit ene image meteen gebruikt voor de normale knoppen (en de hover-gedeeeltes dan onzichtbaar zijn, maar al wel aanwezig), hoeft er niets gepreload te worden.
De mini-theorie van wat er gaat gebeuren, staat zo ongeveer hier: Een blokje knoppen.

Om het stapsgewijs aan te pakken: eerst is dat gecombineerde image nodig, dan is er iets om naar te kijken.
Dit gaat als volgt:
  • Je zet alle 4 de images direct naast elkaar.
  • En er onder komen de 4 hover varianten.
  • Samen opslaan, met bv. de naam "menu-sprite.jpg" of "menu-sprite.png"

menu-sprite.png

menu-spite​

Heb je dat?
Met vriendelijke groet,
CSShunter
____________
PS-1: De knoppen zijn nu verschillend: 200px, 201px, 198px en weer 201px breed. Handiger is het om ze exact even breed te maken; ik zou 200px aanhouden.
PS-2: Gaan de submenu-knoppen ook images worden, of worden dat gewone tekst-links?
(Voordeel tekst-links: sneller aan te passen als er iets bij komt of moet veranderen; anders moeten nieuwe images gemaakt worden)
 
Laatst bewerkt:
Hallo, bedankt voor je reactie. Ik zal straks een screenshot uploaden van de navigatiebar, worden (denk ik) ook gewoon images die eronder komen. Ik ga zometeen beginnen aan die sprite! Als die af is laat ik het wel weten.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan