Dropdown/fly-out menyer

Last ned knappene du trenger her!

Dropdown eller Fly-out menyer baserer seg på DHTML, eller Dynamisk HTML. DHTML er egentlig layerere som er programmert med JavaScript.

For å lage en slik meny, må vi først gjennom noen grunnregler:

• Lage en skisse over hvordan menyen skal se ut
• Bestemme hvor mange hovedpunkter vi skal ha
• Bestemme hvor mange underpunkter vi skal ha og under hvilke hovepunkter disse skal ligge
• Lage knappene i Photoshop
• Sette alle elementene sammen i Layere og Tabeller i Dreamweaver
• Lage Timelines
• Bruke Behaviors
• Teste!

Når du har laget alle knappene i Photoshop må vi sette de sammen med layere og tabeller.

1. Lag et layer som er ca 600 pixler bredt og sett så inn en tabell i layeret som har 1 rad og 4 kolonner og som har en fast breddde på 600 pixler. Sett cellspacing, cellpadding og border til 0.

2. Fra Objects-paletten setter du inn et Rollover-image i hver celle. Vet du ikke destinasjonen på linken så bruker du # (dummylink). Lagre!

3. Når du har plassert alle elementene i hovedmenyen, klikker du på layeret, tar tak i en av layerets "hjørnehendler" (de svarte punktene man kan ta tak i og dra for å forandre størrelsen på layeret) og trekker godt innover inn i layeret slik at vi får justert størrelsen på layeret. Trekk for langt slik at det ser ut som om du lager layeret mindre enn tabellen som vises inni. Størrelsen på layeret justerer seg da automatisk til å vise bare innholdet.

4. Så lager du et nytt layer som plasseres under "About Me". Dette layeret skal inneholde undermenyen til "About Me". Legg inn en tabell i layeret som har 2 rader og 1 kolonne. Sett cellspacing, cellpadding og border til 0.

5. Fra Objects-paletten setter du inn et Rollover-image i hver celle. Vet du ikke destinasjonen på linken så bruker du # (dummylink). Lagre!

6. Juster størrelsen på layeret og plassèr det rett under "About Me"-knappen. Sjekk i Browseren at dette ser bra ut.

7. I Layers-paletten gir du layeret navnet "about" ved å klikke i Name-feltet.

8. Så lager du et nytt layer som plasseres under "Links". Dette layeret skal inneholde undermenyen til "Links". Legg inn en tabell i layeret som har 4 rader og 1 kolonne. Sett cellspacing, cellpadding og border til 0.

9. Fra Objects-paletten setter du inn et Rollover-image i hver celle. Vet du ikke destinasjonen på linken så bruker du # (dummylink). Lagre!

10. Juster størrelsen på layeret og plassèr det rett under "Links"-knappen og ved siden av "About Me"-undermenyen.. (Tips for å få de to undermenyene like høye: les av verdien T i Properties-Inspector'en for begge layerne og sett denne verdien lik for begge). Sjekk i Browseren at dette ser bra ut.

11. I Layers-paletten gir du layeret navnet "links" ved å klikke i Name-feltet. Gjør så begge disse underlayerne usynlige ved å klikke i øye-feltet (ved siden av Name-feltet) til du får et ikon med et lukket øye. Lagre!

Da har vi fått alle elementen på plass, og skal gå igang med å vise og skjule under-menyene ved mouseOver. Det mest logiske ville kanskje vært å lagt til en Behavior med Show/Hide Layer for å få til denne effekten, men det funker ikke. Vi må bruke Timelines.

12. Hvis du ikke har Timelines-paletten oppe, får du den fram ved å velge Window > Timeline. Lag en ny timeline som du kaller "about" (Marker teksten hvor det står "Timeline 1" og skriv inn "about"). I øverste del av vinduet er det et felt som ligger over selve tidslinjen, det står en B helt til høyre i denne linjen.
Klikk på Frame 10 i denne linjen og få fram Behaviors.paletten. (Window > Behaviors). I Behaviors-paletten klikker du på +tegnet for å legge til en ny behavior. Velg Show/Hide Layer fra menyen. Fra paletten som dukker opp velger du timelinen "about" og velger "Hide" og trykker OK.
Så må du lage en Timeline til, kall den "links" og gjør akkurat det samme som du gjorde med den første Timeline'en. Lagre!

For å få vist fram og skjult undermenyene må vi legge til en del Behaviors til hver hovedmenyknapp, og alle knappene i undermenyene.

13. Klikk på "About Me"-knappen. Pass på at det ikke står noe annet enn rollover-behaviors'ene i Behaviors-paletten. Legg så til følgende ved å klikke på +tegnet for hvert punkt:

• Timeline > Go To Timeline Frame > Velg "about" og Frame 1 og OK. Velg onMouseOut fra eventsmenyen.
• Timeline > Timeline > Play Timeline > Velg "about" og OK. Velg onMouseOut fra Events-menyen.
• Show/Hide Layer > Velg layer "about" og Show og OK. Velg onMouseOver fra Events-menyen.
• Timeline > Stop Timeline > velg "about" og OK. Velg onMouseOver fra Events-menyen.

Lagre!

Det var knappen i hovedmenyen, så må vi gjøre det samme for begge knappene i undermenyen i "about"-layeret.

14. Få fram "about"-layeret ved å klikke på det i Layers-paletten. Klikk på den øverste knappen "History" og legg inn følgende i Behaviors-paletten ved å klikke på +tegnet for hvert punkt:

• Timeline > Go To Timeline Frame > Velg "about" og Frame 1 og OK. Velg onMouseOut fra eventsmenyen.
• Timeline > Timeline > Play Timeline > Velg "about" og OK. Velg onMouseOut fra Events-menyen.
• Show/Hide Layer > Velg layer "about" og Show og OK. Velg onMouseOver fra Events-menyen.
• Timeline > Stop Timeline > velg "about" og OK. Velg onMouseOver fra Events-menyen.

Lagre!

Gjør det samme for knappen "future".

15. Gjør det samme for alle knappene under links, men bytt ut "about"-timeline'en med "links"-timeline'en. For alle knappene skal altså Behaviors-paletten se slik ut:

Lagre!

Dett var dett. Skal du ha flere undermenyer under undermenyene igjen, må du legge til en Behavior til med "Hide Layer" for hver undermeny i Timelinen (den underste undermenyen bør ligge først i Timelinen, f.eks. en på 10 og en på 15). På hovedknappen må du også gjemme undermenyenes undermenyer slik at de ikke popper opp når du drar musa over hovemenyknappene.