• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Сделать меню для мобильной версии сайта (Создаем мобильную навигация для небольших экранов)
Сделать меню для мобильной версии сайта
Kosten
Дата: Понедельник, 2019-02-11, 23:08 | Сообщение 1
Администраторы
Сообщений:19882
Награды: 56


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

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

Так выглядит, как только зайдете на сайт.



Здесь сделали клик и открылись ключевые слова в навигаций.



HTML

Код
<div class="kepgasen-vinormation">
<div class="bsapeges-unenation">
  <a href="#home" class="numerousog">ZORNET.RU</a>
  <nav id="usogaverag">
    <a href="#portfolio">Портфолио</a>
    <a href="#work">Услуги</a>
    <a href="#contact">Контакты</a>   </nav>
  <a href="#" class="icon" onclick="barFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>


Это описание, которое идет под верхним кодом, что нужно по необходимости разместить сразу за ним.

Код
   <section>
  <h3>ZorNet - портал для вебмастера</h3>
  <p>Интересные решения для вебмастера в создание и продвижение сайтов.</p>
  <p>Здесь идет описание или тематическая статья, которая написана по тематике.</p>
</section>


CSS

Код
.kepgasen-vinormation {
    max-width: 386px;
    margin: auto;
    background-color: #3a203c;
    height: 317px;
    color: #f3eeee;
}

.bsapeges-unenation {
  overflow: hidden;
  background-color: #5d4037;
  position: relative;
}

.bsapeges-unenation #usogaverag {
  display: none;
}

.bsapeges-unenation a {
    color: #f7f3f3;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 18px;
    display: block;
}

.bsapeges-unenation a.icon {
  background: #212121;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

  .bsapeges-unenation a:hover {
   background-color: #105db7;
  color: #d1d1d8;
}

.numerousog {
    background-color: #224b86;
    color: #e4dddd;
}

section {
  padding-left: 15px;
}


JS

Код
function barFunction() {
  var x = document.getElementById("usogaverag");
  if (x.style.display === "block") {
  x.style.display = "none";
  } else {
  x.style.display = "block";
  }
}

Также если не подключены шрифтовые иконки, то нужно обязательно сделать.

Демонстрация
Прикрепления: 1639137.png(16.9 Kb) · 4668216.png(14.7 Kb) · 142.zip(2.2 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Сделать меню для мобильной версии сайта (Создаем мобильную навигация для небольших экранов)
  • Страница 1 из 1
  • 1
Поиск: