Ako vytvoriť rozbaľovaciu ponuku na HTML a CSS -

Z tohto článku sa dozviete, ako vytvoriť rozbaľovaciu ponuku s HTML a CSS. Rozbaľovacia ponuka sa otvorí, keď používateľ prináša ukazovateľ myši - keď je ponuka otvorená, používateľ môže kliknúť na jednu z možností ponuky, ak chcete prejsť na príslušnú stránku.

Kroky

jeden. Otvorte textový editor. Môžete použiť pravidelný textový editor, napríklad Poznámkový blok alebo textedit, alebo funkčný textový editor, napríklad poznámkový blok++.

NotePAD ++ Najprv otvorte ponuku "Jazyk" v hornej časti okna a vyberte "HTML".

2. Zadajte hlavičku dokumentu. Tento kód, ktorý definuje typ kódu používaného v zvyšku dokumentu:

3. Vytvorte rozbaľovaciu ponuku. Ak chcete nastaviť veľkosť a farbu menu, zadajte nasledujúci kód. Namiesto "#" zadajte požadovanú číslicu (čím väčšie číslo, tým väčšia je menu). Aj v riadkoch "Sight-Color" a "Color" môžete nahradiť názov požadovanej farby alebo jeho HTML kód:

.DROPBTN {pozadia-farba: čierna farba: biela-polstrovanie: # px-font-veľkosť: # px-border: none-}

4. Zadajte, že v ponuke budú prítomné možnosti. Keďže možnosti budú pridané neskôr, umiestnite ich do menu zadaním nasledujúceho kódu:

.Rozbaľovač {Poloha: Relatívna-Display: Inline-Block-}

päť. Nastavte výskyt rozbaľovacej ponuky. Nasledujúci kód nastaví veľkosť menu, jeho poloha, keď sú ovplyvnené iné prvky webovej stránky a farbu. V poli "Min-šírka", namiesto "#", nahradiť požadovanú číslicu (napríklad 250) a v riadku "Sight-Color" - názov požadovanej farby alebo jeho HTML kód:

.Rozbaľovací obsah {Displej: None-Poloha: Absolútna pozadia-Farba: LightGrey-Min-Šírka: # PX-Z-Index: 1-}

6. Pridajte informácie o obsahu rozbaľovacej ponuky. Nasledujúci kód Nastavuje farbu textu a veľkosť menu. Namiesto "#" nahradí číslo (v pixeloch) na nastavenie veľkosti tlačidla:

.Rozbaľovací obsah A {Farba: Čierne polstrovanie: #px # PX-Text-Decoration: None-Display: Block-}

7. Zadajte, ako sa farby menu zmenia, keď sa používateľ zobrazí kurzor myši. Prvá línia "Farba na pozadí" označuje farbu, v ktorej je zvolená možnosť natretá a v druhom riadku "na pozadí farbenie", v ktorom je maľované tlačidlo rozbaľovacieho menu. V ideálnom prípade by tieto farby mali byť ľahšie ako farby možností a tlačidiel, keď na nich kurzor nie je ukrytý.

.Rozbaľovací obsah A: Hover {pozadia-farba: biela-}.Odchod: Hover .Rozbaľovací obsah {Display: BLOCK-}.Odchod: Hover .DROPBTN {pozadia-farba: grey-}

osem. Zatvorte sekciu CSS. Zadajte nasledujúci kód:

deväť. Zadajte názov rozbaľovacej ponuky. Zadajte nasledujúci kód, kde "Názov" Nahradiť slovo (napríklad "Menu"), ktorá sa zobrazí v tlačidle menu.

 trieda ="Rozbaľovanie"> Trieda ="Dropbtn"> Meno Class ="Rozbaľovací obsah">

10. Pridať možnosti ponuky. Každá možnosť ponuky by mala byť referencia čokoľvek, napríklad na stránku vašej alebo inej webovej stránky. Ak chcete v ponuke pridať možnosti, zadajte nasledujúci kód, kde https: // Webové stránky.Com Subribovať adresu stránky (citácie nevymažte), a namiesto "Názov" Náhradu názvu.

 href ="https: // Webové stránky.Com"> Názov HREF ="https: // Webové stránky.Com"> Názov HREF ="https: // Webové stránky.Com"> Meno

jedenásť. Vyplňte kód. Zadajte nasledujúce značky na určenie konca rozbaľovacej ponuky:

12. Prejdite kód rozbaľovacej ponuky. Kód by mal vyzerať takto:

 {Pozadia-farba: čierna farba: biela-polstrovanie: 16px-font-veľkosť: 16px-hranica: none-}.Rozbaľovač {Poloha: Relatívna-Display: Inline-Block-}.Rozbaľovací obsah {Displej: None-Poloha: Absolútna pozadia-Farba: LightGrey-Min-Šírka: 200px-Z-index: 1-}.Rozbaľovací obsah A {Farba: Čierna polstrovanie: 12px 16PX-Text-dekorácie: None-Display: Block-}.Rozbaľovací obsah A: Hover {pozadia-farba: biela-}.Odchod: Hover .Rozbaľovací obsah {Display: BLOCK-}.Odchod: Hover .DROPBTN {pozadia-farba: grey-} trieda ="Rozbaľovanie"> Trieda ="Dropbtn"> Trieda sociálnych médií ="Rozbaľovací obsah"> href ="https: // Google.Com"> Google HREF ="https: // Facebook.Com"> Facebook Href ="https: // YouTube.Com"> YouTube

Tipy

Pred odoslaním na svojej webovej stránke vždy skontrolujte kód.
Tu opísané metódy sú navrhnuté tak, aby vytvorili rozbaľovaciu ponuku, ktorá sa otvorí, ak prinesiete kurzor myši. Vytvorenie rozbaľovacej ponuky, ktorá sa otvorí, ak kliknete naň, použite jаvascript.

Upozornenia

Sada HTML-FARBY je pomerne obmedzená, ak používate ich mená, napríklad "čierna" (čierna) alebo "zelená" (zelená). Na tejto stránky Existuje generátor kódov HTML-COLORS, s ktorým môžete nájsť kód akejkoľvek farby.