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

Išskleidžiamieji meniu, dar vadinami „suckerfish“ meniu, sukuriami naudojant HTML ir CSS. HTML dalis – tai nesutvarkyti sąrašai (<ul>) ir jų vidiniai sąrašai. Po to, kai meniu juostą ir pagrindines nuorodas stilizuojate CSS, vidinius sąrašus formuojate kaip submeniu. CSS pseudo‑klasė :hover leidžia paslėptam submeniu pakeisti display į block ir jį parodyti.

1 žingsnis – HTML struktūra

Kodo meniu struktūrą sukurkite naudodami <ul> ir <li> žymas:

<ul id="menu">
  <li>Nuoroda 1</li>
  <li>Nuoroda 2</li>
  <li>Nuoroda 3</li>
</ul>

Prieš uždarant sąrašą įterpkite clearfix klasės <div>, kad meniu fonas išsiplėtų žemyn.

2 žingsnis – Submeniu

Submeniu pridėkite kaip vidinį <ul> elementą, įdėgtą į tėvo <li>:

<ul id="menu">
  <li>Nuoroda 1</li>
  <li>Nuoroda 2
    <ul>
      <li>Subnuoroda 1</li>
      <li>Subnuoroda 2</li>
      <li>Subnuoroda 3</li>
    </ul>
  </li>
  <li>Nuoroda 3</li>
</ul>

3 žingsnis – Bendras meniu stilius

Stiliaus faile pašalinkite taškus ir įtrauką:

#menu { list-style: none; padding: 0; }

4 žingsnis – Meniu juostos fonas

Pridėkite foninę spalvą:

#menu { background-color: #001f3f; }

5 žingsnis – Horizontalus išdėstymas

Elementus išdėstykite eilutėje:

#menu li { float: left; }

6 žingsnis – Nuorodų stilius

Nuorodoms suteikite blokinį rodymą ir patogų atstumą:

#menu li a {
  display: block;
  padding: 8px 15px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

7 žingsnis – Submeniu pozicionavimas

Padarykite submeniu absoliučiai pozicionuotą ir pašalinkite taškus bei įtrauką:

#menu ul {
  position: absolute;
  list-style: none;
  padding: 0;
}

8 žingsnis – Submeniu elementų valymas

Submeniu elementų kairę plūduriavimą pašalinkite:

#menu ul li { clear: left; }

9 žingsnis – Paslėpti ir rodyti submeniu

Pagal nutylėjimą submeniu paslėpkite, o kai vartotojas užvedžia pelę – parodykite:

#menu ul { display: none; }
#menu li:hover ul { display: block; }

Taip pat pridėkite .clearfix klasės taisyklę:

.clearfix { clear: both; }

Patarimai

• Įtraukite spalvų paryškinimą, kai vartotojas užveda pelę ant nuorodos: #menu a:hover { background-color: #0056b3; }
• Baigę kurti meniu su HTML ir CSS, galite pridėti jQuery įskiepį, kad gautumėte sklandžius išskleidimo animacijos efektus.

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