Создаем анимированное меню с помощью CSS3
В этом коротеньком уроке я продемонстрирую вам всю силу эффектов и переходов CSS3, которыми мы воспользуемся для создания меню, никак не зависящего от JavaScript, которое украсит ваш сайт или шаблон. Мы воспользуемся такими клевыми свойствами CSS3, как псевдо-селектор :target и элемент :after.
HTML
Во-первых, создадим каркас сайта. Мы будем широко применять HTML5, поэтому для IE добавьте этот специальный скрипт в заголовке страницы (<head>). Так как он заключен в условные комментарии, он никак не повлияет на отображение в других браузерах, кроме IE.
index.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS3 Animated Navigation Menu | Tutorialzine Demo</title> <!-- файл со стилями CSS --> <link rel="stylesheet" href="/assets/css/styles.css" /> <!-- подключаем шрифт Lobster из Google Font Directory --> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" /> <!-- блокируем использование HTML5 для Internet Explorer --> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <header> <h1>CSS3 Animated Navigation Menu</h1> <h2>« Read and download on Tutorialzine</h2> </header> <nav> <ul class="fancyNav"> <li id="home"><a href="#home" class="homeIcon">Home</a></li> <li id="news"><a href="#news">News</a></li> <li id="about"><a href="#about">About us</a></li> <li id="services"><a href="#services">Services</a></li> <li id="contact"><a href="#contact">Contact us</a></li> </ul> </nav> <footer>Looks best in Firefox 4, usable everywhere.</footer> </body> </html>
Вы, наверное, заметили, что мы подключили стиль CSS от Google API. Он включает объявление @font-face и шрифт Lobster из директории гугловских шрифтов, чье количество уже превысило 100, причем все они бесплатны.
В теле документа у нас три элемента HTML5: header, nav и footer, которые делят документ на три логические части. Сконцентрируемся на элементе nav, куда мы поместим список ul. Это и будет наше меню.
К нашему ненумерованному списку применим класс fancyNav, который мы будем использовать для лимитирования эффектов CSS стилей, которые мы сейчас напишем. Это сделает код более мобильным и не даст каким-то лишним стилям повлиять на отображение нашего меню. Обратите внимание на еще одну очень важную вещь: у каждого элемента списка (li) - свой уникальный ID, на каждый из которого будут ссылаться ссылки внутри элементов списка. Это не даст нам использовать псевдо-класс :target для стилизации текущего элемента меню.
Давайте теперь перейдем к стилям CSS.
CSS
Вы, наверное, удивились тому, что мы не используем изображения в нашем меню, кроме изображения домика - прозрачный png. Мы все сделаем с помощью градиентов, теней и разных фонов.
Что касается поддержки браузерами, то меню работает в последних версиях Firefox, Chrome, Safari и Opera, и в то же время в IE старше 7ой версии. Тем не менее лучше всего меню отображается в Firefox 4, так как он поддерживает анимирующие псевдо-элементы :before и :after через свойство transition (в других браузерах такого пока нет).
Наши CSS стили помещены в assets/styles.css. Предлагаю вам теперь загрузить файл со стилями и открыть его в текстовом редакторе. Для начала рассмотрим стили, касающиеся только самого меню, поэтому я кое-что буду пропускать.
Давайте начнем украшать наше меню! Сначала напишем стили для ненумерованного списка с классом fancyNav и для элементов этого списка:
.fancyNav{ /* для списка UL */ overflow: hidden; display: inline-block; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; box-shadow: 0 0 4px rgba(255, 255, 255, 0.6); -moz-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6); -webkit-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6); } .fancyNav li{ /* цвета и градиенты CSS3, поддерживаемые большинством браузеров */ background-color: #f0f0f0; background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6)); background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%); background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%); background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%); background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%); border-right: 1px solid rgba(9, 9, 9, 0.125); /* добавляем 1px тени для сглаживания: */ box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset; -moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset; -webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset; position:relative; float: left; list-style: none; }
Обратите внимание на огромный список градиентов. Все новые версии Firefox, Chrome и Safari поддерживают все градиенты. Это же касается Opera и IE 10. Сначала было два конфликтующих синтаксиса, для Firefox и для браузеров Webkit (Chrome и Safari), но Firefox принял стандартный синтаксис написания градиентов.
Следующим шагом будет создание тени с помощью псевдо-элемента :after. Эти тени будут отображаться при наведении курсора.
.fancyNav li:after{ /* создаем псевдо-элемент внутри каждого элемента LI */ content:'.'; text-indent:-9999px; overflow:hidden; position:absolute; width:100%; height:100%; top:0; left:0; z-index:1; opacity:0; /* градиенты! */ background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5))); background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5)); background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5)); background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5)); background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5)); /* создание рамок с помощью box-shadow. это полезно, так как никак не влияет на размер самого элемента. */ box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff; -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff; -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff; /* плавный переход для свойства opacity */ -moz-transition:0.25s all; -webkit-transition:0.25s all; -o-transition:0.25s all; transition:0.25s all; }
С помощью элемента :after можно создавать очень стильные вещи. У него есть плавный горизонтальный градиент, который отображается при наведении курсора. По умолчанию градиент невидимый, с помощью CSS3 переходов мы анимируем его отображение, задавая значение свойства opacity от 0 до максимума, при наведении курсора. К сожалению, на данный момент только Firefox поддерживает анимацию псевдо-элементов, но остальные браузеры вот-вот добавят это свойство.
С помощью псевдо-элементов :first-child и :last-child мы зададим отдельные стили для первого и последнего пунктов меню.
/* для первого LI и li:after элемента отдельно */ .fancyNav li:first-child{ border-radius: 4px 0 0 4px; } .fancyNav li:first-child:after, .fancyNav li.selected:first-child:after{ box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff; -moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff; -webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff; border-radius:4px 0 0 4px; } .fancyNav li:last-child{ border-radius: 0 4px 4px 0; } /* для последнего LI и li:after элементов */ .fancyNav li:last-child:after, .fancyNav li.selected:last-child:after{ box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff; -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff; -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff; border-radius:0 4px 4px 0; } .fancyNav li:hover:after, .fancyNav li.selected:after, .fancyNav li:target:after{ /* это запустит CSS3 переходы */ opacity:1; }
Очень важно задать для последнего и первого пункта меню отдельные стили, так как нам совсем не нужно отображать за пределами всего меню уродливые рамки и тому подобное. Мы также закруглим необходимые края этих элементов.
На заметку: вы можете добавить одному из элементов списка class=”selected”, чтобы он по умолчанию был выбран. Это полезно при создании шаблонов.
После этого нам нужно подкорректировать немножко наше меню. Спрячем текущий элемент при повторном наведении курсора на меню:
.fancyNav:hover li.selected:after, .fancyNav:hover li:target:after{ /* прячет li при наведении на весь список UL */ opacity:0; } .fancyNav li.selected:hover:after, .fancyNav li:target:hover:after{ opacity:1 !important; }
Все, что осталось сделать, - это стилизовать ссылки, заключенные в элементы списка:
/* стилизация ссылок */ .fancyNav li a{ color: #5d5d5d; display: inline-block; font: 20px/1 Lobster,Arial,sans-serif; padding: 12px 35px 14px; position: relative; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6); z-index:2; text-decoration:none !important; white-space:nowrap; } .fancyNav a.homeIcon{ background:url('../img/home.png') no-repeat center center; display: block; overflow: hidden; padding-left: 12px; padding-right: 12px; text-indent: -9999px; width: 16px; }
На этом всё.
Итоги
Создавая меню при помощи одного только CSS дает вам кучу возможностей. Вы сможете управлять каждым элементом дизайна, просто сменой цветов или шрифтов. Единственная сложность в написании такого кода заключается в том, что для каждого браузера необходимо предусматривать отдельные случаи. Но вскоре это останется в прошлом.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/lQDe40wk6nQ/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 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 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
- 2024-05-27 » Подборка сервисов для расшифровки аудио в текст
- 2024-05-27 » PostgreSQL 16. Изоляция транзакций. Часть 2
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
Секрет быть несчастным: иметь время занудствовать на тему, счастлив ты или нет Шоу Джордж Бернард - (1856-1950) - английский писатель. В своем творчестве ниспровергал догматизм и предвзятость, традиционность представлений |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.