Létrehozása legördülő listák

Mit jelent pontosan ez a script? Először is, kapcsolók .active osztály tételre kattintva. Ez azt jelenti, ha a héj nem ebben az osztályban, hozzáteszi azt, és aztán, ha aktív egy másik én - illetve eltávolítja. A második az, hogy lehetővé teszi, hogy bezárja a listát, ha megnyomja a képernyőn bárhova.

Most már tudjuk, hogyan működik, és itt az ideje, hogy egyfajta legördülő listából!

Kezdjük valami egyszerű.

Mi kell egy pár dolgot: wrapper class (rejtett) legördülő listában, és a nevét annak a helynek a címke span. Azt is használni fogja a horgonyt.

Vessünk egy pillantást a stílus, amit majd a figyelmünket. Kezdjük az átalakító:

Először is, mi meg a szélességét a legördülő menüből, és néhány Tömítés és margó. Ezután megkérdeztük néhány stílust. Végül, mi meg néhány paraméter a betűtípust. Akkor kérje a nevét a stílusok.

Úgy gondolom, hogy mindenki tudja, hogyan kell használni css hogy hozzon létre egy kis háromszög. Mi lesz a gombot, de nem egy nyíl legördülő listából, akkor nem játszik szerepet. D avayte foglalkozik a lista!

wrapper-legördülő -1 .dropdown

Amit az imént tett? Kértünk egy listát az abszolút pozíció, és tedd mögé gombot (felső: 100%). Megkérdeztük azonos szélességű a gombot az értékek a bal és a jobb neki - tovább. És ez még egy nagyon fontos - és elrejtette csökkentésével a homály 0. Az ingatlan pointer-events: nincs, de ez nem jelenti azt, hogy nem.

Íme néhány stílusok elemek listáját:

Szóval, van egy gomb, és a rejtett elemeket a legördülő menüből. Most nézzük, hogy nyissa meg a menüt, hogy a csepp, ha megnyomja a gombot.

Íme három dolog történik:

  • Kezdjük azzal, hogy megmutatjuk a legördülő listából, amelyben a homály, hogy 1. Ügyeljen arra, hogy a mutató-esemény auto.
  • Aztán a változás irányát és színét a kis nyilat.
  • Ezután módosítsa a háttérben, használjon gradiens.

Kapcsolódó cikkek