Вы находитесь на странице: 1из 5

11/6/2015

HowtomakeadropdownmenuinDreamweaver

How(not)tomakeadropdownmenuin
Dreamweaver(anymore)
byRenLnstrup
UltimateWeb

Pleasenote:
Thefollowingtechniqueformakingdropdownmenusareobsolete.Thistutorialwaswrittenata
timewherebetteralternativeswerenotavailable.Thereisnoguaranteethatthisevenworksin
presentdayversionsoftheDreamweaversoftware.
Thepreferredwaytoaccomplishthistaskatthetimeofwriting,istobuildthemenuusingnested
ULlists,thenaddingCSSrulestoshow/hidethesubmenus.Aneasywayofdoingit,isusingthe
Spry Menu Bar in Dreamweaver CS3, as described in thistutorial. If you are using an older
version of Dreamweaver, or are not afraid to get your hands a bit dirty You can use this
approach.

Introduction:

SBT Super
Sale Offer
Huge Saving
Up to 95%
Off Bargains
on
Thousands of
Cars in Stock.

Ascontentsgrowsonwebsites,theneedforaneasynavigationgrowsequally.Adropdownmenu
canbethesolution.Theyareeasytouse,becausepeoplearefamiliarwiththemfromtheirnative
Windowsprograms(themenuwith"files","edit"etc.isadropdownmenu).And,asabonus,your
visitorswillbeamazed:)
Inthepast,thiskindofthingwouldhaverequiredlotsofworkwritingHTMLcode,debuggingetc.
Now,withprogramslikeDreamweaver,andthistutorial,it'saseasyasscratchingyourselfonthe
back:)

Requirements:
You'll need to have a copy of Macromedia Dreamweaver 3 or 4 (this tutorial was written using
version 4, but everything should work fine in version 3 also), an Internet browser (preferably
InternetExplorer5or5.5),and,ofcourse,acomputer:)
Youdon'tneedtobeanexpertuserofthisprogram,althoughalittleexperiencealwayshelps.

Let'sgetonwithit:
Duringthistutorial,wewillbemakingasimplemenulinewithonedropdownmenu.Inthismenu,
http://www.rel7star.dk/tutorial/

1/5

11/6/2015

HowtomakeadropdownmenuinDreamweaver

we will put a couple of links, one of which will open a secondary menu. If you wish, you can
improveonitlateron,addingmoremenusormaybeevenputtingimagesintoyourmenus.
Thisiswhatitwilllooklikewhenwearedone:

Now,let'sbegin:

Step01: StartupDreamweaver.
Step02: Makesurethatyouhaveselected"Designview"(fig.1)

fig.1

Step03: Assignatitleforthepage(fig.2).Ihavecalledmine"Adropdownmenu", but


youarefreetocomeupwithabetternameforyourself.
Next,savethefilesomewhereyouknowyoucanfinditagain.

fig.2

