Kaip sukurti išskleidžiamuosius meniu HTML ir CSS kalba

Autorius: Lewis Jackson
Kūrybos Data: 13 Gegužė 2021
Atnaujinimo Data: 1 Liepos Mėn 2024
Anonim
How To Create Advanced CSS Dropdown Menus
Video.: How To Create Advanced CSS Dropdown Menus

Turinys

Šis „wikiHow“ moko, kaip sukurti išskleidžiamuosius meniu savo svetainėje naudojant HTML ir CSS kodą. Kai lankytojas užveda pelės žymeklį virš nurodyto mygtuko, atsiras išskleidžiamasis meniu; Tada jie gali spustelėti vieną iš elementų, kad patektų į šios parinkties svetainę.

Žingsniai

  1. Atidarykite HTML teksto rengyklę. Galite naudoti paprastą teksto rengyklę („Notepad“, „TextEdit“) arba pažangesnę („Notepad ++“).
    • Jei nuspręsite eiti į „Notepad ++“, turite pasirinkti HTML iš meniu H dalies Kalba (Kalba) lango viršuje prieš tęsdami.

  2. Įveskite dokumento pavadinimą. Štai kodas, kuris nustato likusio dokumento tipo kodą:
  3. Sukurti išskleidžiamąjį meniu. Įveskite šį kodą, norėdami nurodyti išskleidžiamojo meniu dydį ir spalvą, nepamirškite pakeisti „#“ parametru, kurį norite naudoti (kuo didesnis skaičius, tuo didesnis bus išskleidžiamasis meniu). Mes taip pat galime pakeisti fono spalvą „fono spalva“ ir spalvą „spalva“ norima spalva (arba HTML spalvos kodu):

  4. Išskleidžiamajame meniu nurodykite, kad norite pakeisti nuorodas. Kadangi tada pridėsite nuorodas į meniu, jas galite pakeisti išskleidžiamajame meniu, įvesdami šį kodą:
  5. Sukuria išskleidžiamojo meniu išvaizdą. Šis kodas nustato išskleidžiamojo meniu dydį ir spalvą, įskaitant vietą kartu su kitais tinklalapio elementais. Nepamirškite pakeisti „#“ skiltyje „min-width“ norimu skaičiumi (pvz., 250) ir pakeisti antraštę „background-color“ (fono spalva) į konkrečią spalvą ar HTML kodą:

  6. Pridėkite išsamią informaciją į išskleidžiamojo meniu turinį. Šis kodas nurodys teksto spalvą viduje ir išskleidžiamojo meniu mygtuko dydį. Nepamirškite pakeisti „#“ taškų skaičiumi, kuris apibrėžia meniu mygtuko dydį:
  7. Redaguoja, kaip keičiasi pelės žymeklis, kai ji užvedama išskleidžiamajame meniu. Užvedus pelės žymeklį virš meniu mygtuko, reikia pakeisti kai kurias spalvas. Linija „fono spalva“ atspindės spalvą, pasikeitusią, kai išskleidžiamajame meniu pasirinksite ką nors, o antroji „fono spalva“ yra spalva, į kurią bus pakeistas meniu mygtukas. Idealiu atveju abi šios spalvos turėtų būti šviesesnės nei tada, kai jų nebuvo pasirinkta:
  8. Uždarykite CSS skyrių. Įveskite šį kodą, kad nurodytumėte, jog baigėte dokumento CSS dalį:
  9. Sukurkite meniu mygtuko pavadinimą. Įveskite šį kodą, tačiau nepamirškite pakeisti „Vardas“ išskleidžiamojo meniu mygtuko pavadinimu (pavyzdys: Meniu):
  10. Pridėti nuorodas į meniu. Kiekvienas išskleidžiamojo meniu punktas bus susijęs su kažkuo, ar tai būtų dabartinės svetainės, ar išorinės svetainės puslapis. Pridėkite pasirinkimą prie išskleidžiamojo meniu įvesdami šį kodą, kurį turite pakeisti https://www.website.com nuorodos adresu (laikykite skliaustus) ir pakeiskite „Name“ nuorodos pavadinimu.
  11. Uždaryti dokumentą. Įveskite šias žymes, kad uždarytumėte dokumentą, ir nurodykite išskleidžiamojo meniu kodo pabaigą:
  12. Peržiūros kodas nurodo išskleidžiamąjį meniu. Fragmentas atrodys maždaug taip: Skelbimai

Patarimas

  • Prieš paskelbdami svetainėje, visada peržiūrėkite kodą.
  • Aukščiau pateiktos instrukcijos skirtos išskleidžiamiesiems meniu, kurie veiks, kai pelės žymeklį užvesite virš meniu mygtuko. Jei norite sukurti išskleidžiamąjį meniu, kuris spusteli tik jums spustelėjus, jums reikia „JavaScript“.

Įspėjimas

  • HTML spalva yra gana ribota, kai naudojame tokias žymes kaip „juoda“ arba „žalia“. Galite patikrinti HTML spalvų kodų generatorių, kuris leidžia vartotojams kurti ir naudoti pasirinktines spalvas.