• Страница 1 из 1
  • 1
Форум » Веб-разработка » Коды сайта HTML » Адаптивное меню с боковой панелью для экрана (Выпадающее меню, которое удобно для мобильных устройств)
Адаптивное меню с боковой панелью для экрана
Kosten
Дата: Четверг, 2021-03-25, 03:46 | Сообщение 1
Оффлайн
Администраторы
Сообщений:34094
Награды: 65


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



Основы:

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

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

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

При широком мониторе:



На мобильном экране:



Установка:

HEAD

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

HTML

Код
<div class="container">
  <ul id="nav">
    <li class="toggle">
      <div class="bar1"></div><div class="bar2"></div><div class="bar3"></div>
    </li>
    <li><a href="">HOME</a></li>
    <li><a href="">PORTFOLIO</a></li>
    <li><a href="">BLOG</a></li>
    <li><a href="">CONTACT</a></li>    
  </ul>
  
</div>

CSS

Код
.container {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  position: relative;
  transition: all 0.3s;
}
.menu-open {
  transform: translate(-230px, 0);
}
#nav {
  background: #24222d;
  text-align: center;
  margin: 0;
  padding: 15px 0;
  width: 100%;
}
#nav li {
  display: inline-block;
}
#nav li a {
  display: block;
  color: #fff;
  font-size: 1rem;
  padding: 10px 25px;
  border: 2px solid transparent;
  text-decoration: none;
  transition: all 0.3s;
}
#nav li a:hover {
  border: 2px solid #fff;
}

/* Burger */
.toggle {
  display: none;
  position: absolute;
  left: -55px;
  top: 0;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.6);
  padding: 15px 15px 10px;
}
.toggle .bar1,
.toggle .bar2,
.toggle .bar3 {
  width: 25px;
  height: 2px;
  background: #FFF;
  margin-bottom: 8px;
  transition: all 0.6s;
}
/* Change it to an X */
#nav.open .toggle .bar1 {
  transform: rotate(45deg) translate(8px, 7px);
}
#nav.open .toggle .bar2 {
  opacity: 0;
}
#nav.open .toggle .bar3 {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* content */
h1{
  padding: 10px;
}
.note {
  width: 60vw;
  max-width: 425px;
  height: 150px;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px 0;
  border-radius: 5px;
  overflow: hidden;
}
.note h2 {
  font-weight: 300;
  font-size: 1.5em;
  margin: 10px;
  padding: 0 10px;
}
.note p{
  margin: 10px;
}

@media (max-width: 768px) {
  body {
    min-width: 320px;
  }
  .toggle {
    display: block;
  }
  #nav {
    width: 230px;
    max-width: 480px;
    height: 100%;
    position: absolute;
    top: 0;
    right: -230px;
  }
  #nav li{
    display: block;
  }
  #nav li a:hover, #nav li a:focus {
    border-color: transparent;
    background: rgba(0, 0, 0, 0.5);
    color: #5cd;
  }
}

JS

Код
$(document).ready(function(){
  $('.toggle').click(function(){
    $('#nav').toggleClass('open');
    $('.container').toggleClass('menu-open');
  });
});

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

Демонстрация
Прикрепления: 4579916.png(3.2 Kb) · 2095249.png(7.7 Kb) · responsive-menu.zip(5.2 Kb) · 2734191.jpg(135.6 Kb)
Страна: (RU)
Форум » Веб-разработка » Коды сайта HTML » Адаптивное меню с боковой панелью для экрана (Выпадающее меню, которое удобно для мобильных устройств)
  • Страница 1 из 1
  • 1
Поиск: