Гюрука панел на чист CSS

Аз отдавна исках да повдигне нещо вид механизъм с помощта на скрити отметки запознат и ясно, но някак си не се стигна до ръцете му. И тук, се препъна в прашни килери CodePen едно интересно развитие. решили да експериментират и да дават на планината, той в момента работи, малко модифициран и адаптиран към нашия брат собствената си версия на плъзгащи се горен панел в чист CSS, се оказа, какво се е случило)).

Пример погледна, в сравнение с оригинала, и сега, на когото е необходимо, нека заедно разгледаме как работи всичко. Отново напомням, без JS, само девствен чист HTML и "магия» CSS, свърши цялата работа.

оформление Html

Както можете да видите в дизайна на тип панел присъства кутия = "отметката". По подразбиране е скрита и неактивни. С етикет . който е проектиран като бутон за CSS, се установи връзка между квадратчето, т.е. ако щракнете върху етикета. на входа на работа (да стане активна). Е, с помощта на псевдо-: проверени в CSS се установи връзка между скритата и отметката елементи панел.
Само искам да отбележа, че за отваряне / затваряне бутон не е обвързано с панел на тялото и се позиционира по отношение на основното съдържание на контейнера страница

и при активиране на съдържанието на единица чекмедже и бутон натиснат надолу с разстояние, равно на височината на панела.

Сега, нека се образува стила на нашия плъзгащи панел, за да започнем с това, задаване на размера на дъното на съда, да определя цвета на фона и първоначалното си местоположение. В CSS, създаде клас .top панел. в която и да предпише необходимите качества за нас.
Панел има прибираща се, и затова ние трябва да го крие, това е направено много просто. Задайте фиксирана позициониране на позицията: фиксирани. простират по цялата широчина на ширината на страница: 100%;. височина (панел височина :) не посочват, в този случай, панелът ще се коригират автоматично, с размера на съдържанието, както и с трансформиране: translateY (-100%). предвидено подгряване нашия панел за горния край на страницата.

Блокиране на съобщения панел е разположен в рамките на базовата контейнера и целеви = "съобщение" определен клас клас. тя е в това, ние укажете свойствата на всички елементи, разположени вътре в тази чаша, цвета и шрифта семейството, размера на изображенията, и т.н.
Можете разбира се, спокойно може да разчита на тази допълнителна единица, поставяне на съобщение директно към основата на контейнера, но губи гъвкавостта на възможни настройки на панела.
Съобщението е строго в центъра и се простира на предварително определена ширина макс ширина: 980px. произволна стойност, можете да изберете един напълно различен размер.

На следващо място, ние определяме всички необходими стилове за нашия ключ панел. Да започнем с това потребителите скриване "тип очи кутия =" отметката ". не много философстване, в HTML тагове предписва скрит атрибут. който определя дали да се показват на обекта в прозореца на браузъра, или не.

@media само на екрана и (макс ширина: 400px) > Само @media екран и (макс ширина: 800px) > @media само на екрана и (мин-ширина: 1100px) >

Всичко ще бъде благодарен, ако подкрепа за проекта - добавяне на блог, за да AdBlock изключения и да споделите връзка към запис в своите социални мрежи: