Какой HTML тэг для «иконки» меню использовать правильней? И какое у этой иконки должно быть расширение?
Какой ХТМЛ тэг лучше всего использовать для элемента «лупа» и элемента «телефон»?
И как правильно называются эти элементы? Иконка, значок, эмблема, изображение, штучка? И мне никак не удается разобраться какое расширение использовать для таких элементов? ДжиПег, ПНГ или СВГ? Не могли бы вы мне в объяснить что к чему, и почему по-вашему правильно делать именно так. Спасибо, за то, что уделили мне ваше время.
2 ответа 2
Лучше конечно использовать svg так как данный формат хорошо масштабитруется и мало весит. Svg вы можете разместить например в тег div нет никаких проблем.
Иногда бывают проблемы с размещением svg файлов многие незнают как их правильно разместить. Вы можете например скачать файл phone.svg и вызвать данный файл при помощи тега img
Но при таком подходе вы не сможете изменять цвет изображения. Так как в svg еще можно менять цвет изображения. В таком случае вы можете например использовать js код который трансформировал бы тег img в тег svg. Вот этот код вы можете использовать для этих целей
Способы создания 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:
Узнайте, как создать панель с иконками, применяя CSS.
Как создать панель иконок
Шаг 1) Добавьте HTML:
Пример
Шаг 2) Добавьте CSS:
Пример по вертикали
.icon-bar <
width: 90px; /* Установите определенную ширину */
background-color: #555; /* Темно-серый фон */
>
.icon-bar a <
display: block; /* Сделайте так, чтобы ссылки отображались друг под другом, а не рядом друг с другом */
text-align: center; /* Выровнять текст по центру */
padding: 16px; /* Добавьте отступ */
transition: all 0.3s ease; /* Добавить переход для эффектов наведения */
color: white; /* Белый цвет текста */
font-size: 36px; /* Увеличенный размер шрифта */
>
.icon-bar a:hover <
background-color: #000; /* Добавьте цвет при наведении */
>
.active <
background-color: #4CAF50; /* Добавить активный / текущий цвет */
>
Пример по горизонтали
.icon-bar <
width: 100%; /* На всю ширину */
background-color: #555; /* Темно-серый фон */
overflow: auto; /* Переполнение из-за float */
>
.icon-bar a <
float: left; /* Плавающие ссылки рядом */
text-align: center; /* Выровнять текст по центру */
width: 20%; /* Равная ширина (5 иконок шириной 20% каждая = 100%) */
padding: 12px 0; /* Некоторые верхние и нижние отступы */
transition: all 0.3s ease; /* Добавить переход для эффектов наведения */
color: white; /* Белый цвет текста */
font-size: 36px; /* Увеличенный размер шрифта */
>
.icon-bar a:hover <
background-color: #000; /* Добавьте цвет при наведении */
>
.active <
background-color: #4CAF50; /* Добавить активный / текущий цвет */
>
Связанные страницы
Совет: Перейдите к учебнику CSS Панели навигации, чтобы узнать больше о панелях навигации.
Совет: Перейдите к Учебник иконок на нашем сайте W3Schools на русском, чтобы узнать больше об иконках.
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.
Создание панели значков
Шаг 1) добавить HTML:
Пример
Шаг 2) добавить CSS:
Вертикальный пример
.icon-bar <
width: 90px; /* Set a specific width */
background-color: #555; /* Dark-grey background */
>
.icon-bar a <
display: block; /* Make the links appear below each other instead of side-by-side */
text-align: center; /* Center-align text */
padding: 16px; /* Add some padding */
transition: all 0.3s ease; /* Add transition for hover effects */
color: white; /* White text color */
font-size: 36px; /* Increased font-size */
>
.icon-bar a:hover <
background-color: #000; /* Add a hover color */
>
.active <
background-color: #4CAF50; /* Add an active/current color */
>
Пример по горизонтали
.icon-bar <
width: 100%; /* Full-width */
background-color: #555; /* Dark-grey background */
overflow: auto; /* Overflow due to float */
>
.icon-bar a <
float: left; /* Float links side by side */
text-align: center; /* Center-align text */
width: 20%; /* Equal width (5 icons with 20% width each = 100%) */
padding: 12px 0; /* Some top and bottom padding */
transition: all 0.3s ease; /* Add transition for hover effects */
color: white; /* White text color */
font-size: 36px; /* Increased font size */
>
.icon-bar a:hover <
background-color: #000; /* Add a hover color */
>
.active <
background-color: #4CAF50; /* Add an active/current color */
>
Совет: Чтобы узнать больше о навигационных панелях, перейдите в наш Учебник CSS Navigation.
Совет: Перейти к нашему учебник иконок, чтобы узнать больше о иконах.