Hvordan lage dynamiske lister for HTML5 og CSS3 programmering - dummies

En enkel liste over knapper kan se bedre ut enn vanlige HTML5-koblinger, men noen ganger må siden din ha et mer komplekst navigasjonsskjema. For eksempel kan du opprette et menysystem for å hjelpe brukeren til å se strukturen på nettstedet ditt.

Bygg en nestliste

Begynn med å lage et system med nestede lister uten noen CSS i det hele tatt.

Ingen CSS styling er på plass ennå, men listen har sine egne kompleksiteter:

Den primære listen har tre oppføringer. Dette er faktisk en flerlags liste. Toppnivået indikerer kategorier, ikke nødvendigvis koblinger.
Hvert element i topplisten har sin egen underliste. Et annet lag av linker har forskjellige koblinger i de fleste elementer.
Webutviklingselementet har et annet lag med underlister. Den generelle oppsettet til denne listeoppføringen tilsvarer et komplekst hierarki med informasjon - som de fleste komplekse nettsteder.
Listen validerer til HTML Strict-standarden. Det er spesielt viktig å validere koden din før du legger til CSS når det innebærer noe komplisert HTML-kode, som multilevellisten. Et lite problem i HTML-strukturen som kan gå ubemerket i et vanlig HTML-dokument, kan forårsake alle slags merkelige problemer i CSS.

Her er koden for den nestede listen i vanlig HTML:

nestedList. html

noen av mine favorittkoblinger

sosiale nettverk

digg
reddit
stumbleupon


referanse

google
wikipedia
ordbok


webutvikling

XHTML / CSS

w3 skoler
htmlHelp
CSS Zen Garden


Programmering

javascript. no
php. net
mysql. com

Vær spesielt forsiktig med innrykket når du lager en kompleks, nestet liste som denne. Uten riktig innrykning blir det svært vanskelig å etablere strukturen på siden. Et listepunkt kan også inneholde tekst og en annen liste. Ethvert annet arrangement vil føre til en valideringsfeil.

Skjuler indre lister

Det første trinnet med å opprette et dynamisk menysystem er å skjule alle lister som er innebygd i en liste element. Legg til følgende CSS-stil på siden din:

li ul {display: none;}

I virkeligheten bruker du vanligvis denne teknikken kun til en spesielt merket div, som et menysystem.

Din side vil gjennomgå en forferdelig transformasjon.

Den lille lille koden av CSS-koden er et ekte kraftverk. Det gjør noen fascinerende ting, for eksempel

Drift på uordnede lister som vises i listepostene: Dette betyr egentlig at den øverste listen ikke vil bli påvirket, men en uordnet liste som vises i et listeobjekt vil ha stilen ble brukt.
Bruk display: none for å få tekst til å forsvinne: Angi displayattributtet for å fortelle HTML-siden for å gjemme de oppgitte dataene helt.

Denne koden fungerer bra på nesten alle nettlesere.

Få de indre lister til å vises på cue

Den morsomme delen er at interiallistene kommer opp når musen er over overordnet elementet. En annen CSS-stil kan få dette til å skje:

li ul {display: none;} li: hover ul {display: block;}

Den nye koden er ganske interessant. Sjekk ut effekten av å holde musen over elementet Sosiale nettverk.

Denne koden fungerer ikke på alle nettlesere! Internet Explorer 6 (IE6) og tidligere versjoner støtter ikke: sveverpseudoklassen på noe element bortsett fra a. Gi en betinget kommentar med en alternativ stil for tidlige versjoner av IE. Alle moderne nettlesere (inkludert IE 7 og nyere) fungerer fint.

Slik fungerer den liste-reappearing-koden:

Alle lister i lister er skjult. Den første stilregelen gjemmer en liste som er inne i et listeelement.
li: svever refererer til et listepunkt som hoveres på. Det vil si at hvis musen ligger på toppen av et listepunkt, gjelder denne regelen den.
li: svever ul refererer til en uordnet liste inne i et svevert listepost. Med andre ord, hvis noe innhold er en uordnet liste som hviler inne i en liste som for øyeblikket har musen over det, gjelder denne regelen.
Vis listen som en blokk. display: blokk overstyrer den forrige skjermen: ingen instruksjon og viser det aktuelle elementet som en blokk. Teksten vises igjen magisk.

Dette skjult-og-lure-trikset er ikke så bra alene. Det er faktisk ganske irriterende å ha innholdet dukker opp og gå bort slik. Det er et annet mer irriterende problem.

For å se hvorfor dette skjer, ta en titt på CSS-koden som får segmentet til å vises:

li: svever ul {display: block;}

Denne koden betyr at skjermbildet skal blokkere for eventuelle ul et barn med en hovered li. Problemet er at Web Development li inneholder en ul som inneholder to flere uls. Alle lister under webutvikling vises, ikke bare det nærmeste barnet.

En ytterligere endring av CSS løser dette problemet:

li ul {display: none;} li: svever> ul {display: block;}

Den større enn symbolet (>) er et spesialvelgerverktøy. Det indikerer et direkte forhold. Med andre ord, ul må være et direkte barn av hovered li, ikke et barnebarn eller barnebarn. Med denne indikatoren på plass fungerer siden riktig.

Dette trikset lar deg lage nestede lister så dypt som du ønsker, og å åpne et hvilket som helst segment ved å svinge på foreldrene.

Min nåværende kode har en liste med tre nivåer av nesting, men du kan legge til så mange nestede lister som du vil, og bruk denne koden for å gjøre det til en dynamisk meny.