/ / Hvordan lage en rullegardinliste i HTML

Hvordan lage en rullegardinliste i HTML

Den enkleste rullegardinlisten i HTML er enkel å lage ved hjelp av select -taggen. Dette er en containerkode, alternativkoder er nestet i den - de definerer listeelementene.

Det er flere alternativer for lister du kanlage valgkoden: en rullegardinliste (alternativer faller ut etter at du har klikket på hovedfeltet eller svevet over det) og en flervalgsliste - i den kan brukeren velge flere elementer. Førstnevnte er mer vanlige, de er et vesentlig element i navigasjonen på moderne nettsteder. Rullegardinlisten med flere valg kan for eksempel brukes i kataloger der du må velge flere produktkarakteristikker.

nedtrekksliste

Du kan endre utseendet og egenskapene til lister ved å bruke generiske og egendefinerte attributter.

Velg tag -attributter

1. Multiple - angir flervalg.

2.Størrelse - angir antall synlige linjer i listen, det vil si høyden. Og her avhenger alt av om multiple -attributtet er tilstede eller ikke. Hvis ja, og du ikke angir størrelse, vil brukeren i nærvær av flere se alle mulige valg, hvis flere er fraværende, vil bare en linje vises, og resten av den besøkende vil kunne lese når han klikker på heisikonet på høyre side. Hvis høyden er angitt og det er mindre enn antall alternativer, vises en rullefelt til høyre.

3. Navn - navn. Nedtrekkslisten kan dispenseres, men det kan være nødvendig å samhandle med behandleren på serveren. Som regel er navnet fortsatt angitt.

Velg -taggen har ikke de nødvendige attributtene, i motsetning til alternativtaggen.

html rullegardinliste

Alternativ nestede tagattributter

  1. Valgt - designet for å velge et listeelement. Brukeren vil kunne velge mer enn ett element hvis attributtet multiple er angitt (se ovenfor).
  2. Verdi - verdi. Dette attributtet er obligatorisk. Webserveren må forstå nøyaktig hvilke listeelementer brukeren har valgt.
  3. Merkelapp.Dette attributtet kan brukes til å forkorte for lange listeelementer. For eksempel vil “Milan” vises i stedet for alternativet “Milan er det administrative sentrum i Lombardia” som er angitt i koden. Nord -Italia ". Dette attributtet brukes også til å gruppere elementer i en liste.

Når det gjelder bredden på listen, er den som standard angitt til lengden på den bredeste teksten i listen. Selvfølgelig kan bredden endres ved hjelp av HTML -stiler.

Nedtrekksliste på andre måter

Det kan for eksempel gjøres med CSSlisten vil vises når du holder markøren over et sideelement. JavaScript gir gode alternativer for å lage lister, noe som er forenklet av Jquery -biblioteket. Rullegardinlisten som er knyttet til dette biblioteket, kan være veldig kompleks, for eksempel cascading. Det vil si at når du velger et element i en liste, vises følgende liste, for eksempel er det et menyelement "Dameklær" (typer klær faller ut ved sveising), og når du velger en av typene, for eksempel , "Yttertøy", vises en liste med følgende varer: jakker, parkas, strøk, korte strøk, pelsfrakker, etc.

rullegardinmenyen jquery

Vi har overfladisk listet opp hovedmetodene forsom du kan lage en rullegardinliste med. Selvfølgelig er det mange nyanser i HTML, CSS og JavaScript som lar deg endre funksjonalitet og utseende på lister.