Opprette en vertikalt meny med tre nivåer med CSS

Å bruke CSS og HTML for å lage menyer er enkelt og effektivt, ettersom det lar deg bygge og utvide menyen ved å legge til nye nivåer og elementer enkelt. I denne opplæringen bygger vi en tre-nivå rulleringsmeny som utvides vertikalt når brukeren beveger musen over elementene.

For å forstå ideene som presenteres her, trenger du litt kunnskap om HTML-ordnede lister og CSS

Det endelige resultatet vi sikter til er:


For det første må vi lage litt plass på HTML-siden for å holde CSS-menyen.

body { margin: 0; padding: 5px; } #menuContainer { background-color: white; width: 10em; padding: 5px; } 

Legg merke til at vi bruker "em" for å angi bredden på beholderen, ikke px. Årsaken til dette er at hvis brukeren velger å endre størrelsen på teksten i nettleseren, så vil størrelsen på elementene endres også for å få plass til teksten.

Denne beholderstilen blir brukt på et HTML-element:

Inne i dette div-elementet må vi sette noen nestede bestilte lister for å lage strukturen for menyen vår. Koden nedenfor viser de tre nivåene vi skal implementere.

  • bøker
    • Skjønnlitteratur
      • Classics
      • Romanse
      • Skrekk
    • Non-Fiction
      • Militær
      • Historie
      • hage~~POS=TRUNC
  • DVD
    • Handling
    • Komedie
    • Thriller
  • spill
    • Brettspill
    • PC-spill
    • X-Box-spill

For å skjule kulene i den uordnede listen setter vi listetypetypen til ingen og setter margen og polstring til 0, i forhold til menyen Container for å fjerne standardinnrykk.

 #menuContainer ul { list-style-type: none; margin: 0; padding: 0; } 

Koden nedenfor definerer utseendet til

  • elementer og tilhørende lenker.

     #menuContainer li { background-color: #CC6600; border: 1px solid #FF9933; width: 10em; /* this is to make the submenus position relative to this li */ position: relative; } #menuContainer a { text-decoration: none; color: #FFCC66; font-weight: bold; font-size: 10pt; font-family: Verdana, Arial, sans-serif; } 

    Her setter vi bakgrunn, grense og bredde attributter for alle

  • elementer i menyen Container. Vi fjerner også standardunderstrekningene i lenker og setter egne fontattributter.

    Når brukeren beveger musen over et element, ønsker vi at bakgrunnsfargen, kanten og koblingsfargen til elementet skal endres. Vi gjør dette med:

     #menuContainer li:hover { border: 1px solid #CC6600; background-color: #FF9933; } #menuContainer a:hover { color: #993300; } 

    Deretter ønsker vi å plassere andre og tredje nivå på menyen til høyre for foreldreelementet ved å bruke absolutt posisjonering. Merk at de vil være plassert i forhold til foreldrene

  • element - vi fikk dette arbeidet til å bruke posisjon: relativ når vi erklærte li-stilen ovenfor. I tillegg ønsker vi at barneknodene skal samordne seg med overordnede noder ved å bruke toppen: 0. Til slutt, når vi har plassert elementene våre etter vår smak, ønsker vi å skjule dem til brukeren flytter musen over de tilsvarende overordnede elementene. Dette kan gjøres ved å sette synlighetsattributtet til "skjult", som vist nedenfor.

     #menuContainer ul ul { position: absolute; left: 10em; top: 0; visibility: hidden; } 

    Du lurer kanskje på om "#menuContainer ul ul" bare betyr det andre nivået på menyen. Det kan se ut til å være slik, men stilen gjelder faktisk for alle lister som har et overordnet listeelement. Dette betyr at stilen brukes på alle listene, men på toppnivå.

    Nå til den morsomme delen! Vi vil at andre og tredje nivå skal dukke opp når brukeren beveger musen over foreldrene

  • elementer.

     #menuContainer li:hover>ul { visibility: visible; } 

    Legg merke til at vi bruker barnevelgeren> for denne regelen, som er forskjellig fra forrige regel. Her innfører vi denne regelen på

      som er en direkte etterkommer av en
    • . Med andre ord
        er inneholdt direkte i
      • og er derfor dets barnelement. Hva denne regelen i utgangspunktet sier er at hver
      • element vil bare vise sine direkte barnemenyelementer.

        Denne koden vil fungere nydelig i Firefox og Internet Explorer 7, men den dårlige nyheten er at hvis du bruker en eldre versjon av IE, vil du få problemer. Det du sannsynligvis vil merke er at mens du beveger musen over elementene på første nivå, vil bakgrunnsfargen ikke endres, og heller ikke andre og tredje nivå på menyen. Dette er fordi eldre versjoner av IE ikke støtter sveveegenskapen over noe HTML-element, men lenker. Bruken av barnevelgeren (>) støttes heller ikke. Så hvis du er fast bestemt på å få denne menyen til å fungere i eldre versjoner av IE, som ikke er standarder, trenger du en løsning.

         /*Mouseover: display second level or third level pop-up*/ #menuContainer li:hover ul, #menuContainer li:hover li:hover ul { visibility: visible; } 

        Uten barnevelgeren når brukeren svir over elementene på første nivå, vil både andre- og tredje nivå-menyene vises.

         /* Hide third level menu when the mouse is over the first level li*/ #menuContainer li:hover ul ul { visibility: hidden; } 

        Med denne regelen skjuler vi menyen på tredje nivå når menyen på andre nivå må vises.

        Koden ovenfor bruker en CSS-funksjon som heter spesifisitet, som dikterer hvilken regel som skal vises når flere regler gjelder for samme element. Hvis mer enn én regel gjelder for samme element, vil den valgte være den mest spesifikke. For eksempel, hvis vi har to regler, "ul ul" og "li: hover ul", og de begge gjelder for en gitt

          element, så er den som faktisk brukes det mer spesifikke, "li: hover ul". "#MenuContainer li: hover li: hover ul" i koden over er det mer spesifikke og forteller det tredje nivået som skal vises når både det første og det andre nivået er i svevet.

          Så det tar vare på barnevalgsproblemet, men hva med svømmene? Peter Nederlof har gjort dette mulig med et hendig hva som helst: hover-manus. Dette skriptet bruker en IE-spesifikk funksjon for å knytte JavaScript-hendelser dynamisk til de elementene som har svevetyper. Hvis du vil bruke skriptet, må du lagre det i en fil som heter ccshover.htc og referere det i stilarket ditt slik:

           body { margin: 5px; padding: 0; behavior:url("csshover.htc"); } 

          For å få menyen til å fungere på tvers av alle nettlesere, kan du henvise til to stilark på HTML-siden din ved å bruke betingede kommentarer fra IE.

          
          
  • © Copyright 2020 | mobilegn.com