Hvordan man opretter menuer i CSS3 - dummies

De fleste steder bruger et menysystem af en slags, som du kan oprette ved hjælp af CSS3. I mindst nogle tilfælde bruger menusystemet billedkort eller anden teknik, som ikke understøttes af Dynamic Drive. De fleste websteder er dog afhængige af horisontale, lodrette eller kombinationsmenuer.

I løbet af årene har brugerne været vant til at arbejde med menuer, så det er simpelt at bruge dem på et websted. En bruger forstår, hvordan man bruger en menu intuitivt, så der er ingen indlæringskurve. Selvfølgelig kan dårligt definerede eller komplekse menuindgange stadig forvirre brugere, men menikken i selve menuen er godt forstået.

Sådan udvikler du horisontale menuer i CSS3

Horisontale menuer har valg, der vises i en vandret linje. Normalt vises disse menuer over toppen af ​​et indholds område, men menuer kan også vises nederst i indholdsområdet eller et hvilket som helst sted mellem. Pointen er, at en vandret menu har en særlig orientering.

For de fleste websteder repræsenterer den vandrette menu vigtigste valg af steder, f.eks. At gå til en liste over produkter eller se den omgående side. Dynamisk drev giver syv sider med horisontale menufunktioner (som i denne skrivning), der giver forskellige specialeffekter.

Menuerne har alle en særlig effekt. Når du klikker på et bestemt menupunkt, ser du en side med en demonstration. For at se den særlige effekt skal du normalt holde musemarkøren over de tegn eller grafik, der leveres som en del af menuen.

Med eksempeleksemplet svæver musemarkøren over et af hjerterne hjerteflugt rundt for at indikere, at hjertet er valgt som en menupunkt.

Bemærk, at toppen af ​​siden også indeholder en beskrivelse af menuen sammen med en liste over kompatible browsere. Beskrivelsen indeholder normalt også nogle tekniske noter. Det er vigtigt at læse de tekniske noter efter at have gennemgået koden for at sikre, at du forstår, hvordan du implementerer menuen.

Den nederste halvdel af siden indeholder koden for eksemplet. I modsætning til layouterne er CSS og HTML placeret i separate vinduer, hvilket betyder at du ikke behøver adskille dem manuelt.

Hertil kommer, at HTML-delen ikke indeholder en komplet side - det er et fragment, som du skal indlejre på din egen side for at teste. (Du kan finde dette eksempel som en komplet side i mappen Kapitel 07 i den downloadbare kode som HorizontalMenu. HTML.) Du bruger dog den samme teknik som du gør med layouterne for at udvide og kopiere koden, når du ønsker det.

Bemærk linket efter koden.Eksemplet indeholder en menu, der er baseret på hjerteikoner. Du kan klikke på dette link for at downloade ikonerne, hvis det ønskes.

I nogle tilfælde leveres disse ikoner af andre websteder. Det andet websted kan have fået ikonerne utilgængelige, og du vil opdage, at du slet ikke vil kunne downloade dem (f.eks. De hjerteformede sociale medier ikoner, der bruges til dette eksempel). En vej rundt om dette problem er at downloade ikonet direkte fra webstedet Dynamic Drive.

Ikke alle menuerne er et enkelt lag. Opdelingsmenuen Split indeholder to niveauer af valg Et par af disse menuer er afhængige af tredjepartsprodukter, som jQuery. Eksemplet jQuery Drop Line Menu indeholder flere menuniveauer (op til fire niveauer vises i eksemplet).

Da dette ikke er en ren CSS-løsning, skal du sikre dig, at de brugere, der har adgang til webstedet, vil have JavaScript-support aktiveret i deres browsere.

Sådan udvikles vertikale menuer i CSS3

Vertikale menuer kan bruges til omdirigering på stedet. Imidlertid bruger mange websteder dem til siderespecifikke eller emnespecifikke links. Du finder de vertikale menuvalg på CSS Library. Der er ikke så mange vertikale menupunkter, da der er vandrette menuer (kun tre sider værd). Derudover kan du have svært ved at finde kompatible vandrette og vertikale menupar (CSS3-skyggemenuerne kommer i både vandrette og lodrette formater).

De vertikale menuer fungerer på samme måde som de vandrette menuer gør. Den eneste forskel er deres orientering. Eksempelsiderne indeholder de samme typer indhold, og du skal indsætte HTML-koden i en eksisterende side, ligesom du gør med de vandrette menuer.

Webstedet giver i øjeblikket ingen vertikale menuer på flere niveauer, så hvis du har brug for mere end et menuniveau, skal du bruge en vandret menu eller finde en menu på et andet websted.