Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создаём забавное меню на чистом 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

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




Комментарии

  1. Fker
    Thumb up Thumb down +1

    *THUMBS UP* классный спецэфект для странички

    Ответить

  2. Алина
    Thumb up Thumb down 0

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

    Ответить

  3. Саня
    Thumb up Thumb down 0

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

    Ответить

  4. hools
    Thumb up Thumb down 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);

    }

    интересно как у ПЕРЕВОДЧИКА оно работало плавно с его кодом-то???????

    Ответить

Оставить ответ


5 + = семь

Вставить изображение