Создаем адаптивное меню
Одной из самых сложных частей адаптивного дизайна сайта является навигация. Данная часть играет решающую роль в уровне удобства использования сайтом, так как с ее помощью посетитель перемещается по страницам.
Существует множество способов для создания адаптивной навигации, в том числе и с помощью 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-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
"В будущем на рынке останется два вида компаний: те, кто в Интернет и те, кто вышел из бизнеса." |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.