Современное CSS3 меню + мобильная версия! | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSСовременное CSS3 меню + мобильная версия!
Дата: 10.05.2013 в 11:45 | Просмотров: 9888

Современное CSS3 меню + мобильная версия!

css3 меню, красивое горизонтальное меню
Скачатьбесплатно с сервера
Демодемонстрация

Сегодня мы будем создавать красочные CSS3 меню в цветовом стиле Maliwan. Главная особенность этого современного меню, состоит в том, что оно автоматически меняется на одну из трех версий в зависимости от размера окна браузера: версия по умолчанию для больших экранов, версия для планшетов в две колонки и мобильная версия меню со ссылкой отображения и скрытия навигации для небольших экранов. Также есть ещё выдвигающееся меню, которое можно увидеть в статье “Выдвигающееся меню навигации на JQuery”.

Чтобы сделать меню полностью практичным, мы будем использовать в качестве иконок шрифт, поэтому с ними проблем не будет, они будут отлично изменяться под версию меню.

Пожалуйста, обратите внимание: некоторые эффекты работают только в браузерах, которые поддерживают соответствующие свойства CSS3.

Подготовка иконок для шрифта

Создание собственного шрифта иконок может показаться сложным, но с такими инструментами, как IcoMoon это просто вопрос создания икон. Шрифт иконок ведет себя как любой обычный шрифт, так что вы можете легко изменить его цвет, адаптировать размер. Идеально подходит для мобильных устройств, без необходимости использовать несколько свойств для разных разрешений экрана.

Первое, что нам нужно сделать, это создать иконки для меню. Я использую иллюстратор, но любой другой векторной редактор графики, например, Inkscape, также подойдет. Нам нужно создать значки и экспортировать их в виде файлов SVG. Чтобы убедиться, что значок будет правильно работать во всех браузерах, мы должны преобразовать все строки в объект и объединить все объекты в одну большую форму для каждой иконки. После того как мы имеем SVG файлы, мы можем импортировать их в инструмент App IcoMoon:

импорт в icomoon

Мы также можем расширить количество иконок нашего шрифта, используя подборку, которую предлагает IcoMoon. После того как у нас есть все необходимые иконки, мы нажимаем на кнопку "FONT→" в нижней части страницы, чтобы войти в подробные настройки. На этой странице мы можем выбрать параметры кодирования для шрифта, а также выбрать, если мы хотим назначить свои буквы, слова для вывода иконок. Я рекомендую использовать параметры по умолчанию, всё работает отлично.

создание шрифта

Когда мы нажимаем на кнопку "Download", мы получаем ZIP файл и 4 формата шрифтов (SVG, EOT, TTF и WOFF), стили CSS и демонстрационную страницу.

Первое, что нужно сделать, чтобы шрифты работали, это подключить все необходимое, а также скопировать папку шрифтов. Там также нужно немного “допилить” его, чтобы шрифты хорошо выглядели на Chrome ОС Windows. В общем получится у Вас что-то вроде этого:

Но Вы естественно используете свои пути к шрифтам и так далее, в общем с этим, я думаю, понятно.

Начинаем работу с HTML

Структура html для меню будет выглядеть следующим образом:

Для активации шрифта иконок мы просто используем класс icon-iconname внутри элемента i . Также обратите внимание, что мы добавили класс no-js, но он будет изменен на js с помощью Modernizr. Идея состоит в том, чтобы иметь возможность доступным меню, если пользователь отключил JavaScript. Мы будем также использовать Modernizr для обнаружения сенсорной поддержки.

Прелести CSS и JAVASCRIPT

Глобальные CSS стили, которые будут применяться для всех размеров экрана выглядят следующим образом:

Мы хотим чтобы при наведении на один из пунктов меню, он выдвигался немного вниз, а остальные немного затемнялись.

