ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Выезжающая панель для сайта на CSS

Выезжающая панель для сайта на CSS

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

Панель полностью создана на CSS без JavaScript, что сильно не будет грузить главную и остальные страницы. Также его можно поставить на отдельные модули, что код разместить на главной странице каталога перед /body и только там будет работать и визуально видно. Этот элемент вида панель отлично подойдет на сайты где нет место под функционал, так как он может разместить много элементов или форм с обменом информации. Но и не забываем, что он мешать не кому не будет, так как при умолчание элемент закрыт, что будет разворачиваться только тогда когда захочет пользователь или гости или будет в этом особая необходимость.

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

Это мы выхвали панель, что просто написал в ней и поставил логотип проверяя на тестовом сайте.

Панель под материал в эффектом появление на сайте

Здесь решил проверить на адаптивность его при раскрытие, что нормально и корректно все отображается.

Адаптивная горизонтальная панель для uCoz

Приступаем к установке:

Разместить материал в окне, что будет открываться. И потом поставить вверх сайта в шапку в самый низ.

Код

<input class="open" id="top-box" type="checkbox" hidden>
<label class="btn btn-primary" for="top-box"></label>
<div class="top-panel">
<div class="message">
<h1>
<div align="center"><span style="font-family:'Geneva'"><span style="color:orange"><b>Приветствуем всех на ZORNET.RU</b></span></span></div>
</h1>
<p>
<div align="center"><img border="0" align="absmiddle" src="http://zornet.ru/ZORNET/drental/OohSq3Z.png"></div><div align="center"><br></div>
Всех приветствую на сайте ZORNET.RU, как поняли это выдвижная панель, что вы можете поставить на свой сайт, проверена не темном сайте и автоматически подключились стили и темное табло. Думаю если ставить на светлый, то будет табло под белый оттенок. <div><br></div><div>Здесь вы можете разместить что вам нужно, чтоб быстро пользователь или гости прочти. Но также поставить какой то информер, что был бы полезен для самого веб мастерам для всех кто находиться на интернет ресурсе. </div>
</p>
</div>
</div>

CSS:

Код

/* ---------- Выдвижная панель ---------- */
.top-panel {
  background: #39464e;
  position: absolute;
  top: -300px;
  left: 0;
  width: 100%;
  height: 300px;
  padding: 0;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  transition: top 400ms cubic-bezier(0.17,0.04,0.03,0.94)
}

.message {
  color: #fff;
  font-weight: 400;
  position: relative;
  padding: 0em 1em;
  max-width: auto
}

.message h1 {
  color: #fff
}

.message h2 {
  color: #888
}
.message p {
  margin: 1em 0
}
.message a {
  text-decoration: none;
  color: #748b74
}
.message a:hover {
  color: #95984b
}

label.btn {
  display: block;
  position: absolute;
  right: 6px;
  top: 0;
  cursor: pointer;
  background: #2bbbad;
  width: 50px;
  border-radius: 0 0 5px 5px;
  padding: 8px 5px;
  color: #FFF;
  line-height: 20px;
  font-size: 12px;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  transition: all 400ms cubic-bezier(0.17,0.04,0.03,0.94);
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  z-index: 9999
}

label.btn:hover {
  box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15)
}

label.btn:after {
  content: '\f078';
  font: normal 18px/1 FontAwesome;
  text-decoration: inherit
}

.open:checked ~ .top-panel {
  top: 0
}

.open:checked ~ label.btn {
  top: 300px
}
.open:checked ~ .container {
  margin-top: 400px
}

.open:checked + label.btn {
  background: #dd6149
}

.open:checked + label.btn:after {
  content: '\f077';
  font: normal 18px/1 FontAwesome
}

.container {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  transition: margin 400ms cubic-bezier(0.17,0.04,0.03,0.94);
  padding: 5em 3em
}
/* ---------- Выдвижная панель конец ---------- */

PS - спасибо пользователю VIP36RUS за представленный материал.

15 Августа 2017 Просмотров: 2494 Комментариев: (10)

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

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

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 10
Порядок вывода комментариев: Critic© 15 Августа 2017 18:44¹ 0 Вот это точно круто, ее же можно шире сделать и поместить очень много, попробую поставить и туда статистику социальными закладками запихнуть, но или описание для сайта, но здесь нужно делать только под главную страницу. Kosten 15 Августа 2017 18:53² 0 Не думаю, что статистика там будет по теме, но если нужно, то можно ее туда закинуть. Просто думал, что это окно будет под реальные какие то функций или описание. Critic© 15 Августа 2017 19:01³ 0 Так на форуме этот скрипт, но и описание, где установлены H1 что говорит под описание больше сделан. Но можно и описание написать и под него социальные кнопки от Яндекс поставить, и красиво и кто то запостит. Kosten 15 Августа 2017 19:14⁴ 0 Да какая разница, темный или светлый, на темном можно применить стили различные, к примеру там молния при наведение на ссылку. что на светлом это будет очень незаметно. Что h1 установлен это так, но когда проверял. то свое описание писал, где в h1 поставил дивы и размер шрифта. что если на сайт кто будет ставить так нельзя делать, но это уже чисто CEO здесь срабатывает. VIP36RUS 15 Августа 2017 19:55⁵ 0 Выложу на форум может что то по типу такого же только с эффектом разворота на 360 Kosten 15 Августа 2017 20:13⁶ 0 Так с форума взял как раз, что вы залили, просто на темном сайте на работоспособность проверял и от туда снимки к материалу. VIP36RUS 15 Августа 2017 20:16⁷ 0 Мне без разнице откуда снимки, так даже лучше выглядит. Сейчас ещё добавлю одну менюху. Kosten 15 Августа 2017 20:29⁸ 0 Вот вы о чем, просто подумал что то об этом материале, что ранее вами был добавлен на форум. А так спасибо, посмотрим что за панель, если что на главную перетяну. VIP36RUS 15 Августа 2017 21:39⁹ 0 Добавил Kosten 15 Августа 2017 22:19¹⁰ 0 Вижу, но уже на файлы закинул, но только все в описание, что можете прочесть ЗДЕСЬ и там будет ссылка на перевод на форум, где как раз VIP36RUS разместил материал.