Kako stvoriti padajući izbornik na HTML i CSS -

Iz ovog člana naučit ćete kako stvoriti padajući izbornik sa HTML i CSS-om. Ispuštanje izbornika otvara se kada korisnik donese pokazivač miša na njega - kada je meni otvoren, korisnik može kliknuti jednu od opcija izbornika za prijelaz na odgovarajuću stranicu.

Korake

jedan. Otvorite uređivač teksta. Možete koristiti redovan uređivač teksta, kao što su notepad ili TexteDit ili funkcionalniji uređivač teksta, poput notepad++.

Notepad ++ prvo otvorite meni "Jezik" na vrhu prozora i odaberite "HTML".

2. Unesite zaglavlje dokumenata. Ovaj kôd koji definira vrstu koda koji se koristi u ostatku dokumenta:

3. Napravite padajući izbornik. Unesite sljedeći kôd za podešavanje veličine i boje menija. Umjesto "#", unesite željenu znamenku (veći je broj, veće je meni). Također u redama "Boja pozadine" i "boja", možete zamijeniti ime željene boje ili njegov HTML kod:

.Dropbtn {Boja pozadine: Crna boja: bijela bomba: # PX-fontov veličine: # PX obrub: None-}

4. Navedite da će opcije biti prisutne u meniju. Budući da će se opcije dodati kasnije, postavite ih u meni unošenjem sljedećeg koda:

.Pada {pozicija: relativni prikaz: Inline-Block-}

pet. Postavite izgled padajućeg izbornika. Sljedeći kôd postavit će veličinu izbornika, njegov položaj kada su pogođeni drugi elementi web stranice, a boja. U liniji "min-width", umjesto "#", zamijenite željenu znamenku (na primjer, 250), a u liniji "pozadine" - naziv željene boje ili njegov HTML kod:

.Ispadanje sadržaja {ekran: nema položaja: apsolutna pozadina-boja: lightgrey-min-širina: # px-z-indeks: 1-}

6. Dodajte informacije o sadržaju padajućeg izbornika. Sljedeći kôd postavlja boju teksta i veličinu gumba MENU. Umjesto "#" zamjenjuju broj (u pikselima) za podešavanje veličine gumba:

.Ispadanje sadržaja A {boja: crno-podstava: #px # px-tekstualni dekoracija: nema prikaz: blok-}

7. Navedite kako će se boje menija promijeniti kada će korisnik prikazati kursor miša. Prvi red "Boja pozadine" ukazuje na boju u kojoj je odabrana opcija oslikana, a u drugom redu "Boja pozadine" boja u kojoj je obojeno padajuće dugme izbornika. U idealnom slučaju, ove boje trebaju biti lakše od boja opcija i gumba kada kursor nije skriven na njima.

.Ispadanje sadržaj A: HOVER {Boja pozadine: White-}.Ispadanje: lebdjeti .Ispadanje-sadržaj {Ekran: Block-}.Ispadanje: lebdjeti .Dropbtn {Boja pozadine: Grey-}

osam. Zatvorite odjeljak CSS-a. Da biste to učinili, unesite sljedeći kod:

devet. Navedite naziv padajućeg izbornika. Unesite sljedeći kôd gdje se "naziv" zamijeni riječ (na primjer, "meni"), koji će biti prikazan na gumb MENU.

 klasa ="Ispustiti"> Klasa ="Dropbtn"> Ime Class ="Sadržaj pada">

10. Dodajte opcije menija. Svaka opcija izbornika trebala bi režirati bilo što, na primjer, na stranicu vaše ili druge web stranice. Da biste dodali opcije u meniju, unesite sledeći kod gde https: // Web stranica.Com Pozorite adresu stranice (citati ne brišući), a umjesto "naziva" zamjenjuju opciju imena.

 href ="https: // Web stranica.Com"> Naziv href ="https: // Web stranica.Com"> Naziv href ="https: // Web stranica.Com"> Ime

jedanaest. Popunite kod. Unesite sljedeće oznake da biste odredili kraj padajućeg izbornika:

12. Pregledajte kod padajućeg izbornika. Kod bi trebao izgledati ovako:

 {Pozadina - boja: crno-boja: bijelo-podstava: 16px-fontova-veličina: 16px-granica: none-}.Pada {pozicija: relativni prikaz: Inline-Block-}.Ispadanje sadržaja {ekran: nema položaja: apsolutna pozadina - boja: LightGrey-min-širina: 200px-z-indeks: 1-}.Ispadanje sadržaj A {boja: crno-podstava: 12px 16px-tekstualni dekoracija: nema-displej: blok-}.Ispadanje sadržaj A: HOVER {Boja pozadine: White-}.Ispadanje: lebdjeti .Ispadanje-sadržaj {Ekran: Block-}.Ispadanje: lebdjeti .Dropbtn {Boja pozadine: Grey-} Class ="Ispustiti"> Klasa ="Dropbtn"> Društvene medije klase ="Sadržaj pada"> Href ="https: // Google.Com"> Google href ="https: // Facebook.Com"> Facebook href ="https: // YouTube.Com"> Youtube

Savjeti

Uvijek provjerite kod prije nego što ga objavite na svojoj web stranici.
Ovdje opisane metode dizajnirane su za stvaranje padajućeg izbornika koji se otvori ako donesete kursor miša. Da biste stvorili padajući izbornik koji se otvori ako kliknete na njega, koristite jаvascript.

Upozorenja

Set HTML boja je prilično ograničen ako koristite njihova imena, na primjer, "crna" (crna) ili "zelena" (zelena). Na ove stranice Postoji generator kodova HTML-boja s kojim možete pronaći šifru bilo koje boje.