Навигация на сайт со стильным эффектом анимации

/ 👁 4333

Урок о создании очень стильной анимированной навигации при помощи CSS3. Такая навигация будет выглядеть очень эффектно на любом сайте. Урок взят из журнала “Web Design”, переведен и подготовлен мною для Вас. Приятного обучения.

дополнительные материалы к урокам

демо версия урока

1. Первое, что мы сделаем – это создадим документ html. Подключим файл со стилями, который мы будем создавать в шаге 2. И между тегами body создадим див контейнера, в котором создадим ненумерованый список нашего меню. Код будет выглядеть вот так:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Стильная анимационная навигация</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<ul id="nav">
<li><a href="#" title="Click here for..."><h4>Home</h4> <span>View your favourites</span></a></li>
<li><a href="#" title="Click here for..."><h4>About Us</h4> <span>View your favourites</span></a></li>
<li><a href="#" title="Click here for..."><h4>About Company</h4> <span>View your favourites</span></a></li>
<li><a href="#" title="Click here for..."><h4>Favourite</h4> <span>View your favourites</span></a></li>
<li><a href="#" title="Click here for..."><h4>Contacts</h4> <span>View your favourites</span></a></li>
</ul>
</div>
</body>
</html>

 

2. Теперь создадим файл таблицы стилей style.css, который мы уже подключили. В этом примере я сохраняю файл стилей в том же каталоге, что и наш основной документ. Если Вы будете создавать отдельную папку под этот файл, не забудьте исправить путь при подключении файла в html-документе. Открываем созданный файл и прописываем следующие стили:

<body {background: #dedede;
	  font-size: 62.5%;
      font-family:verdana, helvetica, arial, sans-serif;}
#container {
	  width: 960px;
	  position: relative;
	  margin: auto;
		}
ul#nav {
	   position: relative;
	    float:	left;
	     margin:	0;
	     padding:0;
			}
ul#nav li {
			position: relative;
			margin:	1px 0px;
			padding: 20px 40px 20px 100px;
			list-style:	none;
			width:		180px;
			background:	#fcfcfc;
			border: 1px solid #C4C4C4;
			overflow:	hidden;
		}

 

Если сейчас сохранить изменения в файлах и запустить наш html-файл, то мы должны увидеть такую картину:

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

ul#nav li:hover {
			background: #dcebeb;
			z-index: 1000;
		}

 


4. Добавляем CSS3. Одной из замечательных возможностей в CSS3 является то, что мы можем изменять размеры, позицию элемента и угол его разворота. Давайте сделаем пункт меню, над которым находится курсор мыши, немного больше остальных и добавим ему тень. Таким образом получим эффект кнопки, выдавленной из общей панели навигации. Так наш предыдущий код преобразуется в следующий:

ul#nav li:hover {
			background: #dcebeb;
			-webkit-transform:translateY(-3px) scale(1,05);
			-webkit-box-shadow:0px 2px 7px #999;
			box-shadow:0px 2px 7px #999;
			z-index: 1000;
			}

 


5. Теперь добавим в стили для ul#nav li следующую строчку, которая поможет нам при создании автоматической анимации:
-webkit-transition: all 0.15s linear;
6. Теперь давайте ненадолго оставим нашу навигацию и вернемся в html-файл, чтобы добавить некоторые элементы страницы. Внутри дива “container” и сразу после того, как закроется наш список с меню добавим следующий код:

<div id="panel">
<!-- Здесь будет контент страницы -->
</div>
<div id="smallpanel">
</div>

 

А теперь добавим стилей новым элементам:

div#panel{margin:0 1px;
          width:560px;
		  height:477px;
		  float:left;
		  border:2px solid #cfcfcf;
		  background:#fefefe;
		  -webkit-box-shadow:0px 0px 4px #ccc;
}
div#smallpanel{
	margin: 0 1px;
	width:60px;
	height:477px;
	float:left;
	border:2px solid #cfcfcf;
	background: #efefef;
	-webkit-box-shadow: 0px 0px 4px #ccc;
	box-shadow: 0px 0px 4px #ccc;
		}

 

Вот что должно получиться:

7. Теперь скачайте из дополнительных материалов папку fonts и поместите ее в каталог, где у Вас лежат все наши файлы. В этой папке некоторые необходимые нам файлы для векторных иконок, которые мы будем подключать в следующем шаге. После этого из дополнительных материалов открывает файл cod.txt, копируем код и вставляем в наш файл со стилями.

8. Давайте на каждой кнопке разместим векторные иконки. Здесь система такая. Существует ресурс http://www.justbenicestudio.com/studio/websymbols/, открываем эту ссылку в браузере. Выбираем понравившиеся иконки и копируем их код (он находится под каждой иконкой). А потом возвращаемся в наш html-файл и там, где у нас находится навигация в каждом теге li, перед тегом <a><br /> вставляем новый див:

