» »

Выдвижная боковая панель на чистом CSS


Выдвижная боковая панель на чистом CSS

Думаю многие в сети на интернет ресурсах встречали разные панели выдвижные с информацией, в нашем случай будет сделана под навигацию. Бывают очень разные, это как с обеих сторон или сверху в низ и наоборот. Здесь же все будет можно сказать по стандарту, это с левой стороны, чтоб было удобнее. С начало мы видим кнопку, которая создана на чистых стилях, как и весь материал и при нажатии ее вы выдвигаете саму панель, что будет для вас предоставлена демонстраций. Проверил код на меню для сайта, но как понимаете, то можно что вам нужно поставить, и чтоб сильно на сайте не мешалось, вот как раз спрятать и по клику все будет появляться. Здесь еще хочется подчеркнуть, создана на CSS и здесь нет jquery, что идет на других.

Что означает, вы можете предать свой оттенок цвета, и создать его под свой дизайн, это как от самой кнопки, и до крестика, чтоб все отключить и панель обратно заехало. Из ходя из всего перечисленного, вы надеюсь понимаете, что можно поставить как самую нужную информацию или второстепенную, возможно что-то другое, здесь еще от самого сайта и конструкций его зависит. Возможно вообще вывести на отдельную страницу, как навигация по всему порталу, вообще много чего можно сделать, главное чтоб все вписалось и нужно было на площадке.

Здесь у нас чисто описание по файлу, вам нужно скачать архив и в нем вы найдете текстовый документ, под названием "установка" там все понятно написано, так как он простой по своей сути и по установке его на сайт.

Так будет по умолчанию, фон может быть разный, поставил синий, у вас его вообще не будет.

Выдвигающаяся панель на CSS

Здесь уже видим развернутый и готов к работе, если можно так выразиться.

Боковая выдвижная панель на стилях

Но и само DEMO для визуального просмотра, и вообще понять, как он работает.

PS - материал был взят на Madeas.ru, что является партнером сайта.
12.11.2016 Загрузок: 4 Просмотров: 361 Комментарий: (4)

Поделиться в социальных сетях

Материал разместил

Комментарий: 4
FeStemBer
FeStemBer 12.11.2016 23:301
0
Но это точно сделана под оригинальные по своему дизайн сайты, а так удобная вещь.
Сафрон
Сафрон 12.11.2016 23:392
0
Где бы примерно такую панель взять, только чтоб над шапкой была.
Kosten
Kosten 12.11.2016 23:523
0
Есть одна тема по вверх сайта, только точно не скажу, на сайте есть уже скрипт. не упомнить, но скину в ЛС если что.
Kosten
Kosten 13.11.2016 13:144
0
Сафрон, вот здесь посмотрите, возможно такая функциональная редукция нужна. КЛИК
avatar