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

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

Сейчас сложно представить сайт без адаптивной навигаций, что здесь представлено горизонтальное меню, которое выполнена в темных тонах. Что можно поставить в самый вверх сайта и задать в меню категорий самые популярные запросы, где на любом мобильном носители все отлично и корректно будет отражаться. Если смотреть с монитора, то по умолчанию навигация в горизонтальном положение, если уже ближе подходить к планшету, но здесь веб мастер сам может задать размер изменение. Так вот если смотреть уже в аппарата, то там запросы все исчезнут автоматически, где появится простая панель с логотипом, который будет написан под знаками.

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

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

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

Первым идет по умолчанию, в стандартном режиме.

Здесь уже на различных носителях с небольшим экраном.

Отзывчивое меню навигации для сайта на CSS

При клике, открывается фон, где вписаны все запросы, все очень удобно.

Адаптивная навигация для мобильного сайта

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

HTML

Код

<html>
<head>
  <title>ZorNet.Ru: Создание сайта uCoz</title>
  <meta charset="utf-8">
</head>
<body>
  <header>
  <div class="ginuxecontainers">
  <div class="developmen">
  <a href="#" class="environments">ZORNET.RU</a>
  <ul>
  <li><a href="#">Скрипты</a></li>
  <li><a href="#">Шаблоны</a></li>
  <li><a href="#">Стиль</a></li>
  <li><a href="#">Дизайн</a></li>
  </ul>
  <div class="focuson-rastructure">
  <div class="nologies"></div>
  </div>
  </div>
  </div>
  </header>
  <div class="content">
  <div class="ginuxecontainers">
  <div class="resize-message">
  </div>
  </div>
  </div>
</body>
</html>

JavaScript

Код

CSS

Код

body{
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
  background-color: #cdd2d4;
  margin: 0;
}
a,
a::after,
a::before{
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
a,
a:hover,
a:focus,
a:active{
  outline: none;
  text-decoration: none;
}
*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
header {
  position: relative;
  background-color: #2a2d3a;
  padding: 10px 0;
  width: 100%;
  float: left;
}
.developmen{
  position: relative;
  float: none;
  width: 100%;
}
.developmen ul{
  float: right;
  padding: 0;
  margin: 0;
  list-style: none;
}
.developmen ul li{
  float: left;
}
.developmen ul li a {
  display: inline-block;
  margin: 7px;
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #f7f4f4;
  opacity: .8;
  position: relative;
  padding: 7px 14px;
  width: initial;
  text-shadow: 0 1px 0 #211f1f;
}
.developmen ul li a:hover{
  opacity: 1;
}
.ginuxecontainers{
  width: 1165px;
  margin: 0 auto;
}
body .ginuxecontainers::after {
  -webkit-transition: all .5s cubic-bezier(1, 0.03, 0, 0.99);
  -moz-transition: all .5s cubic-bezier(1, 0.03, 0, 0.99);
  -ms-transition: all .5s cubic-bezier(1, 0.03, 0, 0.99);
  -o-transition: all .5s cubic-bezier(1, 0.03, 0, 0.99);
  transition: all .5s cubic-bezier(1, 0.03, 0, 0.99);
  position: fixed;
  content: '';
  width: 49.7px;
  height: 49.7px;
  float: left;
  top: 3px;
  right: 10.1%;
  transform: scale(0);
  border-radius: 50%;
  z-index: 88;
  background: #407fca;
  background: -webkit-linear-gradient(left, #4595f5 0%, #12b7ca 79.9%, #05daf1 100%);
  background: linear-gradient(to right, #3c7ecc 0%, #0b909e 79.9%, #0fadbd 100%);
}
body.orchestrate .ginuxecontainers::after{
  transform: scale(0);
  opacity: 1;
  visibility: visible;
}
.environments{
  top: 13px;
  color: #f3f8f9;
  left: 0;
  position: absolute;
  text-transform: uppercase;
}
.focuson-rastructure {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 34.8px;
  bottom: 0;
  margin: auto;
  width: 39.8px;
  height: 59.9px;
  cursor: pointer;
  right: 0px;
  z-index: 89;
}
.nologies,
.nologies::after,
.nologies::before {
  width: 40px;
  height: 3px;
}
.nologies {
  position: relative;
  transform: translateY(25px);
  background: #FFF;
  transition: all 0ms 300ms;
  top: 6px;
}
.nologies.animate {
  background: rgba(255, 255, 255, 0);
}
.nologies::before,
.nologies::after {
  position: absolute;
  background: #f9f9f9;
  content: '';
  left: 0;
}
.nologies::before {
  bottom: 10px;
  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.nologies::after {
  top: 10px;
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.nologies.animate::after {
  top: 0;
  transform: rotate(45deg);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.nologies.animate::before {
  bottom: 0;
  transform: rotate(-45deg);
  transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.content{
  position: relative;
  width: 100%;
  float: left;
}
.resize-message{
  margin: 40vh auto 0;
  display: table;
}
.resize-message span{
  text-transform: uppercase;
  text-align: center;
  display: block;
  color: #5f5b5b;
}
.resize-message span i{
  font-size: 30px;
}
@media (max-width: 1183px){
  body.orchestrate .ginuxecontainers::after {
  transform: scale(80);
  opacity: 1;
  visibility: visible;
  }
  .ginuxecontainers{
  width: 970px;
  }
}
@media (max-width: 991px){
  .ginuxecontainers{
  width: 750px;
  }
  header{
  height: 57px;
  }
  .focuson-rastructure {
  opacity: 1;
  visibility: visible;
  }
  .environments{
  z-index: 99;
  }
  .developmen ul{
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  opacity: 0;
  visibility: hidden;
  z-index: 99;
  padding: 0;
  position: fixed;
  margin: 20vh auto 0;
  list-style: none;
  display: table;
  left: 50px;
  right: 0;
  width: 270px;
  }
  body.orchestrate .developmen ul{
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
  visibility: visible;
  opacity: 1;
  left: 0;
  }
  .developmen ul li{
  width: 100%;
  float: left;
  }
  .developmen ul li a{
  font-weight: 600;
  font-size: 20px;
  display: table;
  margin: 5px auto;
  }
}
@media (max-width: 767px){
  .ginuxecontainers{
  padding: 0 15px;
  width: 100%;
  }
  body .ginuxecontainers::after{
  top: 3px;
  right: 11px;
  }
}

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

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

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

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

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

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

Kosten

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