Hvordan lage en horisontal rullegardinmenyen med HTML, CSS og jQuery

Hvordan lage en horisontal rullegardinmenyen med HTML, CSS og jQuery

Hvordan lage en horisontal rullegardinmenyen med HTML, CSS og jQuery

Menyer spille en viktig del på nettet. De tillater brukerne å orientere seg og hjelpe dem å navigere ditt nettsted. Når utforme menyer. brukervennlighet er nøkkelen. Nybegynnere ofte slite med det grunnleggende. I denne opplæringen skal jeg vise deg hvordan du lager en enkel, brukervennlig og funksjonell horisontale menyen med HTML og CSS. Jeg vil også dykke litt inn jQuery for å legge til animasjoner til menyen.

Denne opplæringen forutsetter at du har en grunnleggende kunnskap om HTML og CSS. Det anbefales å bruke en CSS reset for konsistens. Jeg bruker en av HTML5Doctor.

Det grunnleggende

La oss starte med det grunnleggende HTML strukturen i menyen:

En meny består av en uordnet liste, og hvert listepunkt inneholder en kobling med teksten. Ikke lag unødvendige divs. Du trenger ikke noen.

For å legge til en undermeny bare reir annen sorterte liste inne elementet som kommer til å ha undermenyen, som dette:

Som du kan se, skaper strukturen er svært enkel. Dette er hvordan det skal se ut i nettleseren på dette stadiet:

Det er flere måter å sette opp CSS for en horisontal meny. Etter mange år fant jeg ut at dette er den raskeste og reneste måten å gjøre det:

  • Jeg bestemte meg for å flyte hele menyen til å inneholde det, men du kan bruke overflow skjult eller selv sette en fast bredde for samme formål.
  • Det er viktig å flyte listeelementene i stedet for koblinger.
  • Lenkene skal vises som blokker, ellers vil de ikke oppfører seg som forventet.
  • Absolutt posisjon undermenyen og skjule den for å fjerne den fra den vanlige flyten og gjøre det usynlige. Sett også en høy z-indeks for å hindre undermenyen vises bak andre elementer.
  • Sett en høyde for leddelementene og line-height lik høyden for å sentrere teksten vertikalt. Ved å angi en fast høyde i stedet for bare å bruke padding du unngå flimring problemer med jQuery animasjoner senere.
  • Selv om det ikke er nødvendig å sette en fast bredde for undermenypunktene, er det alltid en god praksis. Den lar deg style dem mer konsekvent senere.
  • Legg merke til at hover staten er satt på listen element og ikke koblingen.

Med alt dette settet, skal menyen være allerede jobber. Prøv å åpne den i nettleseren din og svever over det tredje alternativet for å vise undermenyen.

forbedre Usability

Dette trinnet vil dekke hvordan å style menyen med noen grunnleggende CSS for å gjøre den mer tilgjengelig.

Husk dette er helt grunnleggende, og er ment å være bare et eksempel. Du kan style dette slik du vil. Det som er viktig å huske på her er, som jeg nevnte tidligere at hover stater, er stylet i listeelementene og ikke linkene.

Dette er hvordan menyen ser så langt:

Legge Animasjoner

Dette siste trinnet er ikke nødvendig, men det vil hjelpe deg legge til animasjoner til din meny med enkel jQuery. Det første du trenger å gjøre, selvfølgelig, er å ringe den nyeste jQuery plugin på din nettside:

Nå, la oss legge til en "nojs" klasse til undermenyen for å kunne ta av hover css stat i jQuery. Dette vil også sikre at menyen vil fortsatt fungere når javascript er deaktivert.

Du må også legge til klassen til undermenyen CSS hover state:

Nå som alt er satt la oss legge til litt magi:

Koden er ganske forklarende. Skriptet finner de umiddelbare barn listeelementer og legger til en hover funksjon. Inne i funksjon det fjerner "nojs" klasse siden vi bruker Javascript, og deretter det forteller menyen for å skli ned på hover og å gli opp på un-hover. Dette oppnås med den slideToggle funksjon. Stoppfunksjonen hindrer animasjon fra å gjenta seg selv hvis vi sveve flere ganger.

Ytterligere Merknader

Menyen skal fungere i IE7 + og alle andre moderne nettlesere. Jeg gadd ikke å støtte IE6. Jeg er sikker på at det kan fungere med noen reparasjoner her og der, men det er ikke hensikten med denne opplæringen.

Jeg oppfordrer deg til å prøve noen CSS3 egenskaper å style menyen din, mulighetene er nesten uendelige. Jeg foreslår at du bruker ColorZilla gradient generator for å lage dine gradienter.

Jeg ser frem til å se hva du kan gjøre.

Synspunktene i denne artikkelen er de av forfatteren og ikke nødvendigvis de av Onextrapixel.

Kilde: www.onextrapixel.com

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *

three × one =