Создаем адаптивное навигационное меню
Меню навигации достаточно простой элемент дизайна. Создаем неупорядоченный список, задаем ее стиль смещения влево и формируем внешний вид. Но адаптивный дизайн, который набирает популярность, выдвигает новые требования к меню.
В данном уроке мы создадим простое, но эффективное адаптивное меню, которое очень легко настроить для использования в любом проекте.
Цель урока
Включайте демонстрацию и изменяйте размер окна браузера, чтобы увидеть концепцию в действии.
Разметка HTML
Первым делом нужно построить разметку. Так как мы создаем навигационный элемент, то отличным решением будет использование элемента HTML5 nav
.
Даже такой небольшой кусочек кода может стать причиной головоной боли при тестировании. Особенно, если забыть, что HTML5 не поддерживается в IE в версиях старше 9. Для решения возникшей задачи совместимости используется скрипт html5shiv.
<!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Добавляем список
Добавим простой неупорядоченный список с восемью ссылками. Демонстрация урока очень чувствительна к количеству пунктов меню, а именно, все настройки сделаны для восьми пунктов.
<nav> <ul> <li><a href="#">RUSELLER</a></li> <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> <li><a href="#">Блог</a></li> <li><a href="#">Контакт</a></li> </ul> </nav>
Добавляем подписи
Чтобы сделать меню более интересным и полезным, добавим строчку текста под основной подписью меню. Существует множество способ решения такой простой задачи. В нашем уроке мы просто вставляем разрыв строки и и добавляем элемент small
для второй строчки. Таким образом мы можем стилизовать подпись без использования дополнительных элементов div
, классов и идентификаторов.
<nav> <ul> <li><a href="#">RUSELLER<br /> <small>Главная</small></a></li> <li><a href="#">О нас<br /> <small>Наша команда</small></a></li> <li><a href="#">Клиенты<br /> <small>Наши друзья</small></a></li> <li><a href="#">Работы<br /> <small>Наш труд</small></a></li> <li><a href="#">Аудио<br /> <small>Услыште нас</small></a></li> <li><a href="#">Скачать<br /> <small>Полезное</small></a></li> <li><a href="#">Блог<br /> <small>Прочитайте о нас</small></a></li> <li><a href="#">Контакт<br /> <small>Напишите нам</small></a></li> </ul> </nav>
Вот так будет выглядеть наше меню после проделанных операций:
Начинаем определять стили
Код CSS начнем с использования универсального селектора для сброса полей и отступов, а также назначим свойство box-sizing: border-box
всем элементам страницы. Такой шаг поможет нам просто устанавливать размеры элементов в процентах, даже при использовании рамок.
* { padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Стили контейнера
Прежде, чем приступить к определению стилей элементов, зададим набор свойств для родительского элемента. Для начала установим для него ширину 90%. Теперь наш контейнер будет растягиваться на все доступное пространство, но останется место для формирования свободной зоны в дизайне. Также установим контейнер по центру с помощью автоматического определения размеров полей.
Кроме того, установим стили для неупорядоченного списка, чтобы отказаться от использования меток.
nav { width: 90%; margin: 50px auto; } nav ul { list-style: none; overflow: hidden; }
Стили меню
Теперь приступим к определению стилей пунктов меню.
nav li a { display: block; float: left; width: 12.5%; padding: 10px; background: #444; border-right: 1px solid #fff; color: #fff; font: 700 13px/1.4 'PT Serif', Helvetica, Verdana, Arial, sans-serif; text-align: center; text-decoration: none; text-transform: uppercase; } /*МЕЛКИЙ ТЕКСТ*/ nav small { color: #aaa; font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif; text-transform: none; }
Сначала определяем форму для каждого пункта списка. Все ссылки делаем блочными элементами, смещаем их влево, задаем ширину и небольшой отступ. Получаем достаточно большой прямоугольник Ширина 12.5% получается как результат вычислений 100% / 8 (количество пунктов меню).
Затем определяем внешний вид. Устанавливаем фон и рамку.
Завершает все задание стилей для текста меню. Используется шрифт PT Serif, который можно найти на сайте Google Web Fonts.
Для подписей устанавливаем цвет, удаляем трансформацию в верхний регистр и используем шрифт Helvetica.
Изменения при наведении курсора мыши на пункт меню
При наведении курсора мыши на пункт меню, то становится более черным. Для создания дополнительного эффекта используется трансформация.
nav li a { background: #444; border-right: 1px solid #fff; color: #fff; display: block; float: left; font: 700 13px/1.4 'PT Serif', Helvetica, Verdana, Arial, sans-serif; padding: 10px; text-align: center; text-decoration: none; text-transform: uppercase; width: 12.5%; /*ТРАНСФОРМАЦИИ*/ -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -o-transition: background 0.5s ease; -ms-transition: background 0.5s ease; transition: background 0.5s ease; } /*АКТИВНОЕ СОСТОЯНИЕ*/ nav li a:hover { background: #222; }
Исправляем рамку
Теперь займемся небольшим визуальным дефектом рамки нашего меню. Каждый пункт имеет белую рамку, которая служит разделителем. Значит последний пункт не нуждается в рамке. Воспользуемся специальным псевдо-классом.
/*РАМКА ПОСЛЕДНЕГО ПУНКТА*/ nav li:last-child a { border: none; }
На рисунке ниже представлено меню на специальном сером фоне, где видно разницу между вариантами.
Делаем меню адаптивным
Данный проект является хорошим примером между резиновым и адаптивным дизайнами. Наше меню пока имеет резиновый дизайн (ширина определена в процентах), но не адаптивный. Если начать уменьшать ширину экрана, то меню превратиться в ужасную конструкцию:
Для исправления ситуации воспользуемся медиа запросами. Самый лучший способ нахождения точки приложения медиа запроса - провести тестирование.
1220px
Первые проблемы появляются при ширине около значения 1200 px. Длинный текст некоторых пунктов начинает ломаться, так как ему не хватает ширины.
Для исправления ситуации нужно изменить только размер шрифта:
@media only screen and (max-width : 1220px), only screen and (max-device-width : 1220px){ nav li a { font: 700 10px/1.4 'PT Serif', Helvetica, Verdana, Arial, sans-serif; } nav small { font: 100 10px/1 Helvetica, Verdana, Arial, sans-serif; } }
930px
Следующая точка, проявляющаяся при уменьшении размеров экрана - 930px. Здесь меню ломается сильнее.
Кроме исправления размера шрифта требуется перестроить меню в две строки.
@media only screen and (max-width : 930px), only screen and (max-device-width : 930px){ nav li a { width: 25%; border-bottom: 1px solid #fff; font: 700 11px/1.4 'PT Serif', Helvetica, Verdana, Arial, sans-serif; } nav li:last-child a, nav li:nth-child(4) a { border-right: none; } nav li:nth-child(5) a, nav li:nth-child(6) a, nav li:nth-child(7) a, nav li:nth-child(8) a { border-bottom: none; } }
580px и 320px
Двухстрочный формат работает отлично до значений ширины экрана меньше 600px, а затем также коверкается.
Здесь мы перестраиваем дизайн меню в две колонки с четырьмя строками. А для размеров экрана меньше 320px нужно также уменьшить размер шрифта.
@media only screen and (max-width : 580px), only screen and (max-device-width : 580px){ nav li a { width: 50%; font: 700 12px/1.4 'PT Serif', Helvetica, Verdana, Arial, sans-serif; padding-top: 12px; padding-bottom: 12px; } nav li:nth-child(even) a { border-right: none; } nav li:nth-child(5) a, nav li:nth-child(6) a { border-bottom: 1px solid #fff; } } @media only screen and (max-width : 320px), only screen and (max-device-width : 320px){ nav li a { font: 700 11px/1.4 'PT Serif', Helvetica, Verdana, Arial, sans-serif; } }
Теперь наше меню будет адаптироваться под размер экрана.
Заключение
Построение адаптированного дизайна достаточно трудоемкий процесс. Много времни уходит на тщательное тестирование и подбор значений.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/FIctN9a1SYk/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 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Всегда храни верность своему начальнику - следующий, может быть еще хуже... |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.