Создаем анимированное меню с помощью 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
|
В этом коротеньком уроке я продемонстрирую вам всю силу эффектов и переходов CSS3, которыми мы воспользуемся для создания меню, никак не зависящего от JavaScript, которое украсит ваш сайт или шаблон. |
РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 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 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Чтобы вырастить плодоносящий сайт - его полезно регулярно поливать и удобрять с помощью рекламы и оптимизации Компания "RedLine" |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их !
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Мы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!
Комплексный подход это не просто продвижение сайта, это целый комплекс мероприятий, который определяется целями и задачами поставленными перед сайтом и организацией, которая за этим стоит. Время однобоких методов в продвижении сайтов уже прошло, конкуренция слишком высока, чтобы была возможность расслабиться и получать \ удерживать клиентов из Интернета, просто сделав сайт и не занимаясь им...
Мы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.
Контекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.