Создаём забавное меню на чистом CSS

7 июня 2012 | Опубликовано в css | 4 Комментариев »

Библиотека JQuery стала простым и лучшим способом для реализации простой анимации. JavaScript — это конечно хорошо, но CSS3 предлагает заглянуть в будущее, где основная анимация выполняется при помощи CSS и совершенно не зависит от сценария. Сегодня мы рассмотрим, как использовать CSS3 для создания веселого и необычного навигационного меню и подключить нестандартный шрифт.

Чтобы получить представление о том, что мы будем делать, взгляните на демо. Мы добавили контент, но главное в этом уроке — научиться создавать необычную навигацию.

Окончательный результат

Смотреть демо

HTML

Как и следовало ожидать, мы начнём с HTML- разметки. Не забудьте подключить HTML5 Shiv , чтобы HTML5 корректно поддерживался в IE .

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="description" content="description">

<title>Animated Navigation: Design Shack</title>

<link rel="stylesheet" media="screen" href="style.css" />

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>

<body>
</body>
</html>

Добавим простой маркированный список для нашего меню.

<ul id="nav">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Work</a></li>
	<li><a href="#">Contact</a></li>
</ul>

Основные стили

Теперь создадим файл CSS, выполним сброс стилей и добавим некоторые основные параметры.

* {
   padding: 0;
   margin: 0;
}
body {
   background: #f4f1e5;
   color: #544738;
   font-family: helvetica, sans-serif;
}

Сделаем наш список горизонтальным и добавим эффект при наведении. Сделать это можно при помощи следующего кода:

ul li {
	float: left;
	list-style: none;
	margin-right: 1em;
}

li a {
	color: #544738;
	text-decoration: none;
	float: left;
	font-size: 25px;
	padding: 12px;
}
li a:hover {
	color: #7eb9be;
}

Мы будем добавлять эффекты при наведении чуть позже. Если мы хотим нормального отображения во всех браузерах, то меню должно быть полностью функциональным без CSS3. У вас должно получиться меню, как на рисунке ниже.

Настройка шрифтов

Поскольку мы сегодня веселимся, давайте будем использовать сумасшедший шрифт. Настройка шрифтов при помощи @ font-face является непростой задачей, если вы новичок.

К счастью, Font Squirrel взяла всю эту головную боль на себя

Мы будем использовать шрифт Kulminoituva. Этот необычный 3D- рукописный шрифт идеально подходит для нашего проекта.

После того как вы загрузите шрифт, скопируйте шрифты в корневой каталог вашей страницы и добавьте следующий код CSS.

@font-face {
	font-family: 'KulminoituvaRegular';
	src: url('kulminoituva-webfont.eot');
	src: local('‚ò∫'), url('kulminoituva-webfont.woff') format('woff'), url('kulminoituva-webfont.ttf') format('truetype'), url('kulminoituva-webfont.svg#webfontHNAi9IoX') format('svg');
	font-weight: normal;
	font-style: normal;
}

Теперь установим наше семейство шрифтов для меню обычным способом.

ul li {
	float: left;
	list-style: none;
	margin-right: 1em;
	font-family: 'KulminoituvaRegular', helvetica, sans-serif;
	font-size: 25px;
	padding: 12px;
}

li a {
	color: #544738;
	text-decoration: none;
	float: left;
}
li a:hover {
	color: #7eb9be;
}

Наше навигационное меню должно выглядеть намного веселее.

Теперь у нас есть довольно приличное небольшое меню навигации. Осталось только добавить CSS3-анимацию.

Анимация в меню

Если вы посмотрите на шрифт, который мы выбрали вы увидите, что буквы наклонены вперед и назад, чтобы добавить шрифту небрежности, как будто он нарисован от руки.

Наш текст должен поворачиваться и изменять свой размер при наведении, для этого добавим следующий код:

li a:hover {
	-webkit-transform: rotate(-10deg) scale(1.2);
	-moz-transform: rotate(-10deg) scale(1.2);
	-o-transform: rotate(-10deg) scale(1.2);
}

