Hogyan lehet létrehozni egy legördülő menü HTML és CSS -

Ebből a cikkből megtudhatja, hogyan kell létrehozni egy legördülő menüt a HTML és a CSS-vel. A legördülő menü nyílik meg, ha a felhasználó hozza az egérmutatót, hogy - amikor a menü meg van nyitva, a felhasználó rákattinthat a menü egyik lehetőség, hogy menjen a megfelelő oldalra.

Lépések

egy. Nyílt szövegszerkesztő. Használhat rendszeres szövegszerkesztőt, például jegyzettömböt vagy szöveges, vagy egy funkcionális szövegszerkesztőt, például a jegyzettömböt++.

Jegyzettömb ++ Először nyissa meg a "Nyelv" menüt az ablak tetején, és válassza a "HTML" lehetőséget.

2. Adja meg a dokumentum fejlécét. Ez a kód, amely meghatározza a dokumentum többi részében használt kód típusát:

3. Hozzon létre egy legördülő menüt. Adja meg a következő kódot a menü méretének és színének beállításához. A "#" helyett adja meg a kívánt számjegyet (minél nagyobb a szám, annál nagyobb a menü). A "háttérszín" és a "színes" sorokban is helyettesítheti a kívánt szín vagy annak HTML-kódjának nevét:

.Dropbttn {háttérszín: fekete-szín: fehér padding: # PX-betűméret: # PX-Border: none-}

4. Adja meg, hogy a beállítások jelen vannak a menüben. Mivel a lehetőségek később kerülnek hozzáadásra, helyezze őket a menübe a következő kód megadásával:

.Legördülő {pozíció: relatív megjelenítés: inline-block-}

öt. Állítsa be a legördülő menü megjelenését. A következő kód beállítja a menü méretét, annak pozícióját, ha más weboldalelemek érintettek, és a szín. A "MIN-WIDTH" sorban a "#" helyett "#" helyett helyettesíti a kívánt számot (például 250), a "háttérszín" vonalban - a kívánt szín vagy a HTML kód neve:

.Dropdown-tartalom {Display: Nincs pozíció: abszolút-háttér-szín: Lightgrey-Min-width: # PX-Z-index: 1-}

6. Adjon hozzá információt a legördülő menü tartalmáról. A következő kód beállítja a szöveg színét és a menügomb méretét. Helyett a "#" helyettesítse a számot (pixelben) a gomb méretének beállításához:

.Cseppdék-tartalom A {szín: fekete-padding: #px # px-text-dekoráció: nincs megjelenítés: blokk-}

7. Adja meg, hogy a menü színek megváltoznak, ha a felhasználó megjeleníti az egérmutatót. Az első sor "A háttérszín" jelzi azt a színt, amelyben a kiválasztott opció festett, és a második sor "Háttérszín" színben, amelyben a legördülő menügomb festett. Ideális esetben ezek a színek könnyebbnek kell lenniük, mint a lehetőségek színei és a gombok, amikor a kurzor nem rejtve van rájuk.

.Cseppdék-tartalom A: Hover {Background-Color: White-}.Cseppolás: Hover .Cseppdék-tartalom {Display: Block-}.Cseppolás: Hover .Dropbttn {Background-Color: Grey-}

nyolc. Close CSS rész. Ehhez adja meg a következő kódot:

kilenc. Adja meg a legördülő menü nevét. Adja meg a következő kódot, ahol a "NAME" cserélje ki a szót (például a "Menü"), amely megjelenik a Menü gombon.

 osztály ="Ledob"> Osztály ="Dropbttn"> Név osztály ="Csökkenő-tartalom">

10. Menübeállítások hozzáadása. Mindegyik menüpontnak bármit is hivatkoznia kell, például az Ön vagy más weboldal oldalára. A menüben található opciók hozzáadásához adja meg a következő kódot, ahol https: // Weboldal.Com Az oldal címét (Idézetek ne törölje), és a "Név" helyett helyettesítse a nevet.

 href ="https: // Weboldal.Com"> NAME HREF ="https: // Weboldal.Com"> NAME HREF ="https: // Weboldal.Com"> Név

tizenegy. Töltse ki a kódot. Adja meg a következő címkéket a legördülő menü végének megadásához:

12. Keresse meg a legördülő menü kódját. A kódnak így kell kinéznie:

 {Background-Color: Fekete-szín: fehér-padding: 16px-betűméret: 16px-Border: Nincs-}.Legördülő {pozíció: relatív megjelenítés: inline-block-}.Dropdown-tartalom {display: none-pozíció: Abszolút-background-Színe: szürke-min-szélesség: 200px-z-index: 1-}.Cseppdék-tartalom A {Color: Black-Padding: 12px 16px-Text Dekoráció: Nincs megjelenítés: Block-}.Cseppdék-tartalom A: Hover {Background-Color: White-}.Cseppolás: Hover .Cseppdék-tartalom {Display: Block-}.Cseppolás: Hover .Dropbttn {Background-Color: Grey-} osztály ="Ledob"> Osztály ="Dropbttn"> Social Media Class ="Csökkenő-tartalom"> href ="https: // Google.Com"> Google href ="https: // Facebook.Com"> Facebook href ="https: // Youtube.Com"> YouTube

Tippek

Mindig ellenőrizze a kódot, mielőtt elküldte azt a webhelyén.
Az itt leírt módszereket úgy tervezték, hogy hozzon létre egy legördülő menüt, amely megnyílik, ha az egérmutatót hozza. Ha megnyílik egy legördülő menü létrehozása, ha rákattint, használja a jаvascriptet.

Figyelmeztetések

A HTML-színek készlete meglehetősen korlátozott, ha nevüket használja, például "fekete" (fekete) vagy "zöld" (zöld). A Ez az oldal Van egy HTML-színek kódok generátor, amellyel megtalálhatja a szín kódját.