Полноцветное анимированное навигационное меню на CSS3
В этой короткой статье мы создадим полноцветное выпадающее меню, используя только CSS3-эффекты и шрифтовые иконки Font Awesome. Шрифтовые иконки – это набор изображений, которые отображаются на символах вместо изображений соответствующих букв.
Поэтому такие иконки работают в любом достаточно современном браузере, который поддерживает HTML5-шрифты. Чтобы добавить иконку к элементу, нужно только включить этот элемент в соответствующий класс, а всю остальную работу сделает файл стиля awesome при помощи элемента :before.
Демонстрация
Загрузить файлы
HTML
Разметка, с которой мы будем работать:
index.html
<nav id="colorNav">
<ul>
<li class="green">
<a href="#" class="icon-home"></a>
<ul>
<li><a href="#">Dropdown item 1</a></li>
<li><a href="#">Dropdown item 2</a></li>
<!-- More dropdown options -->
</ul>
</li>
<!-- More menu items -->
</ul>
</nav>
Каждый пункт меню является элементом ненумерованного списка верхнего уровня. Каждый пункт помечен классом-иконкой. (Обратите внимание на полный список иконок и их классов). Внутри элементов списка может размещаться другой список, который отображается при наведении курсора на родительский элемент:
CSS
Как видно из разметки, наше меню состоит из списков, вложенных в такие же списки, поэтому при написании стилей нам придётся соблюдать осторожность. Нам не нужно, чтобы ниже лежащие тэги <ul>
наследовали всё оформление от выше лежащих. К счастью, именно для таких случаев в CSS существует селектор “>”:
assets/css/styles.css
#colorNav > ul{
width: 450px;
margin:0 auto;
}
Это ограничивает заданную ширину поля первым уровнем неупорядоченного списка, который является прямым наследником элемента #colorNav. С учётом этого пункты нашего меню на самом деле будут выглядеть следующим образом:
#colorNav > ul > li{ /* will style only the top level li */
list-style: none;
box-shadow: 0 0 10px rgba(100, 100, 100, 0.2) inset,1px 1px 1px #CCC;
display: inline-block;
line-height: 1;
margin: 1px;
border-radius: 3px;
position:relative;
}
Чтобы отображать пункты меню в одной строке, мы задаём свойству display значение inline-block. Чтобы выпадающие меню отображались там, где нужно, свойство position должно иметь значение relative. Определим Awesome-иконки как часть стиля ссылок:
#colorNav > ul > li > a{
color:inherit;
text-decoration:none !important;
font-size:24px;
padding: 25px;
}
Теперь перейдём к выпадающим спискам. Самое интересное здесь – CSS3-анимация. Скроем списки, присвоив их свойству maximum-height значение 0. При наведении мы будем анимировать maximum-height до большего значения, что заставит наш список постепенно открываться:
#colorNav li ul{
position:absolute;
list-style:none;
text-align:center;
width:180px;
left:50%;
margin-left:-90px;
top:70px;
font:bold 12px 'Open Sans Condensed', sans-serif;
/* This is important for the show/hide CSS animation */
max-height:0px;
overflow:hidden;
-webkit-transition:max-height 0.4s linear;
-moz-transition:max-height 0.4s linear;
transition:max-height 0.4s linear;
}
А вот – событие, запускающее анимацию:
#colorNav li:hover ul{
max-height:200px;
}
Значение в 200 пикселей здесь взято произвольно. Вы можете увеличить его, если какие-то из ваших меню получились длиннее. К сожалению, не существует способа определить высоту блока средствами CSS, поэтому нам остаётся только жёстко задать определённое значение.
Следующий шаг – оформление элементов выпадающего меню:
#colorNav li ul li{
background-color:#313131;
}
#colorNav li ul li a{
padding:12px;
color:#fff !important;
text-decoration:none !important;
display:block;
}
#colorNav li ul li:nth-child(odd){ /* zebra stripes */
background-color:#363636;
}
#colorNav li ul li:hover{
background-color:#444;
}
#colorNav li ul li:first-child{
border-radius:3px 3px 0 0;
margin-top:25px;
position:relative;
}
#colorNav li ul li:first-child:before{ /* the pointer tip */
content:'';
position:absolute;
width:1px;
height:1px;
border:5px solid transparent;
border-bottom-color:#313131;
left:50%;
top:-10px;
margin-left:-5px;
}
#colorNav li ul li:last-child{
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
}
Разумеется, наше меню потеряет смысл, если нельзя будет играть с цветами элементов так, как мы захотим! Вот 5 вариантов:
#colorNav li.green{
/* This is the color of the menu item */
background-color:#00c08b;
/* This is the color of the icon */
color:#127a5d;
}
#colorNav li.red{ background-color:#ea5080;color:#aa2a52;}
#colorNav li.blue{ background-color:#53bfe2;color:#2884a2;}
#colorNav li.yellow{ background-color:#f8c54d;color:#ab8426;}
#colorNav li.purple{ background-color:#df6dc2;color:#9f3c85;}
Одно из удобств использования шрифтовых иконок состоит в том, что мы можем менять цвет иконки, просто задав атрибут color. Это означает, что вся настройка меню может быть выполнена исключительно средствами CSS.
Готово!
Шрифтовые иконки – отличное дополнение к набору повседневных инструментов любого веб-разработчика. Иконки являются символами, следовательно, мы можем применять к ним font-size, color, text-shadow и другие текстовые атрибуты.
А поскольку благодаря шрифтовым иконкам наш пример обошёлся без использования файлов изображений или скриптов, вы с лёгкостью сможете адаптировать его к дизайну любого существующего сайта.
Перевод статьи «Colorful CSS3 Animated Navigation Menu» был подготовлен дружной командой проекта Сайтостроение от А до Я.
Источник: http://feedproxy.google.com/~r/3wdev/~3/5YPw3Gr8hwM/article_2057.html
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 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 контейнере
Гораздо больше людей сдавшихся, чем побежденных. |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.