ZorNet.Ru — сайт для вебмастера » HTML и CSS » Выдвижная верхняя панель с помощью CSS

Выдвижная верхняя панель с помощью CSS

Отличное решение для любого сайта, как выдвигающееся панель при клике. Где можно содержать как информацию, так и функций виде навигаций. Думаю многие встречали в сети на сайтах в самом верху кнопки, и возможно кто-то не догадывался, что это есть основная функция на сайте. Так как при клике появляется панель, а точнее красиво выезжает из-под шапки или самого верху, что красиво и современно смотрится. Можно полагать, что основном там материал размещают для тех, кто часто заходит на сайт и всегда в курсе его изменение по навигаций.

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

Это полностью рабочая панель, что создана с помощью CSS3, которая при нажатии на нее показывает какой-то контент, как уже говорили, где возможно будет описание или вообще выставить видео плеер, а затем после просмотра идет функция на закрытую часть содержимого страницы. Полностью интерфейс создается только с помощью CSS, используя оригинальную комбинацию теней CSS3, где на светлом фоне очень заметно, но главное вписывается в дизайн, что касается круглых границ и контента, созданного CSS2.

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

По клику открываем ее, где ниже предоставлено Demo, для реального просмотра:

Как сделать открытие и закрытие блока при нажатии?

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

Код

div.gukisam_qytukan input[type="checkbox"]:checked ~ div {
height: 247px;
opacity: 1;
overflow: auto;
}

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

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

HTML

Код

<div class="gukisam_qytukan">
<input type="checkbox" id="paneltoggle" />
<label for="paneltoggle" title="ZorNet.Ru: Портал Вебмастера"></label>
<div class="content">

<p>Здесь может быть разнообразное описание, что скрывается в блоке, где при клике облок открывается, и аналогично можно закрыть.</p>
<p>
Сайт: <a href="http://zornet.ru/">ZorNet.Ru: Портал Вебмастера</a>.
</p>
</div>
</div>

CSS

Код

body {
  -webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
  from {padding:0;}
  to {padding:0;}
}

div.gukisam_qytukan {
  position: relative;
  margin: 0;
  margin-bottom: 1em;
  }

div.gukisam_qytukan > div {
  height: 9px;
  padding: 7px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  background: #c7eff9;
  position: relative;
  opacity: 0;
  -moz-transition: all 0.2s ease-in-out 0.1s;
  -o-transition: all 0.2s ease-in-out 0.1s;
  -webkit-transition: all 0.2s ease-in-out 0.1s;
  transition: all 0.2s ease-in-out 0.1s;
}

div.gukisam_qytukan:after {
  content: '';
  display: block;
  bottom: 0;
  position: absolute;
  width: 100%;
  height: 10px;
  box-shadow: 0 2px 7px grey, 2px 2px 3px #902323 inset;
  background: #611316;
  background: -moz-linear-gradient(top, rgba(118,36,41,1) 0%, rgba(117,5,11,1) 50%, rgba(56,38,39,0.72) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(119, 29, 34)), color-stop(50%,rgb(119, 10, 16)), color-stop(100%,rgba(53, 33, 34, 0.72)));
  background: -webkit-linear-gradient(top, rgb(136, 46, 51) 0%,rgb(117, 14, 19) 50%,rgba(62, 39, 40, 0.72) 100%);
  background: -o-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);
  background: -ms-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);
  background: linear-gradient(to bottom, rgb(115, 32, 37) 0%,rgb(117, 11, 17) 50%,rgba(56, 36, 37, 0.72) 100%);
}

div.gukisam_qytukan input[type="checkbox"] {
  position: absolute;
  right: 49.8px;
  width: 59.7px;
  height: 39.8px;
  bottom: -32px;
  z-index: 9;
  cursor: pointer;
  opacity: 0;
}

div.gukisam_qytukan input[type="checkbox"]:checked ~ div {
  height: 250px;
  opacity: 1;
  overflow: auto;
}

div.gukisam_qytukan label {
  position: absolute;
  right: 47px;
  width: 59px;
  height: 39px;
  bottom: -29px;
  border-bottom-left-radius: 27px;
  border-bottom-right-radius: 27px;
  cursor: pointer;
  z-index: 5;
  background: #612023;
  background: -moz-linear-gradient(top, rgba(118,36,41,1) 0%, rgba(117,5,11,1) 50%, rgba(124,31,32,0.72) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(119, 44, 48)), color-stop(50%,rgb(119, 12, 18)), color-stop(100%,rgba(121, 26, 27, 0.72)));
  background: -webkit-linear-gradient(top, rgb(103, 41, 45) 0%,rgb(132, 32, 37) 50%,rgba(130, 40, 41, 0.72) 100%);
  background: -o-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);
  background: -ms-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);
  background: linear-gradient(to bottom, rgb(123, 45, 50) 0%,rgb(117, 13, 18) 50%,rgba(117, 25, 26, 0.72) 100%);
  box-shadow: 0 2px 7px #0e0e0e, 4px 4px 5px #9a2222 inset, 0 -2px 2px rgba(156, 55, 60, 0.7) inset, 0 4px 0 rgba(245, 235, 235, 0.7) inset;
}

div.gukisam_qytukan label:hover {
  box-shadow: 0 3px 8px black, 4.9px 4.9px 5.9px brown inset, 0 -3px 3px rgba(148, 33, 39, 0.72) inset, 0 5px 0 rgba(251, 248, 248, 0.7) inset, 0 0 15px rgba(249, 244, 244, 0.8) inset;
  }

div.gukisam_qytukan label:after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border: 9px solid transparent;
  border-color: white transparent transparent transparent;
  top: 21px;
  left: 21px;
  box-shadow: 0 0 10px gray inset;
  }

Эта панель проверена на работоспособность всех функций во всех современных браузерах: IE, FF, Chrome, Safari, Opera и другие программы для выхода в сеть интернета.

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

Демонстрация

11 Июня 2018 Просмотров: 2080 Комментариев: (0)

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

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

Kosten

Комментарии: 0