ZorNet.Ru — сайт для вебмастера » HTML и CSS » Скользящая панель навигаций с помощью CSS3

Скользящая панель навигаций с помощью CSS3

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

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

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

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

HTML

Код

<header>
  <button class="lodsaxumub">
  <span>></span>
  </button>
  <ul class="zagukorinresa">
  <li class="kasgerkin"><a href="http://zornet.ru">Главное</a></li>
  <li class="kasgerkin"><a href="#">zornet.ru</a></li>
  <li class="kasgerkin"><a href="#">Скрипты</a></li>
  <li class="kasgerkin"><a href="#">Шаблоны</a></li>
  <li class="kasgerkin"><a href="#">Дизайн</a></li>
  </ul>
  </header>

JavaScript

Код

$(document).ready(function(){

  var header = $('header'),
  btn = $('button.lodsaxumub');

  btn.on('click', function(){
  header.toggleClass('zornetures');
  });

});

SCSS

Код

header{
  position: relative;
  background-color: #2c353a;
}
header ul.zagukorinresa{
  overflow: hidden;
}
header ul.zagukorinresa li{
  position: relative;
  float: left;
  width: 20%;
}
header ul.zagukorinresa li a{
  display: block;
  height: 50px;
  opacity: 0;
  font: 400 1.15em 'Allan', serif;
  line-height: 50px;
  color: #848e92;
  text-decoration: none;
  text-align: center;
  cursor: default;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  &:hover{
  color: #fff;
  background-color: #222b2f;
  }
}

@media screen and (max-width: 600px){
  header ul.zagukorinresa li{
  float: none;
  width: 100%;
  }
  header ul.zagukorinresa li a{
  height: 0;
  }
}

/* Style for header with active class name */

header.zornetures ul.zagukorinresa li a{
  height: 120px;
  opacity: 1;
  line-height: 120px;
  cursor: pointer;
}

@media screen and (max-width: 600px){
  header.zornetures ul.zagukorinresa li a{
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #222b2f;
  }
}

/* Style for the plus button */

button.lodsaxumub{
  position: absolute;
  top: 50px;
  left: calc(50% - 30px);
  width: 60px;
  height: 35px;
  background-color: #38a6a6;
  font: 400 1.2em 'Allan', serif;
  color: #fff;
  border: none;
  line-height: 30px;
  vertical-align: middle;
  outline: none;
  cursor: pointer;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
}
button.lodsaxumub:hover{
  height: 50px;
}
button.lodsaxumub span{
  display: block;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
}

/* Style for the plus button when header has active classe name */

header.zornetures button.lodsaxumub{
  top: 120px;
  background-color: #256f6f;
}
header.zornetures button.lodsaxumub span{
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
}

@media screen and (max-width: 600px){
  button.lodsaxumub{
  top: 0;
  left: 15px;
  }
  header.zornetures button.lodsaxumub{
  top: 305px;
  }
}

/* Other styles */

.kasgerkin{
  text-transform: uppercase;
}
section{
  padding: 3em;
}
h1{
  margin: 1em 0;
  font-size: 40px;
  line-height: 1.5em;
}
p{
  margin: 1em 0;
}
strong{
  color: #93969c;
}

@media screen and (max-width: 600px){
  section{
  padding: 1.5em;
  }
}

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

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

21 Мая 2018 Просмотров: 1102 Комментариев: (0)

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

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

Kosten

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