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

Адаптивная навигация сайта на основе CSS

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

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

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

Проверено по своей работе, где идет в горизонтальном положение:

Вид с мобильного экрана, где вы самостоятельно можете задать переход в эту степень:

Создание адаптивного меню с помощью CSS и HTML

Установка:

HEAD

Код

HTML

Код

<div class="navbar">
  <div class="menyu-sayta">

  <div class="navbar-header">
  <button class="toggle"><span></span>
  <span></span>
  <span></span></button>
  <a href="" class="navbar-brand">ZORNET.RU</a>
  </div>

  <ul class="nav navigatsiyu">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Скрипты</a></li>
  <li><a href="#">Статьи</a></li>
  <li><a href="#">Файлы</a></li>
  <li><a href="#">Контакты</a></li>
  </ul>

  </div>
</div>

CSS

Код

.navbar{
  height: 60px;
  background: linear-gradient(#434448, #191919);
  background: -webkit-linear-gradient(#686869, #0c0c0c);
  background: -moz-linear-gradient(#5b5c60, #0f1010);
  font-family: arial;
  }
.menyu-sayta{
  margin:auto;
}
.navbar-header{
  padding:0 0;
}
.navbar-brand{
  font-family: 'Lily Script One', arial;
  color:#e5e7ee;
  padding:0 20px 0px 20px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  margin-right: 5px;
  display: block;
  text-shadow: 0 1px 1px rgba(0,0,0, 0.3);
}
.toggle {
  float: left;
  width: 64px;
  height: 38px;
  padding-top: 2px;
  position: relative;
  border-radius: 5px;
  margin-left: 8px;
  margin-top: 8px;
  background: linear-gradient(#4b4b4e, #222323);
  background: -webkit-linear-gradient(#404142, #2f2f2f);
  background: -moz-linear-gradient(#535458, #1c1d1e);
  border: 1px solid rgba(90, 90, 90, 0.3);
  box-shadow: 0 1px 1px rgba(121, 121, 121, 0.3), inset 0 2px 1px rgba(187, 187, 187, 0.3);
  cursor: pointer;
}
.toggle:hover{
  background: #38393b;
}
.toggle:active{
  background: #1c1d1e;
  box-shadow: 0 1px 1px rgba(255,255,255, 0.3) ,
  inset 0 2px 1px rgba(0,0,0, 0.9);
}
.toggle:focus{
  outline: none;
}
.toggle > span{
  display: block;
  border-radius: 2px;
  height: 5px;
  width: 34px;
  background: #6e7074;
  margin: auto;
  margin-bottom: 3px;
}
.navigatsiyu{
  height:0;
  overflow:hidden;
  background:#0f1010;
  padding: 0 5px;
  width: 150px;
  transition:height .5s;
  -webkit-box-sizing:border-box;
  padding-left: 0px;
  border-radius: 0 0 10px;
  position: relative;
  z-index: 1;
}
.nav > li:first-child{
  padding-top: 5px;
}
.nav > li{
  list-style:none;
  display: block;
}
.nav > li > a{
  padding:10px 10px;
  margin-left: 5px;
  line-height:30px;
  background: #404343;
  color:#ccc;
  display: block;
  border-top: 1px solid #353737;
  border-bottom: 1px solid #5e6262;
  transition:padding-left 0.3s;
  }
  .nav > li > a:hover{
  padding-left: 15px;
  color: #fff;
  }
  .nav > li:last-child > a{
  border-radius: 0 0 10px 0;
  }
  .nav > li > a:hover{
  background: #2d2f2f;
  }

@media(min-width:770px){
  .navbar{
  height: 60px;
  background: linear-gradient(#2b63ca, #334996);
  background: -webkit-linear-gradient(#526ea5, #102465);
  background: -moz-linear-gradient(#5a8eee, #4066e8);
  font-family: arial;

}
  .menyu-sayta{
  width:750px;
  }
  .navbar-header{
  float:left;
  }
  .navbar-header{
  background: rgba(255,255,255, 0.1);
  }
  .toggle{
  display: none;
  }
  .navigatsiyu{
  display: block;
  height:0 !important;
  padding-top:10px !important;
  background:transparent !important;
  width: auto;
  margin:0;
  padding:0;
  overflow:visible ;
  }
  .nav{
  margin:0;
  padding:0;
  }
  .nav > li{
  float:left;
  list-style:none;
  padding: 5px;

  }
  .nav > li > a{
  border-radius: 5px !important;
  background: transparent;
  padding:0 15px;
  border: none;
  }
  .nav > li > a:hover{
  background: -webkit-linear-gradient(#beccef, #adbeef);
  background: -moz-linear-gradient(#d9e2f9, #becdf6);
  background: linear-gradient(#c9d6f5, #abbbe6);
  color: #2f55d8;
  }

}
@media(min-width:990px){
  .menyu-sayta{
  width:950px;
  }
}

@media(min-width:1200px){
  .menyu-sayta{
  width:1170px;
  }
}

.show{
  height:270px;
}

Код

$(".toggle").click(function(){
$(".navigatsiyu").toggleClass("show");
});

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

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

16 Июля 2020 Загрузок: 1 Просмотров: 1077 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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