Далеко не во всех проектах уместны излишние эффекты, которые могут значительно нагружать страницы, а особенно, если это касается адаптивной верстки, где пользователь может просматривать сайт на смартфонах или планшетах. Большинство таких эффектов, создаются с использованием JavaScript, поэтому, для примера, я решил показать, как можно сделать один из важнейших элементов сайта, а именно меню навигации, практически не прибегая к JS, а в основном только средствами CSS. Совсем нельзя отказаться от использования JS по той причине, что на мобильных устройствах и обычных компьютерах или ноутбуках, многие события отличаются и, если на компьютере в CSS мы можем спокойно использовать свойство :hover, то на планшете это уже не сработает так, как нам бы этого хотелось. Самые нетерпеливые, могут сразу посмотреть результат (в примере изменяйте ширину окна браузера).
Итак, ставим такую задачу: создать резиновое по ширине меню, с переключением на мобильную его версию, где меню будет выпадающим по наведению или нажатию на кнопку. Структура HTML типичная для таких элементов, за исключением того, что мы добавляем еще один элемент - кнопку для раскрытия/скрытия меню в мобильной версии:
<header>
<nav id="menu">
<span id="nav_button">≡</span>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
</nav>
</header>CSS не совсем стандартный. Мы сделаем так, что наше меню будет вести себя так, как если бы мы использовали таблицу. Сразу хочу акцентировать внимание на том, что не все браузеры поддерживаю те свойства, которые мы будем использовать. Проблемы могут возникнуть с версиями IE ниже восьмой версии (хотя на них уже пора переставать ориентироваться) и в пару моментах есть маленькие сложности с IE8, но как решить их - напишу ниже.
* {
margin: 0;
padding: 0;
}
header {
background-color: #C0C0C0;
}
#menu {
display: table; /* описание ниже */
width: 100%;
border-collapse: collapse;
-webkit-box-sizing: border-box; /* описание ниже */
-moz-box-sizing: border-box; /* описание ниже */
box-sizing: border-box; /* описание ниже */
}
#menu ul {
display: table-row; /* описание ниже */
background-color: #FFFFFF;
list-style: none;
}
#menu ul li {
display: table-cell; /* описание ниже */
border: 1px solid #999999;
}
#menu ul li a {
display: inline-block;
width: 100%;
height: 50px;
line-height: 50px;
font-size: 1.2em;
text-align: center;
}
#menu ul li a:hover {
background-color: #990000;
color: #FFFFFF;
}
#nav_button {
display: none;
width: 50px;
height: 50px;
font-size: 2.5em;
text-align: center;
background-color: #FFFFFF;
border: 1px solid #949494;
cursor: pointer;
}
@media screen and (max-width: 600px) { /* описание ниже */
#menu {
display: inline-block;
position: relative;
width: auto;
}
#menu ul {
display: none;
position: absolute;
top: 0;
width: 100%;
z-index: 20;
}
#menu ul li {
display: list-item;
border-top: none;
}
#nav_button {
display: inline-block;
}
#menu:hover, #menu.open_nav {
width: 100%;
-webkit-user-select: none; /* описание ниже */
-moz-user-select: none; /* описание ниже */
-webkit-touch-callout: none; /* описание ниже */
}
#menu:hover ul, #menu.open_nav ul {
display: block;
margin-top: 50px;
}
}На некоторые стили обращать внимание не нужно; цвет бекграунда, размер шрифта и т.д. - это только для демонстрации. А нас должны интересовать следующие свойства с их значениями:
- display: table;
- Указывает, что элемент будет себя вести аналогично элементу <table>
- display: table-row;
- Элемент будет себя вести, как <tr>
- display: table-cell;
- Элемент будет себя вести, как <td> или <th>
- box-sizing: border-box; (и с вендорными префиксами)
- При расчетах ширины и высоты элемента, свойства width и height, будут включать в себя значения полей (padding) и границ (border). Нужно для того, чтоб избежать появления горизонтальной прокрутки, т.к. без этого свойства, при ширине меню в 100%, добавится еще и толщина border, а если есть, то и padding.
- -webkit-user-select: none; и -moz-user-select: none;
- Запрещает выделять элемент или текст. Нужно для мобильной версии, чтоб избежать неувязок, когда пользователь проводит по элементам меню, вместо того, чтобы нажать на него.
- -webkit-touch-callout: none;
- Отменяет всплытие подсказки при нажатии и удержании элемента. Работает только в Chrome и Safari. Так же, как и в предыдущем свойстве, служит для отмены нежелательных действий при работе с элементом.
- @media (медиа-запрос)
- Тема довольно обширная, но если в двух словах, то указывает браузеру, какие свойства применять для определенных типов носителей или технических характеристик устройства. В нашем случае - применять для screen (экранов мониторов) и max-width: 600px (если ширина окна браузера меньше 600px).
Самое интересное, что на этом можно было бы поставить точку, если бы мы не учитывали смартфоны, планшеты и с уверенностью сказать, что меню сделано полностью на HTML и CSS. Но придётся прибегнуть к помощи JS/jQuery, а в данном случае, раз уж решено было сделать с наименьшей нагрузкой, именно к чистому JavaScript.
var d = document,
navBut = d.getElementById('nav_button'), // кнопка включение меню
navMenu = d.getElementById('menu'); // выпадающее меню
// функция определения наличия родительского элемента по ID
function hasParent(el, sId){
while(el) {
if (el.id == sId) return true;
el = el.parentNode;
}
return false;
}
// по касанию на кнопке, добавляем класс менюшке,
// который соответствует свойству в css "#menu:hover"
// и разворачиваем меню
navBut.addEventListener('touchstart', function(e) {
e.preventDefault();
navMenu.classList.add('open_nav');
}, false);
// по касанию в документе,
// если событие не было на каком-нибудь элементе меню (определяем с помощью функции "hasParent"),
// убираем класс "open_nav" из меню, что привод к его закрытию
d.addEventListener('touchstart', function(e) {
if(!hasParent(e.target, 'menu')) navMenu.classList.remove('open_nav');
}, false);
Записываем этот код в отдельный js-файл и подключаем его в самом низу страницы, перед закрывающим тегом </body>. Теперь пару слов о кроссбраузерности... Если вы рассчитываете на Internet Explorer ниже девятой версии, то для корректной работы, нужно подключить два фиксящих скрипта внутри тега <head>:
Первый позволяет старым браузерам адекватно воспринимать теги HTML5, а второй - "медиа-запросы", с которыми они так же не дружат. Хотя, с другой стороны, такие браузеры не используются на мобильных устройствах, а тот же тег <nav> можно заменить на <div>. Поэтому использовать эти скрипты или нет - дело, конечно же, ваше личное, но я их считаю избыточными. Вот теперь меню готово к использованию на любых устройствах.
Очень часто, особенно новички, в погоне за мнимой красочностью сайта, переполняют его лишней графикой, скриптами, которые выполняя какое-то маленькое действие, весят порой больше чем вся страница. Не впадайте в крайности и задумывайтесь о тех пользователях, которые могут заходить к вам не только с разных устройств, но еще и по низкоскоростному интернет-соединению. Успехов! ;)
