Számítógépes dokumentáció

Legördülő menü öt percig a CSS alkalmazás példájaként

Ebben az esetben egy olyan legördülő menüt hozunk létre, amely a komplex menük számára ismert. Az összes bonyolultságuk éppen a különböző böngészők kompatibilitásának problémájából állt - a Netscape esetében a forgatókönyv egy régi része az Explorer-re íródott - egy másik. A "normál" böngészőkben található CSS-támogatók számára ugyanaz a hatás érhető el sokkal egyszerűbb módszerekkel.

Mit kell a "legördülő" hatásra? Meg kell változtatnunk néhány blokk tulajdonságait úgy, hogy amikor az egeret az adott blokk bizonyos szakaszán vagy az "ellenőrzési" link fölé helyezzük, ezek az azonos mondatok láthatóvá válnak. Ez némileg leegyszerűsítő, de a lényege, ami történik, teljesen leírja.

Ebben a példában minden "összeáll" a túlcsordulási tulajdonság használatával. Miért ez a tulajdonság? Emlékeztetem önöket, verflow tulajdonság vezérli a készülék viselkedését amikor „teljes” - egy blokk vagy feszített, beleillett egész tartalmát, vagy egy adott méretű „elzárja” az extra tartalom, vagy túlcsordulás egység lehetőséget nyújt arra, hogy lépjünk a tartalmát a görgetősáv jelenik meg. Ez nem minden lehetőség ennek a tulajdonságnak, de ez elég nekünk.

A "rajzolt" elképzelést egyszerre - vagy a blokk összes tartalmát látjuk, vagy csak a felső részét látjuk a témával, minden mást elvágunk. Csak a blokk két állapotát kell pontosan leírnunk, és szükség szerint megváltoztatnunk kell egymást. Azonnal figyelmeztetlek - ez a hatás a klip tulajdonság használatával érhető el, de nem teszi lehetővé, hogy mentse a képkockákat a módosítás során. Ezenkívül az Opera 5 nem támogatja a túlcsordulást. Igen, és klip. általában is.

Vegyünk például két legördülő menüt. Mit kell a termelésre? Meg kell döntenie a helymeghatározásról. Ha a változó blokkjainkat a fő dokumentumáramban hagyjuk, akkor átméretezésük hatással lesz az egész dokumentumra. Az oldal "kolbász" lesz. Ezért a menüblokkok az általános áramlásból származnak, "teljes mértékben" pozícionáljuk.

Első felszerelés:

BODY <
MARGIN: 0px;
PADDING: 0px;
háttérszín: # A8C228;
>

a férfiak elhagyták: 10%;
top: 30px;
háttérszín: # A8C228;
határ: 1px szilárd # 000;
szélesség: 20%;
magasság: 18px;
túlcsordulás: rejtett;
text-align: left;
>

men1 balra: 10%;
top: 30px;
háttérszín: #ffffff;
határ: 1px szilárd # 000;
szélesség: 20%;
magasság: automata;
túlcsordulás: látható;
text-align: left;
>

men2 balra: 31%;
top: 30px;
háttérszín: # A8C228;
határ: 1px szilárd # 000;
szélesség: 20%;
magasság: 18px;
túlcsordulás: rejtett;
text-align: left;
>

men22 maradt: 31%;
top: 30px;
háttérszín: #ffffff;
határ: 1px szilárd # 000;
szélesség: 20%;
magasság: automata;
túlcsordulás: látható;
text-align: left;
>

#cont left: 10%;
top: 50px;
háttérszín: # A8C228;
határ: 1px tömör #fff;
szélesség: 80%;
magasság: 400px;
text-align: left;
>

A.m háttérszín: #fff;
szélesség: 100%;
magasság: automata;
szín: # 000000;
betűtípus-család: Verdana, sans-serif;
FONT-MÉRET: 10px;
text-decoration: none;
text-align: left;
párnázottság: 3px;
>

A.m: lebeg <
kijelző: blokk;
háttérszín: # 005CC0;
szín: #fff;
>

És az oldalon azt írjuk:

>
Kék színek
Kék színek
Kék színek
Kék színek
Kék színek
Kék színek