HodTari.com

Sådan oprettes en suspenderet menu i HTML og CSS

En rullemenu giver et klart, hierarkisk billede af hoveddelen af ​​en side og dens underafsnit. Alt du skal gøre for at få underdelen vist, er at svæve over hovedafsnittet. Du kan gøre dette ved kun at bruge HTML og CSS programmeringssprog.

trin

Del 1
Planlægning af HTML-koden

Billede med titlen Opret en dropdown-menu i HTML og CSS Trin 1
1
Opret navigationsafsnittet. Generelt bruger folk
  • Billede med titlen Opret en dropdown-menu i HTML og CSS Trin 2
    2
    Giv en klasseattribut til hver sektion. Vi vil bruge klassen attributten senere til at stylisere disse elementer ved hjælp af CSS. Giv separate klassegenskaber til beholderen og til menuen.
    • class = "nav-wrapper">
  • Billede med titlen Opret en dropdown-menu i HTML og CSS Trin 3
    3
    Tilføj en liste over menupunkter. En uordnet liste (
      ) indeholder de øverste menupunkter (listeposter
    • ), over hvilke brugere svæver over rullemenuerne. Tilføjer "clearfix" klassen til listelementet (vi går tilbage til det senere i CSS stilark).
        • Hjemmeside
        • medarbejdere
        • Kontakt os
  • Billede med titlen Opret en dropdown-menu i HTML og CSS Trin 4
    4
    Indtast linkene. Hvis de øverste menuer også har links til dine egne sider, skal du indsætte dem nu. Hvis de ikke har links, skal du oprette en for en ikke-eksisterende side (f.eks. "#!") Så brugerens markør ændrer udseende. I dette eksempel fører linket "Kontakt" ikke til nogen side, men de to andre menupunkter gør:
  • Billede med titlen Opret en dropdown-menu i HTML og CSS Trin 5
    5
    Opret en underliste for de suspenderede varer. Når styling er færdig, bliver disse lister drop-down menuen. Opbevar den inden for emnelisten, at brugeren skal flytte musen over. Som før skal du inkludere en klasseattribut og et link.


    • Del 2
    Planlægning af CSS-kode

    Billede med titlen Opret en dropdown-menu i HTML og CSS Trin 6
    1
    Åbn CSS stilark. Link CSS-stilarket til "hoved" -delen af ​​HTML-dokumentet, hvis du ikke allerede har gjort det. Denne artikel beskriver ikke basiselementerne i CSS-programmeringssproget, f.eks. Skrifttypeindstilling og baggrundsfarve.
  • Billede med titlen Opret en dropdown-menu i HTML og CSS Trin 7
    2
    Tilføj "clearfix" -koden. Husk den "clearfix" klasse du tilføjede i menulinjen? Typisk har elementerne i rullemenuen en gennemsigtig baggrund og kan blande andre elementer omkring det. En lille CSS-kode kan løse dette problem. Her er en enkel og nem løsning, men ikke understøttet af Internet Explorer 7 eller tidligere:
    • .clearfix: efter {
    • indhold: "" -
    • display: table-
    • }
  • Billede med titlen Opret en dropdown-menu i HTML og CSS Trin 8
    3
    Opret det grundlæggende layout. Denne kode organiserer menuen øverst på siden og gemmer de suspenderede elementer. Dette er strengt funktionelt for at være fokuseret på den relevante kode - du kan derefter spruce den op med ekstra CSS egenskaber som fyld og margen.
    • .nav-wrapper {
    • bredde: 100%
    • baggrund: # 999-
    • }
    • .nav-menu {
    • stilling: relative-
    • display: inline-block-
    • }
    • .nav-menu li {
    • display: inline-
    • liste-stil-type: none-
    • }
    • .undermenu {
    • position: absolut-
    • display: none-
    • baggrund: # ccc-
    • }
  • Billede med titlen Opret en dropdown-menu i HTML og CSS Trin 9
    4
    Gør et suspenderet emne vist ved at svinge over det. Elementer i rullelisten er indstillet til ikke at blive vist. Sådan får du en hel underlist op ved at svinge over listen, som den tilhører:
    • .nav-menu ul li: hover> ul {
    • display: inline-block-
    • }
    • Bemærk: Hvis rullelisterne fører til yderligere menuer (flydende kontroller), vil alle egenskaber, der er tilføjet her, påvirke dem alle. Hvis du kun vil style det første niveau i rullemenuen, skal du bruge ".nav-menu> ul".
  • Billede med titlen Opret en dropdown-menu i HTML og CSS Trin 10
    5
    Vis rullemenuen med en pil. Webdesignere angiver ofte, at et element åbner en rullemenu med en pil pegende ned. Følgende kode tilføjer denne pil til hvert menupunkt:
    • .nav-menu> ul> li: efter {
    • indhold: " 25BC" - / * unicode kode for pil nedad * /
    • font-size: .5em-
    • display: inline-
    • stilling: relative-
    • }
    • Bemærk: Foretag justeringer i pilens position ved hjælp af egenskaberne "top" (over), "bund" (nedenfor), "højre" eller "venstre" (venstre).
    • Bemærk: Hvis ikke alle menupunkter er suspenderet, skal du ikke indstille hele "nav-menuen" -klassen. I stedet skal du tilføje en anden klasse (f.eks. Rullemenuen) i hvert HTML-element "li", hvor du vil placere pilen. I koden ovenfor henvises til denne klasse.
  • Billedbetegnelse Opret en dropdown-menu i HTML og CSS Trin 11
    6
    Juster fyld, baggrund og andre egenskaber. Menuen skal nu være funktionel, men det skal styling. Hvis du ikke er bekendt med grundlæggende CSS-egenskaber, skal du kigge efter vejledning på internettet. Brug disse egenskaber til at foretage ændringer i udseendet og placeringen af ​​hver elementklasse.

    • tips