Создаем адаптивное меню
Одной из самых сложных частей адаптивного дизайна сайта является навигация. Данная часть играет решающую роль в уровне удобства использования сайтом, так как с ее помощью посетитель перемещается по страницам.
Существует множество способов для создания адаптивной навигации, в том числе и с помощью jQuery. Но в данном уроке мы разберемся, как построить простую навигацию с нуля с помощью медиа запросов CSS3 (и небольшой вставкой jQuery) для корректного вывода меню на маленьких экранах смартфонов.
Разметка HTML
Сначала добавим тег meta viewport
в разделе head
. Данный тег требуется для нашей страницы, чтобы корректно масштабироваться на экране любого размера, особенно на мобильных устройствах.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
…а затем добавляем следующий код для навигации в тег body
.
<nav class="clearfix"> <ul class="clearfix"> <li><a href="#">Главная</a></li> <li><a href="#">Уроки</a></li> <li><a href="#">Иконки</a></li> <li><a href="#">Дизайн</a></li> <li><a href="#">Web 2.0</a></li> <li><a href="#">Инструменты</a></li> </ul> <a href="#" id="pull">Меню</a> </nav>
Мы используем шесть ссылок меню и одну дополнительную ссылку после списка. Дополнительная ссылка будет использоваться для вывода навигации, когда она будет скрываться на маленьких экранах.
Стили
Стили которые определяются в данном разделе служат только для декорации. Вы можете устанавливать цвет таким, каким хочется. Для демонстрации тег body
будет иметь мягкий, кремовый цвет.
body { background-color: #ece8e5; }
Тег nav
который определяет навигацию, будет иметь ширину 100%
окна браузера, а тег ul
, который содержит основные ссылки меню, имеет ширину 600px
.
nav { height: 40px; width: 100%; background: #455868; font-size: 11pt; font-family: 'PT Sans', Arial, sans-serif; font-weight: bold; position: relative; border-bottom: 2px solid #283744; } nav ul { padding: 0; margin: 0 auto; width: 600px; height: 40px; }
Затем смещаем ссылки меню влево, так что они будут выводиться в один ряд, but floating an element will also cause their parent collapse.
nav li { display: inline; float: left; }
Если вы посмотрите на разметку HTML, то увидите, что clearfix
добавлен в атрибуте class
для обеих тегов nav
и ul
для сбрасывания обтекания текста вокруг меню.
.clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }
Так как у нас есть шесть ссылок меню, контейнер имеет ширину 600px
, то каждая ссылка будет шириной 100px
.
nav a { color: #fff; display: inline-block; width: 100px; text-align: center; text-decoration: none; line-height: 40px; text-shadow: 1px 1px 0px #283744; }
Ссылки меню разделены рамкой справа шириной 1px
, кроме последнего пункта. Нужно изменить модель расчета границ прямоугольника box-sizing
на border-box
, чтобы сохранить размер меню 100px
.
nav li a { border-right: 1px solid #576979; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } nav li:last-child a { border-right: 0; }
Теперь меню будет иметь более светлый цвет в состояниях :hover
и :active
.
nav a:hover, nav a:active { background-color: #8c99a4; }
…а внешние ссылки будут скрыты (для экранов настольных систем).
nav a#pull { display: none; }
На данном этапе мы создали стили для меню. Но при изменении экрана браузера ничего происходить не будет. Пора переходить к следующему этапу.
Медиа запросы
Медиа запросы используются для определения того, как будут измениться стили в определенных точках при изменении размеров экрана.
Так как наша навигация изначально имеет ширину 600px
, то сначала определим стили для экранов шириной 600px
или меньше, так что данная точка будет первой точкой перелома.
На данных размерах экранах, каждая пара ссылок будет выводиться рядом, а так как ширина списка ul
равна 100%
от ширины экрана, то ссылка будет шириной 50%
.
@media screen and (max-width: 600px) { nav { height: auto; } nav ul { width: 100%; display: block; height: auto; } nav li { width: 50%; float: left; position: relative; } nav li a { border-bottom: 1px solid #576979; border-right: 1px solid #576979; } nav a { text-align: left; width: 100%; text-indent: 25px; } }
Также мы определим, как навигация будет выводиться на экранах размера 480px
или меньше (то есть во второй точке излома).
На данном размере экрана дополнительная ссылка становится видимой, и ей также придается иконка “меню” с правой стороны с помощью псевдо-элемента :after
, а основные ссылки будут скрываться для сохранения вертикального пространства на экране.
@media only screen and (max-width : 480px) { nav { border-bottom: 0; } nav ul { display: none; height: auto; } nav a#pull { display: block; background-color: #283744; width: 100%; position: relative; } nav a#pull:after { content:""; background: url('nav-icon.png') no-repeat; width: 30px; height: 30px; display: inline-block; position: absolute; right: 15px; top: 10px; } }
Когда экран становится меньше 320px
меню будет показываться вертикально сверху вниз.
@media only screen and (max-width : 320px) { nav li { display: block; float: none; width: 100%; } nav li a { border-bottom: 1px solid #576979; } }
Теперь можно изменять размер экрана. Меню будет изменяться вместе с изменением размером экран.
Выводим меню
На данном этапе меню будет скрыто и будет показываться при нажатии на ссылку "Меню". Для данного эффекта используется функция jQuery slideToggle()
.
$(function() { var pull = $('#pull'); menu = $('nav ul'); menuHeight = menu.height(); $(pull).on('click', function(e) { e.preventDefault(); menu.slideToggle(); }); });
Однако при изменении размера окна браузера сразу после того, как меню было открыто и закрыто на маленьком экране, то меню останется невидимым, так как свойство display: none
, генерируемое jQuery, еще будет присоединено к элементу.
Итак, нужно удалить данный стиль при изменении размера окна:
$(window).resize(function(){ var w = $(window).width(); if(w > 320 && menu.is(':hidden')) { menu.removeAttr('style'); } });
Наше меню завершено, смотрите демонстрационную страницу, изменяйте размер окна браузера.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/o56GgLUlGWs/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Все мы сидим в сточной канаве, но некоторые при этом смотрят на звезды Уайльд Оскар - (1854-1900) - английский писатель |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.