Kuidas Teha Rippmenüüd

Sisukord:

Kuidas Teha Rippmenüüd
Kuidas Teha Rippmenüüd

Video: Kuidas Teha Rippmenüüd

Video: Kuidas Teha Rippmenüüd
Video: Kuidas teha rippmenüüd 2024, November
Anonim

Saidi lehtede rippmenüüid kasutatakse ruumi kokkuhoiuks ja veebiressursi struktuuri loogilise esitamise pakkumiseks. Selle elemendi rakendamiseks on palju võimalusi, üks lihtsamaid on toodud allpool.

Kuidas teha rippmenüüd
Kuidas teha rippmenüüd

See on vajalik

Põhiteadmised HTML- ja CSS-keeltest

Juhised

Samm 1

Menüü HTML-kood kasutab pesastatud loendi elemente (UL ja LI), mille sisse on paigutatud linke lehtedele. See ei sisalda keerukaid struktuure. Dünaamikat rakendatakse CSS-i abil, mille kirjeldusplokk asetatakse otse lehe lähtekoodi. Ka selles pole midagi erilist, pealegi sisaldab tekst mõningaid selgitusi teatud stiiliplokkide otstarbe kohta.

2. samm

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // ET"

"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Rippmenüü * {

font-perekond: Verdana;

fondi suurus: 14px;

} ul, li, a {

polster: 0;

kuva: plokk;

piir: 0;

varu: 0;

} ul {

ääris: 1px tahke #AAA;

laius: 150px;

list-style: puudub;

taust: #FFF;

} li {

taustavärv: #AAA;

positsioon: sugulane;

z-indeks: 9;

polster: 1px;

}

li.folder {taustavärv: #AAA;}

li.folder ul {

positsioon: absoluutne;

ülemine: 5px;

vasakul: 111 pikslit; / * IE brauserite jaoks * /

}

li.folder> ul {left: 140px;} / * teistele brauseritele * / a {

polster: 2px;

ääris: 1px kindel #FFF;

teksti kaunistamine: puudub;

laius: 100%; / * IE brauserite jaoks * /

värv: # 000;

fondi kaal: paks;

}

li> a {width: auto;} / * muudele brauseritele * / li a {

laius: 140px;

kuva: plokk;

} li a.submenu {

taustavärv: kollane;

} / * Lingid * /

a: hõljutage {

äärisvärv: hall;

taustavärv: # FF0000;

värv: must;

}

li.folder a: hõljutage {

taustavärv: # FF0000;

} / * Kaustad * /

ul ul, li: hõljutage ul ul {display: none;}

li.folder: hõljutage kursorit {z-index: 10;}

li: hõljutage ul, li: hõljutage li: hõljutage ul {kuva: blokeerige;}

  • 1. Leht
  • 2. Kaust

    • 2.1 leht
    • 2.2 Kaust

      • 2.2.1 Lehekülg
      • 2.2.2 Lehekülg
      • 2.2.3 Lk
    • 2.3 leht
  • 3. Kaust

    • 3.1 Lehekülg
    • 3.2 Lehekülg
    • 3.3 Lk
  • 4. leht

3. samm

Sellele koodile saate lisada tuge Internet Exploreri brauserite vanematele versioonidele - see on rakendatud JavaScripti abil (autor Peter Nederlof). Peate vajaliku koodiga faili alla laadima näiteks sellelt lingilt - https://peterned.home.xs4all.nl/htc/csshover3.htc. See tuleb paigutada samasse kausta nagu põhileht. Ja lisage põhilehe stiilide kirjeldusse sellele link - selle saab paigutada kohe pärast avanevat stiilimärgendit: / * vanade IE brauserite jaoks *

body {käitumine: url ("csshover3.htc");}

Soovitan: