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

Мобильная навигационная панель сайта

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

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

При открытие страницы или где находится меню, все изначально идет в кнопке:

Это по клику по всей ширине и длине экрана идет заданная палитра цвета:

Первый делом подключим библиотеку, если она не установлена по умолчанию и переходим к увтановке:

HTML

Код

<div id="copaisle-keting-mednsole">
  <div id="coeven-kensoles">
  <div>
  <span></span>
  <span></span>
  <span></span>
  </div>
  </div>
  <nav id="numeption-modegeered">
  <ul>
  <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>
  </nav>
  <div id="dmoducen-dungred"></div>
  </div>

CSS

Код

.getunos #numeption-modegeered {
  z-index: 1000;
  visibility: visible;
}
#numeption-modegeered {
  visibility: hidden;
  position: fixed;
  display: table;
  vertical-align: middle;
  color: #fff;
  top: 0;
  height: 100%;
  width: 100%;
  text-align: center;
  font-size: 16px;
}
#numeption-modegeered ul {
  display: table-cell;
  vertical-align: middle;
  list-style: none;
  padding: 30px;
}
#numeption-modegeered a {
  color: #f3f0f0;
  text-decoration: none;
  display: block;
  padding: 10px 0;
}

#numeption-modegeered ul li {
  opacity: 0;
  -webkit-transform: scaleX(0) translateX(-260px);
  transform: scaleX(0) translateX(-260px);
  -webkit-transition: none;
  transition: none;
}
.getunos #numeption-modegeered ul li {
  opacity: 1;
  -webkit-transform: scaleX(1) translateX(0);
  transform: scaleX(1) translateX(0);

  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;

  -webkit-transition-delay: .1s;
  transition-delay: .1s;
}
.getunos #numeption-modegeered ul li:nth-child(2) {
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}
.getunos #numeption-modegeered ul li:nth-child(3) {
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}
.getunos #numeption-modegeered ul li:nth-child(4) {
  -webkit-transition-delay: .4s;
  transition-delay: .4s;
}
.getunos #numeption-modegeered ul li:nth-child(5) {
  -webkit-transition-delay: .5s;
  transition-delay: .5s;
}

#dmoducen-dungred {
  content: "";
  width: 60px;
  height: 60px;
  left: calc((100% - 60px)/2);
  bottom: 10px;
  display: block;
  position: fixed;
  background: #17A669;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: scale(1);
  transform: scale(1);

}
.getunos #dmoducen-dungred {
  -webkit-transform: scale(30);
  transform: scale(30);
  -webkit-transition: all .6s ease-out;
  transition: all .6s ease-out;
}

#coeven-kensoles {
  display: block;
  position: fixed;
  left: calc((100% - 60px)/2);
  bottom: 10px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  padding: 15px;
  z-index: 1001;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

#coeven-kensoles div {
  position: relative;
  display: flex;
  flex-direction: column;
}
#coeven-kensoles span {
  height: 2px;
  width: 100%;
  background: #fff;
  zoom: 1;
  -webkit-transition: .35s ease-in-out;
  transition: .35s ease-in-out;

  margin: 4px 0;
}

#coeven-kensoles span:nth-child(1) {
  top: 0;
}
#coeven-kensoles span:nth-child(2) {
  top: 8px;
}
#coeven-kensoles span:nth-child(3) {
  top: 16px;
}

.getunos #coeven-kensoles {
  background: transparent;
}

.getunos #coeven-kensoles span {
  background: #fff;
}

.getunos #coeven-kensoles span:nth-child(1) {
  top: 9px;
  -webkit-transform: translateY(10px) rotate(-135deg);
  transform: translateY(10px) rotate(-135deg);
  zoom: 1;
}
.getunos #coeven-kensoles span:nth-child(2) {
  width: 0;
  left: 50%;
}
.getunos #coeven-kensoles span:nth-child(3) {
  top: 9px;
  -webkit-transform: translateY(-10px) rotate(135deg);
  transform: translateY(-10px) rotate(135deg);
  zoom: 1;
}

Код

$('#coeven-kensoles').click(function(){
$('body').toggleClass('getunos');
});

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

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

15 Марта 2019 Загрузок: 1 Просмотров: 1207 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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