| Kosten | Четверг, 25 Марта 2021, 03:46 | Сообщение 1 |
| Есть сотни способов создать адаптивную навигацию, ограниченную только вашим творчеством и границами возможностей 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');
});
});
В этом меню больше текстовых ссылок, чем может удобно поместиться на экране смартфона по горизонтали, поэтому нам нужно преобразовать его в вертикальное меню. Чтобы улучшить взаимодействие с пользователем, мы хотим предоставить пользователям переключатель меню для доступа к этому вертикальному меню.
Демонстрация
| | Страна: (RU) |
| |