<div class="icon">код иконки</div>

 

Кода иконок будут разные в зависимости от иконки, которую Вы хотите в том или ином пункте.
Теперь идем в стили и прописываем следующий код из файла cod1.txt (из дополнительных материалов).

И код картинки преобразовывается в изображение:

9. Делаем анимацию для изображений при наведении на них курсора мыши. Для этого в стилях прописываем следующий код:

ul#nav li:hover .icon{
		-webkit-transform:scale(1.5);
		color:#b7480c;
	}

 


10. Анимируем заголовки пунктов меню. Для этого добавляем в наш код стилей следующие строчки:

@-webkit-keyframes slideFromTop {
			from {
				opacity: 0;
				-webkit-transform: translateY(-200%);
			}
			to {
				opacity: 1;
				-webkit-transform: translateY(0%);
			}
		}
		
		@-webkit-keyframes slideFromTop {
			from {
				opacity: 0;
				-webkit-transform: translateY(-200%);
			}
			to {
				opacity: 1;
				-webkit-transform: translateY(0%);
			}
		}
		@-moz-keyframes slideFromTop {
			from {
				opacity: 0;
				-moz-transform: translateY(-200%);
			}
			to {
				opacity: 1;
				-moz-transform: translateY(0%);
			}
		}
		@-ms-keyframes slideFromTop {
			from {
				opacity: 0;
				-ms-transform: translateY(-200%);
			}
			to {
				opacity: 1;
				-ms-transform: translateY(0%);
			}
		}
		
		@-webkit-keyframes slideFromRight {
			from {
				opacity: 0;
				-webkit-transform: translateX(200%);
			}
			to {
				opacity: 1;
				-webkit-transform: translateX(0%);
			}
		}
		@-moz-keyframes slideFromRight {
			from {<
				opacity: 0;
				-moz-transform: translateX(200%);
			}
			to {
				opacity: 1;
				-moz-transform: translateX(0%);
			}
		}
		@-ms-keyframes slideFromRight {
			from {
				opacity: 0;
				-ms-transform: translateX(200%);
			}
			to {
				opacity: 1;
				-ms-transform: translateX(0%);
			}
		}

 

Если Вы проверите в своем браузере результат, то увидите, что ничего не изменилось. Правильно, чтобы мы увидели результат, нужно добавить следующий код:

ul#nav li a h4 {
			margin:		0;
			padding:	0;
			font-size:	2.3em;
			display:	block;
			text-transform:capitalize;
			font-weight:normal;
		}
		
		ul#nav li:hover a h4 {
			-webkit-animation: slideFromTop 300ms ease-in-out;
			-moz-animation: slideFromTop 300ms ease-in-out;
			-ms-animation: slideFromTop 300ms ease-in-out;
		}
		
		ul#nav li a span {
			display:	block;
		}
		
		ul#nav li:hover a span {
			-webkit-animation: slideFromRight 300ms ease-in-out;
			-moz-animation: slideFromRight 300ms ease-in-out;
			-ms-animation: slideFromRight 300ms ease-in-out;
		}

 

Теперь можно проверять. Наша анимация прекрасно работает при наведении курсора мыши на кнопки навигации.
11. Все работает, но неплохо было бы немного приукрасить нашу страничку добавив немного текстуры для фона. Вы можете нарисовать свою текстуру или воспользоваться текстурой из дополнительных материалов к этому уроку (папка Texture graphics).
Давайте подключим это изображение в качестве внешней ссылки. Мы можем вставить ее непосредственно в CSS, экономя дополнительные вызовы сервера и увеличивая скорость отрисовки. Перейдите по адресу: http://tinyurl.com/uriconvertor и загрузите свою текстуру, чтобы преобразовать ее в base64-код:

Теперь скопируйте полученный код в буфер обмена:

12. А теперь идем в стили и для тега body прописываем скопированный url и то, что картинка должна повторяться. В итоге получается следующий код:

body {background: #dedede
url(data:image/jpeg;base64,/9j/… весь код)
repeat top left;
font-size: 62.5%;
 font-family:verdana, helvetica, arial, sans-serif;}

 

13. Точно таким же образом подключим текстуру (но уже другую) к нашей правой крайней панели (div#smallpanel). Теперь все выглядит очень стильно и красиво:

Я искренне надеюсь, что урок был Вам полезен. К сожалению, на данный момент не все браузеры одинаково поддерживают новые технологии программирования на HTML5 и CSS3. Но это лишь вопрос времени. В действительности эти технологии дают прекрасные возможности реализовать то, что раньше можно было сделать только с помощью Java Script. Поэтому изучать их несомненно имеет смысл. Если Вы хорошо знакомы с основами HTML и CSS, то понимание HTML5 и CSS3 не составит для Вас особого труда.
Удачи! До новых встреч в новых уроках.

Leave a Reply