Behúzható felső panel a tiszta CSS

Behúzható felső panel tiszta CSS

Azt már régóta szeretett volna szítani valami fajta mechanizmus segítségével rejtett négyzeteket ismerős és egyszerű, de valahogy nem érte a kezét. És itt, megbotlott poros raktárakban CodePen egy érdekes fejlesztés. úgy döntött, hogy kísérletezni, és hogy ki a hegyen, ez jelenleg is dolgozik, egy kicsit módosított és alkalmazkodik a mi testvérünk, a saját verzióját a csúszó felső panel tiszta CSS, kiderült, hogy mi történt)).

Példa nézett, mint az eredeti, és most, hogy kinek van szükség, menjünk együtt nézni, hogy az egész dolog működik. Ismét emlékeztetni, nem js, csak tiszta tiszta html és a „mágikus» css, hogy minden a munka.

elrendezés Html

Mint látható, a design a panel jelenlegi doboz type = „checkbox”. Az alapértelmezett a rejtett és inaktív. a címke

és ha aktiválja a fiókos egység tartalma és egy gombot lenyomva egy megfelelő távolságra panel magasságát.

Most nézzük alkotják a stílusok a csúszó panel, hogy kezdődik, a méret az alapja a tartály, meg egy háttérszínt és az eredeti helyére. A CSS-ben hozzon létre egy osztályt .top-panel. ahol és előírhatja a szükséges tulajdonságokat nekünk.
Panel van visszahúzható, ezért meg kell elrejteni, ez történik nagyon egyszerűen. Egy fix elhelyezése a helyzet: fix;. nyúlik a teljes szélességét a lap szélesség: 100%;. magasság (magasság :) panel nem jelzi, ebben az esetben, a panel automatikusan beállítja a méret a tartalom, és a transzformáció: translateY (-100%);. kikötött előmelegítő a panel felső szélén az oldalt.

Blokk üzenetek panel van elhelyezve, amely az alapban tartályt és hozzárendelt egy adott osztály class = „üzenet”. ez benne van, amit a tulajdonságokat az összes elem belsejében helyezkedik el ez a pohár, a szín és a betűtípus család, képek méretét, stb
Akkor természetesen biztonságosan megtenni anélkül, hogy ez további egység, forgalomba üzenetet közvetlenül a tartály feneke, de elvesztette a rugalmasságát lehetséges panel beállításokat.
Üzenet szigorúan a központban, és kiterjed előre meghatározott szélessége max-szélesség: 980 képpont;. egy tetszőleges értéket, akkor választhat egy teljesen más méretekben.


Következő lépésként meghatározza azokat a stílusokat a panel kapcsoló. Először is elrejteni a felhasználók szemében box type = »checkbox«. nem sok filozofálás, html tag előírják, rejtett attribútummal. amely meghatározza, hogy jelenítse meg a tárgyat a böngészőablakban, vagy sem.

@media csak képernyő és (max-szélesség: 400px) > @media csak képernyő és (max-szélesség: 800px) > @media csak képernyő és (min-szélesség: 1100px) >

Mind hálás, ha a támogatás a projekt - hozzátéve egy blogot AdBlock kivételek, és osztoznak a linket egy rekord a társadalmi hálózatok: