html код значка меню
Способы создания navicon
Navicon — это иконка для появляющегося меню на адаптивных сайтах при просмотре на мобильных устройствах. Обычно представляет собой три горизонтальный полоски. Пример можно видеть на множестве сайтов, например:
Существует несколько способов создания такой иконки. Ниже представлены несколько.
Растровая картинка
Конечно это самый простой способ — просто нарисовать три полоски в любом графическом редакторе и установить ее в качестве кнопки. Но такое решение имеет очевидный недостаток растровых изображений — это ухудшение качества при масштабировании.
Twitter Bootstrap
Этот незаменимый CSS-фреймворк может помочь и с созданием navicon для сайта, такая иконка уже есть в стандартной сборке:
Иконочный шрифт
Существуют иконочные шрифты, в которые включена иконка navicon. Вот некоторые из них: Font Awesome и EnTypo. Предназначены они для обозначения совсем других вещей (например списков), но выглядят именно как navicon. Кроме того можно использовать такие инструменты, как IcoMoon для создания собственного иконочного шрифта.
Trigram For Heaven
Существует unicode-символ, выглядящий в точности как navicon, он называется «Trigram For Heaven». Вот он:
И вызывается так: #9776; (перед # необходимо поставить &).
Если правильно подобрать шрифт, то может получиться очень симпатичный navicon.
Navicon можно сделать и на чистом CSS, способы Tim Kadlec и Stu Robson.
Еще один способ — это использование SVG. Для кроссбраузерности можно использовать Modernizr:
Иконки из символов
Кодировка UTF-8 позволяет не только одновременно вставлять текст на нескольких языках, но и добавлять разные символы, которые с успехом могут применяться как элементы дизайна, а также вместо некоторых изображений. Вот какие плюсы это сулит:
К минусам можно отнести малый набор символов для оформления, они могут чуть отличаться по своему виду в разных операционных системах, их нельзя отредактировать и они одноцветные.
Вставка символов
Поскольку мы имеем дело с UTF-8, то копирование и вставка символа в код весьма упрощается. Достаточно найти программу, которая отображает нужные символы, скопировать понравившийся и напрямую вставить его в текстовый редактор. В Windows можно использовать программу «Таблица символов», окно которой показано на рис. 1.
Рис. 1. Таблица символов
Вид символов сильно зависит от выбранного шрифта, поэтому ставьте тот, который будете использовать в дальнейшем на странице. На рис. 1, в частности, показан шрифт Arial.
В редакторе Libre Office, как и в Open Office вставка символа делается через меню Вставка > Специальные символы (рис. 2).
Рис. 2. Специальные символы в Libre Office
В окне следует выбрать символ и нажать кнопку ОК, тогда символ вставится в редактируемый текст, откуда его можно будет скопировать и вставить уже в HTML-код.
Также существуют специальные сайты, предоставляющие набор символов. Мне понравился сайт www.utf8icons.com (рис. 3), ничего лишнего, символы сгруппированы по темам, каждый символ показан в трёх размерах и приводится вид для разных шрифтов (рис. 4).
Рис. 3. Главная страница utf8icons.com
Рис. 4. Описание выбранного символа
Пример 1. Верхнее меню
Результат данного примера показан на рис. 5.
Рис. 5. Меню с иконками
Дизайн иконок
Пример 2. Стиль для смены цвета фона и текста
Пример 3. Свечение вокруг текста
Чтобы свечение было более заметным, мне пришлось три раза повторить параметры тени.
Ну, и не забываем про модную нынче анимацию и заставляем наши иконки весело вращаться и плавно менять цвет (пример 4).
Пример 4. Анимация при наведении
В общем, поведение и дизайн таких иконок зависит практически только от вашей фантазии.
WebComplex – самостоятельное создание сайтов
Все о самостоятельном создании сайта
CSS3 Иконка меню с анимацией
Сегодня мы разберем, как создать иконки на чистом HTML и CSS3. Добавим к ним, с помощью jQuery, красивую анимацию при смене класса.
Создание иконки меню на чистом HTML и CSS
Для начала создадим иконку меню, она из себя представляет три коротких горизонтальных блока с равным расстоянием между ними.
В HTML верстке мы создадим контейнер для иконки в виде ссылки, а в ней создадим блок span, который будет отвечать за вывод самой иконки.
Теперь напишем стили для иконки меню, т.к. блок span отвечает за вывод иконки, а она состоит из трех блоков, нам на помощь придут псевдо-элементы :before и :after.
Добавление анимации в CSS3 иконку
Теперь нам нужно сделать перевоплощение CSS3 иконки, чтобы при нажатии на нее блоки складывались в крестик.
Событие нажатия на иконку мы обработаем скриптом и после нажатия будем добавлять добавлять/удалять класс active к блоку #nav-toggle. Поможет нам в этом jQuery:
Учитывая, что иконка меню состоит из трех блоков, то центральный блок мы сделаем прозрачным сразу после нажатия на иконку, а остальные развернем под углом в 45 градусов, чтобы они собой образовали иконку в виде крестика. Для того чтобы реализовать все задуманное, нам понадобится код CSS3:
В результате у нас получается весьма забавное перевоплощение и красивые иконки с анимацией:
Просмотреть демо пример и скачать архив с исходниками вы можете по ссылкам ниже:
Если у вас остались вопросы, пишите их в комментариях к посту, буду рад ответить 😉
5 thoughts on “ CSS3 Иконка меню с анимацией ”
Спасибо.
А не подскажете, как привязать выпадающее меню к событию нажатия иконки?
Давно видел такую фишку на другом сайте, а тут реализация!
Большое спасибо.
Создать значок меню на чистом CSS
При разработке минимальных веб сайтов, вам не нужно загружать или больше всего прописывать шрифтовые иконки, такие как Font Awesome или дополнительные изображения, чтобы создать один маленький значок. Лучше всего использовать значок меню только для CSS, чтоб не было лишних запросов на него.
.damirunesa <
position: relative;
display: inline-block;
width: 1.25em;
height: 0.8em;
margin-right: 0.3em;
border-top: 0.2em solid #0000cc;
border-bottom: 0.2em solid #0000cc;
>
.damirunesa:before <
content: «»;
position: absolute;
top: 0.3em;
left: 0px;
width: 100%;
border-top: 0.2em solid #0000cc;
>
Как вы можете видеть, здесь используется em вместо px чтобы нарисованное меню было масштабируемо относительно размера шрифта. После того как установлен CSS, остается поместить по месту HTML фрагмент, где в стилях у вас будет возможность выставить оттенок цвета.
Стили CSS, что будем писать для создания нашего меню, также будет поддерживаться многими старыми браузерами, и поэтому это лучший вариант, чем использовать SVG, которые обычно не поддерживаются старыми браузерами и требуют дополнительных методов резервного копирования.
Какой HTML тэг для «иконки» меню использовать правильней? И какое у этой иконки должно быть расширение?
Какой ХТМЛ тэг лучше всего использовать для элемента «лупа» и элемента «телефон»?
И как правильно называются эти элементы? Иконка, значок, эмблема, изображение, штучка? И мне никак не удается разобраться какое расширение использовать для таких элементов? ДжиПег, ПНГ или СВГ? Не могли бы вы мне в объяснить что к чему, и почему по-вашему правильно делать именно так. Спасибо, за то, что уделили мне ваше время.
2 ответа 2
Лучше конечно использовать svg так как данный формат хорошо масштабитруется и мало весит. Svg вы можете разместить например в тег div нет никаких проблем.
Иногда бывают проблемы с размещением svg файлов многие незнают как их правильно разместить. Вы можете например скачать файл phone.svg и вызвать данный файл при помощи тега img
Но при таком подходе вы не сможете изменять цвет изображения. Так как в svg еще можно менять цвет изображения. В таком случае вы можете например использовать js код который трансформировал бы тег img в тег svg. Вот этот код вы можете использовать для этих целей