panou superior retractabil pe css pur

Panoul de top retractabil pe CSS pur

Am vrut mult timp să stârnească ceva fel de mecanism, folosind casetele de selectare ascunse familiar și simplu, dar cumva nu a ajuns la mâinile lui. Și aici, poticnit în depozite cu mult praf CodePen o dezvoltare interesantă. a decis să experimenteze și să dea afară pe munte, se lucrează în prezent, un pic de modificat și adaptat la fratele nostru, propria sa versiune a unui panou superior de alunecare în CSS pură, sa dovedit ce sa întâmplat)).

Exemplul privit, în comparație cu originalul, iar acum, cui este necesar, să ne împreună uităm la modul în care funcționează totul. Încă o dată am amintesc, nici o js, numai „magie» css html pur și curat, face toate lucrările.

aspect HTML

După cum puteți vedea în proiectarea de tip panou prezent caseta = „caseta“. Implicit este ascunsă și inactivă. cu tag-ul . care este conceput ca un css buton, a stabili o conexiune între caseta, adică dacă faceți clic pe etichetă. intrarea de lucru (devin active). Ei bine, cu ajutorul pseudo-: verificate în css stabili o conexiune între panoul de elemente din casetele de selectare și ascunse.
Vreau doar să rețineți că butonul de deschidere / închidere nu este legată de panoul corpului și este poziționat în raport cu conținutul principal al paginii container

și la activarea unității de conținut sertar și un buton de împins în jos de către o distanță corespunzătoare înălțimii panoului.

Acum, să formeze stilul de panoul nostru de alunecare, pentru a începe cu, setați dimensiunea bazei containerului, defini o culoare de fundal și locația sa inițială. În CSS, creați un .top-panou de clasă. în care și prescrie proprietățile necesare pentru noi.
Panou au retractabil, și de aceea trebuie să-l ascundă, aceasta se face foarte simplu. Setați o poziționare fixă a poziției: fix;. se întind pe întreaga lățime a lățimii paginii: 100%;. înălțime (panou de înălțime :) nu indică, în acest caz, panoul va ajusta automat la dimensiunea conținutului, și cu transformarea: translateY (-100%);. stipulat preincalzit panoul nostru de marginea superioară a paginii.

Blocare mesaje panou este dispus în interiorul containerului de bază și li se atribuie o anumită clasă de clasă = „mesaj“. este în ea, vom specifica proprietatile pentru toate elementele poziționate în interiorul acestui sticlă, culoarea și familia de fonturi, dimensiunea imaginilor, etc.
Desigur, puteți face în condiții de siguranță fără această unitate suplimentară, plasarea unui mesaj direct la baza recipientului, dar a pierdut flexibilitatea setări posibile panoului.
Mesajul este strict în centru și se întinde pe o lățime de max-lățime predeterminată: 980px;. o valoare arbitrară, puteți alege un complet diferite dimensiuni.

În continuare, vom defini toate stilurile necesare pentru comutatorul nostru panou. Pentru a începe cu ascunde utilizatorilor de tip ochi caseta = «caseta». nu de mult filosofarea, în tag-ul html prescrie atributul ascuns. care determină dacă să afișeze obiectul în fereastra de browser-ul sau nu.

@media numai ecran și (max-width: 400px) > Numai @media ecran și (max-width: 800px) > @media numai pe ecran și (min-width: 1100px) >

Va fi recunoscători dacă proiectul de sprijin - adăugarea unui blog pentru excepții AdBlock și partaja un link către o înregistrare în rețelele lor sociale: