Сейчас большинство пользователей сети просматривает web-ресурсы со своих гаджетов, для большинства из них требуется адаптивная версия сайтов, чтобы контент отображался привлекательно. Именно поэтому, каждый разработчик должен сразу адаптировать ресурс под все виды устройств. Есть большое количество способов сделать это. Многие пользуются уже готовыми блоками, что упрощает и ускоряет разработку.В этой статье я расскажу как сделать меню сайта адаптивным, не используя при этом сложных конструкций языка Java Script. Я реализовал это с помощью HTML и CSS.Конечно, опережая тех, кто начнет указывать на недостатки такого решения, скажу, что это лишь эксперимент, и, скорее всего, не будет применяться при разработке. Польза изучения этой статьи в том, что те, кто начинает осваивать веб-разработку и верстку, сможет увидеть, насколько может быть разнообразен подход к решению какой-либо проблемы.Шаг 1. пишем html файл
Делаем обычное дерево файлов, с index.html, папкой css c файлом style.css и папкой image с двумя картинками логотипом и второй, о которой чуть позже.в index.html пишем следующий код(буду указывать только код из блока <body>):
<header>
<!-- вставляем логотип с классом logo-->
<img src="image/logo.png" alt="" class="logo">
<!--вставлем меню-->
<ul class="mobile">
<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>
<!--вставлем еще одно меню-->
<ul class="mobile1">
<img src="image/w3.png" alt="">
<a href="" class="link">Главная</a>
<a href="" class="link">Сервис</a>
<a href="" class="link">Услуги</a>
<a href="" class="link">О нас</a>
<a href="" class="link">Контакты</a>
</ul>
</header>
<!--добавляем текста для наглядности-->
<div class="content">
<h1>Lorem</h1>
<h2>Lorem</h2>
<h3>Lorem</h3>
<h4>Lorem</h4>
<p>Lorem</p>
</div>
Если открыть файл в браузере, то увидим:
Шаг 2. Пишем стили
Теперь нам нужно немного поработать с CSS и привести в порядок страницу.
В файл style.css (не забудьте подключить его к index.html) последовательно пишем стили к блокам сайта.
/*обнуляем боди, ставим на фон цвет, делаем его высоту для наглядности*/
body {
margin: 0;
background: #c7a1ff;
height: 1700px; /*строка только чтобы можно было проматывать сайт вниз*/
}
тут все понятно, комментарии к коду помогают во всем разобраться
/* стили для шапки сайта, устанавливаем высоту и ставим фон,
добавляем немного тени*/
header {
height: 100px;
width: 100%;
background: #ab88df;
box-shadow: 1px 0px 3px black; /*добавляем тень для красоты*/
display: flex; /*выстраиваем элементы хедера в линию*/
position: fixed;/*закрепляем шапку в верху сайта при прокручивании*/
top: 0;
z-index: 9999; /*делаем хедер над всеми другими элементами*/
}
/*отодвигаем контент от верха на 100 пикселей*/
.content {
margin-top: 100px;
padding: 15px 30px;
}
/*устанавливаем размер логотипа и внешние отступы*/
.logo {
height: 70px;
margin: 15px 50px;
}
.mobile {
/*выстраиваем элементы списка в линию*/
display: flex;
/* прижимаем меню к правому краю с отступом 50px*/
position: absolute;
right: 50px;
}
/* устанавливаем стили для ссылок меню*/
li {
/* убираем точки у списка*/
list-style: none;
/* меняем шрифт, размер текста, внутренние и внешние отступы, с помощью градиента делаем вид кнопок*/
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 14px;
padding: 15px 30px;
margin: 10px 0px;
background: linear-gradient(0deg, #d0bdee, #dee7f8);
/*добавим немного тени*/
box-shadow: 1px 1px 1px #472877;
}
a {
/* убираем подчеркивание у ссылок, добавляем стиль текста*/
text-decoration: none;
color: #001d52;
font-weight: 700;
}
/*добавим эффект нажатия кнопки при наведении*/
li:hover {
/* переворачиваем градиент и убираем тень*/
background: linear-gradient(0deg, #dee7f8, #d0bdee);
box-shadow: none;
}
/*прячем мобильное меню*/
.mobile1 {
display: none;
}
/*делаем чтобы мобильное меню стало вертикальным*/
.link {
display: block;
}
Это достаточно чтобы сайт работал на устройствах с большим экраном.
Но если мы откроем эту страницу с мобильного браузера, то вся конструкция меню разрушится, оно заедет на логотип, часть его будет невидна.
Шаг 3. Адаптируем
Нам надо определить, какой ширины экрана достаточно, чтобы меню не ломалось. Не углубляясь в вопрос, я решил, что нужно менять меню уже при экране менее 768 пикселей.
Как все работает?
Если размер экрана менее 768 пикселей, первое меню скрывается, и появляется плюсик, при нажатии на который появляется второе меню, которое будет отображаться более корректно. (Здесь мы подключаем картинку с плюсиком, подумайте почему именно картинку а не символ).
Далее дописываем еще несколько блоков стилей:
/*при экране менее 768 пикселей прячем меню и показываем кнопку*/
@media(max-width: 768px) {
/* прячем обычное меню*/
.mobile {
display: none;
}
/* показываем мобильное меню на нужной позиции*/
.mobile1 {
display: block;
position: fixed;
top: 30px;
right: 30px;
/* делаем шрифт 0, чтобы скрыть ссылки*/
font-size: 0px;
color: #fff;
}
/* немного стилей для ссылок мобильного меню*/
.link {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
color: #dee7f8;
padding: 20px 20px;
text-align: center;
}
/*раскрытие меню при нажатии, за счет увеличения шрифта, в устройствах без мышки будет срабатывать при нажатии*/
.mobile1:hover {
background: решетка001d52;
padding: 30px;
font-size: 16px;
}
/*стили ссылок в меню при наведении*/
.link:hover {
color: решетка95baff;
border-bottom: 1px dashed rgb(255, 255, 255);
}
}
Теперь у нас полностью рабочее меню, корректно работающее на устройствах с маленькими экранами. (Внимание!!!! данный подход не гарантирует корректную работу на всех устройствах)
Вот такое решение, если поработать над стилями то, будет вполне приемлемо.
Удачи в изучении верстки и разработке!!!