Obsah

• Kroky
• Rada
• Výstraha

Táto wikiHow vás naučí, ako vytvoriť rozbaľovacie ponuky na vašom webe pomocou kódu HTML a CSS. Keď návštevník umiestni kurzor myši nad zadané tlačidlo, zobrazí sa rozbaľovacia ponuka; Ďalej môžu kliknúť na jednu z položiek a prejsť na web príslušnej možnosti.

Kroky

1. 

   Otvorte textový editor HTML. Môžete použiť jednoduchý textový editor (Poznámkový blok, TextEdit) alebo pokročilejší (Poznámkový blok ++).
   • Ak sa rozhodnete prejsť na Notepad ++, musíte si vybrať HTML z ponuky „H“ Jazyk (Jazyk) v hornej časti okna a potom pokračujte.

2. 

   
   
   Zadajte názov dokumentu. Tu je kód, ktorý určuje typ kódu, ktorý sa má použiť pre zvyšok dokumentu:

3. 

   Vytvorte rozbaľovaciu ponuku. Zadajte nasledujúci kód, aby ste určili veľkosť a farbu rozbaľovacej ponuky. Nezabudnite nahradiť znak „#“ parametrom, ktorý chcete použiť (čím väčšie číslo, tým väčšia bude rozbaľovacia ponuka). Môžeme tiež nahradiť farbu pozadia „background-color“ a „color“ farby akoukoľvek farbou (alebo farebným kódom HTML), ktorú chcete:

4. 

   
   
   V rozbaľovacej ponuke zadajte, ktoré chcete nahradiť odkazy. Pretože potom do ponuky pridáte odkazy, môžete ich v rozbaľovacej ponuke nahradiť zadaním nasledujúceho kódu:

5. 

   Vytvorí vzhľad rozbaľovacej ponuky. Nasledujúci kód určuje veľkosť a farbu rozbaľovacej ponuky vrátane polohy v kombinácii s inými prvkami na webovej stránke. Nezabudnite nahradiť „#“ v sekcii „min-width“ požadovaným číslom (napr. 250) a zmeniť záhlavie „background-color“ (farba pozadia) na konkrétnu farbu alebo HTML kód:

6. 

   
   
   Pridajte podrobnosti k obsahu rozbaľovacej ponuky. Nasledujúci kód určí farbu textu vo vnútri a veľkosť tlačidla rozbaľovacej ponuky. Nezabudnite nahradiť „#“ počtom pixelov, ktoré určujú veľkosť tlačidla ponuky:

7. 

   Úpravy zmeny ukazovateľa myši pri umiestnení kurzora myši v rozbaľovacej ponuke. Keď umiestnite kurzor myši na tlačidlo ponuky, je potrebné zmeniť niektoré farby. Riadok „farba pozadia“ bude odrážať farbu zmenenú, keď vyberiete niečo v rozbaľovacej ponuke, zatiaľ čo druhá farba „pozadia“ bude farbou, na ktorú sa zmení tlačidlo ponuky. V ideálnom prípade by obe tieto farby mali byť svetlejšie, ako keď neboli vybrané:

8. 

   Zatvorte sekciu CSS. Zadajte nasledujúci kód a uveďte, že ste skončili s časťou dokumentu CSS:

9. 

   Vytvorte názov pre tlačidlo ponuky. Zadajte nasledujúci kód, nezabudnite však nahradiť názov „Name“ názvom rozbaľovacej ponuky (príklad: Ponuka):

10. 

    Pridajte odkazy do ponuky. Každá položka v rozbaľovacej ponuke bude na niečo odkazovať, bude to stránka na aktuálnom webe alebo externý web. Svoj výber pridajte do rozbaľovacej ponuky zadaním nasledujúceho kódu, ktorý musíte nahradiť https://www.website.com s adresou odkazu (v zátvorke) a nahradiť „Názov“ názvom odkazu.

11. 

    Zavrieť dokument. Zadaním nasledujúcich značiek zatvorte dokument a zadajte koniec kódu v rozbaľovacej ponuke:

12. 

    Kód kontroly určuje rozbaľovaciu ponuku. Úryvok bude vyzerať asi takto: Reklamy

Rada

• Pred zverejnením na webe si vždy kód prečítajte.
• Vyššie uvedené pokyny sú určené pre rozbaľovacie ponuky, ktoré budú fungovať, keď umiestnite kurzor myši na tlačidlo ponuky. Ak chcete vytvoriť rozbaľovaciu ponuku, ktorá klikne iba po kliknutí, musíte použiť JavaScript.

Výstraha

• Farebnosť HTML je dosť obmedzená, keď používame značky ako „čierna“ alebo „zelená“. Môžete si tu pozrieť generátor farebných kódov HTML, ktorý používateľom umožňuje vytvárať a používať vlastné farby.