Step04: Inthe"Objects"inspector(press"Ctrl+F2"onyourkeyboardorselectitinthe
"Window"menu,ifyoucan'tfindit),selectthe"DrawLayer"tool(fig.3).
Useittomakeaboxonyourpagebyholdingtheleftmousebuttonanddragging
untilitformsabox.Itdoesn'tmatterwhatsizeithas,we'llchangethatinabit.

fig.3

Step05: Now click on the edge of your newly made box to select it. Open up the
"Properties"inspectorbypressing"Ctrl+F3"onyourkeyboard(orselectingitin
the"Window"menu).Adjustthevaluestotheonesshowonfigure4.

fig.4

Step06: Drawthree(3)morelayers,usingthesametechniqueasinstep04.Assignthe

http://www.rel7star.dk/tutorial/

2/5

11/6/2015

HowtomakeadropdownmenuinDreamweaver

samepropertiesforthemasyoudidforthefirstlayer,withtheseexceptions:
LayerID:menu2,menu3andmenu4
Leftposition(L):25%,50%and75%

Step07: Atthispointyoushouldhavefour(4)grayboxeslayingsidebysideinthetopof
thewindow.Nowwe'llmakethemeasierfortheusertonavigatethrough.

Clickinsidethefirstbox,andyoushouldgetablinkinglineindicatingthatyoucan
writeinthelayer.Write"menu1".
Step08: Usethe"Properties"inspectorthealignthetexttothecenterofthebox(fig.5).
repeatstep07and08forthelastthreelayersalso(changingthetextto"menu
2"etc.)

fig.5

Step09: Draw yet another three (3) layers using the same technique as you learned in
step04.Assignthepropertiesoftheselayersasshowonfigure6.

fig.6

Step10: Fill out the submenu layers with the text "Sub menu 1", "Sub menu 2" and

"Submenu3".Centerallthreelikeyoudidinstep08.
Step11: Onceagain,drawtwo(2)morelayers(thesearethelastones,ipromise!)using
the same technique as you learned in step 04. Assign the properties of these
layersasshowonfigure7andwrite"Subsubmenu1"and"Subsubmenu2"
inthem.

fig.7

Step12: Nowit'stimetogetthemenusworking.

Openthe"Behaviours"inspector(bypressing"Shift+F3" or selecting it in the


"Window"menu).

http://www.rel7star.dk/tutorial/

3/5

11/6/2015

HowtomakeadropdownmenuinDreamweaver

Step13: Selectthegraylayerwiththetext"menu3"sothatthereiseightblackboxeson
itsedge.
Nowclickonthe"+"icon(fig.8)inthe"Behaviours"inspector.

fig.8

Step14: From the menu, select "ShowHide Layers". Note: If you can't select "Show
HideLayers" (it is grayed out), find the Submenu called "Show Events For"
andselect"IE5.0"(fig.9).
Scrolldownthelistuntilyoufindthe"menu3sub1"layer.Selectit(byclickingit)
andclick"show".Dothesameforthelasttwomenu3sub's.
Also,findthelayercalled"menu3subsub1"andhideit(click"hide" instead of
"show").Dothesamefor"menu3subsub2".Thenclick"OK".

fig.9

Step15: In the "Behaviours" inspector, click on the "arrow" (fig. 10) and select
"onMouseOver" to make the menus appear when the mouse rolls over menus
(insteadofitneedingtobepressedfirst).

fig.10

Step16: Pressthe"+"iconagain(asshowninstep13)andselect"ShowHideLayers"
onceagain.Thistimehideallthesubandsubsubmenulayers(thesameonceas
youselectedbefore,justnowtheyareallgoingtobehidden).Thenclick"OK".
Step17: Changetheeventforthisbehaviourto"onMouseOut"(thesamewayasyoudid

instep15).
Step18: Repeatstep1317forthethreesubmenulayers.Exceptforsubmenu3,theyall
shouldhavethesamebehavioursasabove.

Submenu3distinguishesitselfbyhavingalltheysubandsubsubmenusshown
(step14)intheonMouseOverbehaviour.
Step19: On to the subsubmenus. Give them the same kind of behaviour as submenu3,
thatis"show"allsubandsubsubmenusonMouseOver,andhideallsuband
subsubmenusonMouseOut.

http://www.rel7star.dk/tutorial/

4/5

11/6/2015

HowtomakeadropdownmenuinDreamweaver

Step20: Now you can close the "Behaviours" inspector. Select "Submenu1" and
changeitsvisibilityinthe"Properties"inspectorto"invisible"(fig.11).
Whenyoudeselectthelayeritshoulddisappear!Butdon'tworry,itisstillthere,
it's just invisible. You can reach it by clicking on one of yellow icons that is half
hiddenunderthe"menu1"layer(fig.12).

fig.11

fig.12

Step21: Repeatstep20,hidingtheothersubandsubsubmenus.
Step22: Savethefileandgooutforacopofcoffee......

Theend:
Andthat'saboutit.Allthatislefttodoistoreplacethemenutextwithreallifelinks,andperhaps
changethecolorsandfontsabit.ButI'llletyoudothatworkforyourself:)
Andremember,youcanmakeasmanymenusandsubmenusasyouwant(oratleast,asyou
canfitonthescreen).Youcanevenconnecttimelinestothebehavioursofthemenus,andthus
makethemmoveandflyabout!Yourimaginationisjustabouttheonlylimit(well,almost:)).
Now,I'llletyouplayaroundwithitsomemore,so...
Goodluck!

http://www.rel7star.dk/tutorial/

5/5