Hvordan du definerer en spesialisert CSS3-meny - dummies

Split-knappemenyene tilbyr en måte å gi CSS3-nettstedet ditt et spesielt utseende. Split-knappen forteller seerne at standardmenyvalget er det de ser for øyeblikket, men de andre valgene er tilgjengelige. Bare ved å klikke på splitt-knappen tar betrakteren til standardstedet.

Men ved å klikke på nedpilen ved siden av knappen vises de andre alternativene, og seeren kan enkelt velge noen av dem som et alternativ til en standard.

Denne typen meny er ikke begrenset til bare å lede folk til andre steder. Det kan også fungere som en slags inputfelt for et skjema. Knappen viser standardvalg for det aktuelle feltet. Du kan imidlertid også velge et av alternativene hvis de jobber bedre. Poenget er at menyene for split-knappen gir en spesialisert tilnærming til menyutvikling.

Eksemplet i denne artikkelen er avhengig av Split Menu Buttons v1. 2 eksempel vist på Dynamic Drive. Følgende trinn kommer deg i gang med å bruke denne spesialiserte menyen og tilbyr forslag til modifikasjoner du kanskje vil gjøre med det.

1. Last ned delingsknappene. js-filen som finnes i trinn 1-delen av siden Dynamic Drive, og legg den i mappen du vil bruke til testsiden din.

2. Last ned delingsknappene. css-filen som finnes i trinn 1-delen av siden Dynamic Drive, og plasser den i mappen du vil bruke til testsiden din.

3. Opprett en ny HTML 5-side ved hjelp av din favoritt tekstredigerer eller IDE, og lagre det som SplitButton. HTML.

4. Endre taggen som vist her:

   Et eksempel på bruk av en Split-knappemeny
   

5. Klikk Velg alt i trinn 2-delen på siden Dynamic Drive.

   Du ser overskriftskoden for eksemplet uthevet.

6. Kopier den merkede teksten til utklippstavlen, og lim deretter inn den i delen av eksempelsiden.

   Redaktøren legger til koden i delen. Hvis du ser nøye ut på denne koden, finner du en lenke til splitmenubuttons. css og et skript referanse til splitmenubuttons. js. Dette eksemplet er også avhengig av jQuery, så du finner et skriptreferanse til jquery. min. js.

   Koden inneholder også et skript for å opprette delingsknappene som bruker jQuery-syntaks. Du trenger ikke å endre dette skriptet så lenge du følger noen enkle regler når du lager din meny. Trinnene som følger diskuterer disse reglene.

7. Opprett koblinger for hver av de øverste menyoppføringene i delen av siden som følger:

   Hjem Produkter Om
   

   Hver av disse oppføringene er en toppmeny-knapp for siden. Når brukeren viser siden, viser den Hjem, Produkter og Om som tre knapper.Hver av knappene vil gå til et bestemt sted når du klikker. Du kan imidlertid erstatte # for href-attributtet hvis du ikke vil ha en knapp til å gjøre noe når du klikker.

   Klassen må vises som delingsknapp i alle tilfeller. Du kan finne CSS for denne klassen i delingsknappene. css-fil.

   Data-showmenu-attributtet definerer hvilken undermeny som skal brukes. Du må definere et navn, selv om du ikke har tenkt å bruke en undermeny med en bestemt knapp. I dette eksemplet vil ikke Hjem-knappen inneholde noen undermenyer.

   Data-splitmenu-attributten angir om en knapp skal vise nedpilen som en del av knappen eller som en egen knapp. Dette eksemplet viser begge tilfeller. Standardinnstillingen er sann, hvilket betyr at pilen vises som en egen knapp.

   Du bruker data-menukolorsattributtet til å angi fargene som brukes for standard bakgrunnsfargen og den valgte farge. Standardfargen er DarkRed, men de fleste utviklere vil overstyr standardene for å få et bestemt utseende.

8. Opprett en undermeny for produktmenyen, ved hjelp av følgende kode:

   
   Produkt 1
   Produkt 2
   Produkt 3
   Produkt 4
   Produkt 5
   
   

   En undermeny er ganske enkelt en uordnet liste. Hver av listepostene inneholder et anker som peker til stedet du vil seeren skal gå. Den uordnede listen må ha en id-attributtverdi som samsvarer med data-showmenu-attributtverdien. I tillegg må det første nivået av uordnede lister i en undermeny bruke delingsklassen.

9. Opprett en undermeny for Om-menyen, ved hjelp av følgende kode:

   
   Vår historie
   Personvernerklæring
   Kontakt oss
   
   Ved telefon
   Ved post
   Ved e-post > webmaster
   
   Støtte
   Denne menyen er litt mer kompleks. Hvis du vil opprette undermenyer i undermenyene dine, legger du bare til den tilsvarende uordnede listen i listeposten som vist. Undermenyen Kontakt oss inneholder faktisk tre nivåer av menyalternativer.
   
   
   
   
   
   

   Legg til klassen = "separator" -attributtet når du vil legge til litt ekstra mellomrom mellom menyelementene. Ved hjelp av dette attributtet blir det mulig for brukere å se relasjoner mellom menyelementer med større letthet.

   Lagre den endrede SplitButton. HTML og last det i nettleseren din.

10. Du ser den enkle utgangen.

    Merk at Hjem-knappen vises som en hvilken som helst annen knapp, men det mangler en pil ned fordi den ikke har en tilknyttet meny. Ved å klikke på denne knappen kommer du til hjemmesiden.

    

Som med alle CSS-baserte menyer, kan du gjøre en rekke endringer i utseendet på disse menyene. For eksempel er det mulig å endre pilene til noe annet enn den viste triangelen.