Далее мы хотим добавить интересные цвета фона для всех элементов. Приведенный ниже код использует nth-child технику для выбора элементов списка. Таким образом, вы можете добавлять много элементов списка и при этом цветовой код будет повторятся.

Использование min-width, будет ориентироваться на экраны, которые больше, чем 800px (50em, с размером шрифта 15px) для преобразования нашего списка в современное горизонтальное меню навигации:

Мы продолжаем работу над nth-child техникой, и добавим 4px border-bottom. Мы применяем его при наведении курсора мыши, при фокусе и активации, чтобы заставить его работать на сенсорных устройствах.

Затем мы размещали иконки и текст:

Также мы используем эффект анимации при наведении и немного увеличиваем высоту элемента.

Теперь мы позиционируем иконки и подготавливаем их к CSS transition:

Чтобы задать визуальный эффект, мы изменяем размер тени с 0.8em до 0, а его цвет от прозрачного до цвета с высокой непрозрачностью.

Мы устанавливаем второй запрос media-jquery, чтобы сделать небольшую корректировку для экранов от 800px до 980px:

Мобильная версия меню, для планшетов и мобильных устройств

Теперь, когда мы закончили с обычными настольными версиями (в том числе и для планшетов, с разрешением 1024px и более), мы продумаем “глобальные” CSS стили для экранов, которые меньше 800px, что составляет 49.938em, используя max-width.

Для размеров экрана между 520px (32.5em) и 799px (49.938em), мы показываем наше меню в 2 столбца и 3 строки. Мы добавили немного отступа padding, чтобы сделать его юзабельным, и отображения иконок слева, а текста справа.

Анимация, которую мы сделали для больших экранов, слишком сложна, чтобы вписаться в небольшое разрешение, поэтому мы адаптируем его и сделаем более простым, более сдержанным, но добавим креативности с помощью border.

Опять же, для небольших экранов мы адаптируем размер шрифта и ширину.

Для очень маленьких экранов, мы прячем навигацию и отображаем кнопку "Меню". Пользователь может нажать, если он хочет отобразить и увидеть меню. Чтобы сделать это, мы опираемся на несколько строк JavaScript:

Для того чтобы иметь более чистый HTML, я решил создать кнопку “Меню” и вставить её с использованием JavaScript. Функция changeClass служит нам для переключения между активными классами, когда пользователь нажимает на кнопку.

Теперь у нас есть все, что нужно для малых экранов. Следующие стили код кнопки меню:

По умолчанию, кнопка меню скрыта. Мы хотим отображать её только для экранов, размером не более 519px (32.438em):

Мы анимируем высоту навигации, когда кнопка нажата. Для закрытия навигации, мы даем ему высоту 0em, а чтобы открыть его, мы даем max-height 30em. Если JavaScript не включен, мы кнопку не отображаем, а просто используем класс no-js, для постоянного отображение меню.

Когда JavaScript на стороне пользователя включен, по умолчанию мы скрываем меню, и показываем его, когда пользователь нажимает на кнопку, которая затем получает active класс:

Мы адаптируем навигацию для небольших экранов, представляя её списком со значком слева и текстом с правой стороны:

Мы также добавляем 8px границы border слева от каждого элемента, с ярким цветом:

Навигация выглядит хорошо при тестировании на больших экранах. Но на мобильных устройствах, элементы меню могут быть не эффективны, точнее не юзабельны. Использование Modernizr поможет обнаружить сенсорное устройство. Если устройство имеет сенсор, то мы добавляем класс touch. Мы можем использовать этот класс для повышения точности нажатия, чтобы пользователь мог легко нажать на выбранный пункт меню. И вот мы закрываем последний media запрос.

И это все, что было необходимо для создания приятного, современного меню, которое будет отлично работать как на настольных компьютерах, так и на планшетах и мобильных устройствах с маленьким разрешением экрана. Надеюсь Вам понравилось!


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tympanus.net/codrops
Перевел: Владислав Бондаренко


Добавить комментарий