Как вы можете видеть, мы просто применили вращение -10 градусов и небольшое масштабирование 1.2. Теперь при наведении курсора на ссылку в навигации, текст должен поворачиваться и становиться больше.

Добавим 2 различных класса для элементов списка (left и right), чтобы можно было применить отдельные эффекты вращения: первая и третья ссылки будут вращаться против часовой стрелки, а вторая и четвертая - по часовой стрелке.

<ul id="nav">
	<li class="left"><a href="#">Home</a></li>
	<li class="right"><a href="#">About</a></li>
	<li class="left"><a href="#">Work</a></li>
	<li class="right"><a href="#">Contact</a></li>
</ul>

Теперь давайте сделаем более плавным эффект перехода при наведении курсора при помощи следующего кода:

.left a:hover {
	-webkit-transform: rotate(-10deg) scale(1.2);
	-moz-transform: rotate(-10deg) scale(1.2);
	-o-transform: rotate(-10deg) scale(1.2);
}
.right a:hover {
	-webkit-transform: rotate(10deg) scale(1.2);
	-moz-transform: rotate(10deg) scale(1.2);
	-o-transform: rotate(10deg) scale(1.2);
}

Как видите, мы применили тот же переход на обоих классов.

Все Готово!

Наше навигационное меню готово. Нажмите здесь , чтобы посмотреть демо. Помните, что вы можете использовать эти методы анимации для всего, чего угодно, а не только для текста. Попробуйте создать галерею эскизов и установить свои эффекты при наведении.

По материалам designshack

Возможно, вас также заинтересуют статьи:

Опубликовано в css, июня 7, 2012
Метки: css, css3, уроки css, уроки сss3

�

Fker
1 августа 2012 в 16:30
+1

классный спецэфект для странички
Алина
17 ноября 2012 в 21:58
0

не получается отобразить шрифт. объясните пожалуйста! все эти local и url — я должна поместить туда свой загруженный файл шрифта? или оставить так как есть? но в любом случае у меня не получается...
Саня
7 января 2013 в 10:00
0

Не могу перейти к стадии анимации, пока не допру почему шрифт не применяется.... Подскажите @font-face { где надо вставлять!? в начале css файла или продолжать после первых заданных кодировок!? Еще вот что, может из за етого и не прет(((.... У вас так src: local ('‚ò∫') а у меня в редакторе вот так ('‚o?').... Думаю что из за етого, да только не знаю как исправить, копировал с сайта не помогает..... Впринципе вот все что волновало, больше вродь вопросов нет)))..... Оч буду благодарен если ответите)
hools
4 октября 2013 в 21:19
0

Шрифт работает только с латиницей(точнее эффект рукописи или 3d)
Ну а чтобы аннимация была медленнее нужно поставить
.left a:hover {
/*Transition*/
-webkit-transition:All .5s ease;
-moz-transition:All .5s ease;
-o-transition:All .5s ease;
/*Transform*/
-webkit-transform: rotate (-10deg) scale (1.2);
-moz-transform: rotate (-10deg) scale (1.2);
-o-transform: rotate (-10deg) scale (1.2);
}
.right a:hover {
/*Transition*/
-webkit-transition:All .5s ease;
-moz-transition:All .5s ease;
-o-transition:All .5s ease;
/*Transform*/
-webkit-transform: rotate (10deg) scale (1.2);
-moz-transform: rotate (10deg) scale (1.2);
-o-transform: rotate (10deg) scale (1.2);
}
ВМЕСТО ЭТОГО
.left a:hover {
-webkit-transform: rotate (-10deg) scale (1.2);
-moz-transform: rotate (-10deg) scale (1.2);
-o-transform: rotate (-10deg) scale (1.2);
}
.right a:hover {
-webkit-transform: rotate (10deg) scale (1.2);
-moz-transform: rotate (10deg) scale (1.2);
-o-transform: rotate (10deg) scale (1.2);
}
интересно как у ПЕРЕВОДЧИКА оно работало плавно с его кодом-то???????