Hvordan lage menyer i CSS3 - dummies

De fleste nettsteder bruker et menysystem av noe slag, som du kan opprette ved hjelp av CSS3. I minst noen tilfeller bruker menysystemet bildekart eller annen teknikk som ikke støttes av Dynamic Drive. De fleste nettsteder er imidlertid avhengige av horisontale, vertikale eller kombinasjonsmenyer.

I løpet av årene har brukerne blitt vant til å jobbe med menyer, så det er enkelt å bruke dem på et nettsted. En bruker forstår hvordan man bruker en meny intuitivt, så det er ingen læringskurve. Selvfølgelig kan dårlig definerte eller komplekse menyoppføringer fortsatt forvirre brukere, men mekanikken til menyen selv er godt forstått.

Slik utvikler du horisontale menyer i CSS3

Horisontale menyer har valg som vises i en horisontal linje. Normalt vises disse menyene over toppen av et innholdsområde, men menyer kan også vises nederst i innholdsområdet eller et hvilket som helst sted mellom. Poenget er at en horisontal meny har en bestemt orientering.

For de fleste områder representerer den horisontale menyen de viktigste nettstedvalgene, for eksempel å gå til en liste over produkter eller å se omsiden. Dynamisk stasjon gir syv sider med horisontale menyoppgaver (i henhold til denne skrivingen) som gir forskjellige spesielle effekter.

Menyene har alle en spesiell effekt. Når du klikker på et bestemt menyvalg, ser du en side med demonstrasjon. For å se den spesielle effekten må du normalt sveve musepekeren over tegnene eller grafikken som følger med som en del av menyen.

For eksempel, med eksempelmenyen, svinger musepekeren over et av hjertene hjertet for å indikere at hjertet har blitt valgt som et menyalternativ.

Legg merke til at toppen av siden også inneholder en beskrivelse av menyen, sammen med en liste over kompatible nettlesere. Beskrivelsen inneholder vanligvis også noen tekniske notater. Det er viktig å lese de tekniske notatene etter gjennomgang av koden for å sikre at du forstår hvordan du implementerer menyen.

Den nederste halvdelen av siden inneholder koden for eksemplet. I motsetning til layoutene er CSS og HTML plassert i separate vinduer, noe som betyr at du ikke trenger å skille dem manuelt.

I tillegg gir ikke HTML-delen en komplett side - det er et fragment som du må legge inn på din egen side for å teste. (Du kan finne dette eksemplet som en fullstendig side i kapittel 07-mappen for den nedlastbare koden som HorizontalMenu. HTML.) Du bruker imidlertid samme teknikk som du gjør med layoutene for å utvide og kopiere koden når du ønsker det.

Merk lenken etter koden.Eksemplet gir en meny som er avhengig av hjerteikonene. Du kan klikke på denne linken for å laste ned ikonene hvis ønskelig.

I noen tilfeller leveres disse ikonene av andre nettsteder. Det andre nettstedet kan ha gjort ikonene utilgjengelige, og du finner at du ikke kan laste ned dem når som helst (for eksempel de hjerteformede sosiale medieikonene som brukes til dette eksempelet). En vei rundt dette problemet er å laste ned ikonet direkte fra nettstedet Dynamic Drive.

Ikke alle menyene er et enkelt lag. Split Drop Down-menyen gir to nivåer av valg Noen av disse menyene stole på tredjepartsprodukter, for eksempel jQuery. Eksemplet jQuery Drop Line Menu gir flere menynivåer (opptil fire nivåer er vist i eksempelet).

Fordi dette ikke er en ren CSS-løsning, må du imidlertid sørge for at brukerne som får tilgang til nettstedet, har aktivert JavaScript-støtte i nettleserne.

Slik utvikler du vertikale menyer i CSS3

Vertikale menyer kan brukes til omplassering på stedet. Imidlertid bruker mange nettsteder dem for sidespesifikke eller emnespesifikke koblinger. Du finner de vertikale menyalternativene på CSS Library. Det er ikke så mange vertikale menyalternativer som det er horisontale menyer (kun tre sider). I tillegg kan det være vanskelig å finne kompatible horisontale og vertikale menypar (CSS3-skyggemenyene kommer i både horisontale og vertikale formater).

De vertikale menyene fungerer som de horisontale menyene gjør. Den eneste forskjellen er deres orientering. Eksempelsidene inneholder de samme innholdstyper, og du må sette inn HTML-koden i en eksisterende side, akkurat som du gjør med de horisontale menyene.

Nettstedet gir for øyeblikket ikke flere vertikale menyer på flere nivåer, så hvis du trenger mer enn ett menynivå, må du bruke en horisontal meny eller finne en meny på et annet nettsted.