Cum se creează un meniu drop-down pe HTML și CSS

Din acest articol veți învăța cum să creați un meniu drop-down cu HTML și CSS. Meniul derulant se deschide când utilizatorul aduce indicatorul mouse-ului la acesta - când meniul este deschis, utilizatorul poate face clic pe una din opțiunile de meniu pentru a accesa pagina corespunzătoare.

Pași

unu. Editor de text deschis. Puteți utiliza un editor de text obișnuit, cum ar fi Notepad sau Textedit sau un editor de text mai funcțional, cum ar fi Notepad++.

Notepad ++ Deschideți mai întâi meniul "Limba" din partea de sus a ferestrei și selectați "HTML".

2. Introduceți antetul documentului. Acest cod care definește tipul de cod utilizat în restul documentului:

3. Creați un meniu derulant. Introduceți următorul cod pentru a seta dimensiunea și culoarea meniului. În loc de "#", introduceți cifra dorită (cu cât este mai mare numărul, cu atât este mai mare meniul). De asemenea, în rândurile "fundal-color" și "culoare", puteți înlocui numele culorii dorite sau codul HTML:

.Dropbtn {fundal-culoare: culoare neagră: alb-padding: # px-font-dimensiune: # px-frontieră: nimic-}

4. Specificați că opțiunile vor fi prezente în meniu. Deoarece opțiunile vor fi adăugate mai târziu, plasați-le în meniu introducând următorul cod:

.Dropdown {Poziție: Afișaj relativ: Inline-Block-}

cinci. Configurați aspectul meniului derulant. Următorul cod va seta dimensiunea meniului, poziția sa atunci când alte elemente de pagină web sunt afectate și culoarea. În linia "min-lățime", în loc de "#", înlocuiți cifra dorită (de exemplu, 250) și în linia "Culoare fundal" - numele culorii dorite sau codul HTML:

.Dropdown-conținut {Afișaj: None-Pozition: Absolut-fundal-culoare: Lightgrey-min-lățime: # PX-Z-index: 1-}

6. Adăugați informații despre conținutul meniului derulant. Următorul cod stabilește culoarea textului și dimensiunea butonului meniu. În loc de "#" înlocuiți numărul (în pixeli) pentru a seta dimensiunea butonului:

.Dropdown-conținut A {Culoare: Black-Hadding: #px # Px-decorare text: None-Display: Block-}

7. Specificați modul în care culorile meniului se vor schimba când utilizatorul va afișa cursorul mouse-ului. Prima linie "Culoare de fundal" indică culoarea în care este vopsită opțiunea selectată și în cea de-a doua linie "fundal-color" în care butonul de meniu drop-down este vopsit. În mod ideal, aceste culori ar trebui să fie mai ușoare decât culorile opțiunilor și butoanele când cursorul nu este ascuns pe ele.

.Dropdown-conținut A: Hover {fundal-culoare: alb-}.Dropdown: Hover .Dropdown-conținut {afișare: bloc-}.Dropdown: Hover .Dropbtn {fundal-culoare: grey-}

opt. Închideți secțiunea CSS. Pentru a face acest lucru, introduceți următorul cod:

nouă. Specificați numele meniului derulant. Introduceți următorul cod în care "numele" înlocuiți cuvântul (de exemplu, "Meniu"), care va fi afișat pe butonul MENU.

 clasa ="Scapă jos"> Clasa ="Dropbtn"> Clasa de nume ="Dropdown-conținut">

10. Adăugați opțiuni de meniu. Fiecare opțiune de meniu ar trebui să se refere la ceva, de exemplu, pe pagina site-ului dvs. sau al unui alt site web. Pentru a adăuga opțiuni din meniu, introduceți următorul cod în care https: // Site-ul web.Com Submire adresa paginii (citatele nu șterge) și în loc de "Nume" înlocuiți opțiunea de nume.

 href ="https: // Site-ul web.Com"> Nume href ="https: // Site-ul web.Com"> Nume href ="https: // Site-ul web.Com"> Nume

unsprezece. Finalizați codul. Introduceți următoarele etichete pentru a specifica sfârșitul meniului derulant:

12. Răsfoiți codul meniului derulant. Codul ar trebui să arate astfel:

 {Fundal-culoare: culoare neagră: alb-umplutură: 16px-dimensiune: 16px-frontieră: nici unul-}.Dropdown {Poziție: Afișaj relativ: Inline-Block-}.Dropdown-conținut {Afișaj: None-Pozition: Absolut-fundal-culoare: Lightgrey-min-lățime: 200px-z-index: 1-}.Dropdown-conținut A {Culoare: Black-Hadding: 12px 16px-decorare text: None-Display: Block-}.Dropdown-conținut A: Hover {fundal-culoare: alb-}.Dropdown: Hover .Dropdown-conținut {afișare: bloc-}.Dropdown: Hover .Dropbtn {fundal-culoare: grey-} clasa ="Scapă jos"> Clasa ="Dropbtn"> Social Media Clasa ="Dropdown-conținut"> href ="https: // Google.Com"> Google Href ="https: // Facebook.Com"> Facebook href ="https: // YouTube.Com"> YouTube

sfaturi

Verificați întotdeauna codul înainte de ao posta pe site-ul dvs. web.
Metodele descrise aici sunt concepute pentru a crea un meniu drop-down care se deschide dacă aduceți cursorul mouse-ului. Pentru a crea un meniu drop-down care se deschide dacă faceți clic pe acesta, utilizați jаvascript.

Avertizări

Setul de culori HTML este destul de limitat dacă utilizați numele lor, de exemplu, "negru" (negru) sau "verde" (verde). Pe din această pagină Există un generator de coduri HTML-Culori cu care puteți găsi codul de orice culoare.