whycomputer.com >> Interneto žinios >  >> Programinė įranga

Kaip sukurti išskleidžiamąjį HTML meniu ir submeniu

Išskleidžiamieji meniu - taip pat žinomi kaip „suckerfish“ meniu - naudokite HTML ir CSS (kaskados stiliaus lapų) derinį struktūrai ir stiliui. Išskleidžiamojo meniu HTML dalis susideda iš įrašų sąrašų ir įterptų bulletų sąrašų. Sukūrę meniu juostą ir pagrindines CSS navigacijos nuorodas, įdėkite įdėtus sąrašo sąrašus kaip submeniu. CSS „: hover“ selektorius leidžia keisti paslėptą submeniu rodomą turinį į „blokuoti“, kad jis būtų dar kartą rodomas.

1 žingsnis
Koduoti savo meniu HTML naudojant „
"ir"

  • "žymės:
  • Nuoroda 1
  • Nuoroda 2
  • Nuoroda 3

    Įrašykite aiškų dalinimą prieš sąrašo pabaigą. Į „clearfix“ klasę pridėsite stilių, kad ištęstumėte meniu foną.

    2 žingsnis
    Pridėkite savo submeniu kaip naują nereguliuojamą sąrašą, kuris yra įtrauktas į jos pagrindinės nuorodos „

  • “ žymas:
  • Nuoroda 1
  • Nuoroda 2
  • Nuoroda 1
  • Nuoroda 2
  • Nuoroda 3

  • Nuoroda 3


    3 žingsnis
    Atidarykite savo stiliaus lapą ir stiliaus meniu naudokite CSS. Pašalinkite tiek kulką, tiek kairiąją įtrauką: #menu {list-style: none; įdėklas: 0; } Atkreipkite dėmesį, kad „#menu“ atitinka HTML kodo pavyzdžio pavadinimą.

    4 žingsnis
    Pridėti meniu spalvų foną: #menu {list-style: none; įdėklas: 0; fono spalva: tamsiai mėlyna; }

    5 žingsnis
    Plūdinkite meniu elementus į kairę, kad jie būtų horizontaliai meniu juostoje: #menu li {float: left; }

    6 žingsnis
    Stiliuokite nuorodas, sudarančias meniu punktus. Įtraukite nuorodas į nuorodas, kad jas būtų galima vertikaliai suskirstyti į meniu juostą, tuo pačiu palengvindami juos spustelėti ir paslinkti virš. Turite pakeisti „rodymo“ ypatybę į „blokuoti“, kad pridėtumėte užpildą nuorodoms: #menu li a {display: block; pagalvėlė: 8px 15px; teksto derinimas: centras; spalva: balta; šrifto svoris: paryškintas; teksto apdaila: nėra; } Atkreipkite dėmesį, kad „padding“ yra nustatytos dvi reikšmės. Pirmoji vertė yra vertikali pakaba, o antroji - horizontalus įdėklas.

    7 žingsnis
    Stiliuokite submeniu ir jo elementus. Pirmiausia turite nustatyti submeniu. Iš submeniu taip pat išimkite kulkų ir užpildų: #menu ul {pozicija: absoliutus; sąrašo stilius: nėra; įdėklas: 0; }

    8 žingsnis
    Pašalinkite kairiuosius plūdes iš elementų, esančių submeniu: #menu ul li {clear: left; }

    9 žingsnis
    Įtraukti "dsiplay: none" į "#menu ul" taisyklę, kad išjungtumėte submeniu, nes nenorite, kad jis būtų rodomas, nebent vartotojas perkelia ant savo pagrindinio elemento. Padarykite meniu dar kartą, naudodami šį kodą: #menu li: hover ul {dipslay: block; }
    Įtraukite „aiškios pataisos“ taisyklę į savo div: .clearfix {clear: niin; }

    Patarimai
    Pridėkite paryškinimą savo meniu elementams, kai vartotojas perima juos. Stiliaus taisyklė, skirta keisti viršutinės nuorodos fono spalvą, atrodo kaip „#menu a: hover {}“.
    Kai baigsite kurti meniu, naudodami HTML ir CSS, galite pridėti jQuery įskiepį, kad būtų galima sukurti puikias animacijas, skirtas išskleidžiamiesiems meniu.


    URL:https://lt.whycomputer.com/software/100407813.html

  • Programinė įranga
    • Kaip sukurti ir redaguoti lenteles „Microsoft Word

      “ „Microsoft Word“ leidžia lengvai tvarkyti informaciją stulpeliuose ir eilutėse naudojant lentelę. Lentelės leidžia lengviau skaityti duomenis. Taip pat galite sukurti simetriją dokumente, sukurdami lentelę, kurioje rodomas tekstas tam tikroje puslapio dalyje. Sukūrę lentelę, redaguokite jį pakei

    • Kaip sukurti meniu „Microsoft Publisher

      “ „Microsoft Publisher“ yra „Office“ programa, kuri, atrodo, nėra tokia populiari, kaip jos brolio žodis. Tačiau leidėjas gali padėti jums sukurti leidinius, kuriuos galėtumėte didžiuotis. Jei leidėjas jaučiasi bauginamas, pabandykite šį projektą. Galite sukurti kitą vakarienės vakarienę, kad jūsų

    Interneto žinios © https://lt.whycomputer.com