Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы HTML/CSS

Урок 24. Создание анимации, сложная нумерация, статичное и выпадающее меню для сайта

Содержание курса

Создание анимации через CSS

Для создания анимации в CSS для нужного объекта задаём имя анимации - animation-name, для которой затем описывается директива @keyframes, задаём время анимации - animation-duration (например 4.2 секунды - 4.2s).

Свойство transform, появившееся в CSS3, позволяет вращать, изменять форму, размер и положение элементов веб страницы. Здесь мы немного его коснёмся, а подробнее будем разбирать в следующих уроках. Если вам нужна вся информация сейчас, используйте поиск по этому свойству, вверху страницы.

Значение rotate() свойства transform поворачивает элемент на указанное число градусов, например body {transform: rotate(98deg);} - повернёт элемент <body> на 98 градусов.
scale() - масштабирование элемента, к примеру: transform: scale(0.5, 0.5) - уменьшение высоты и ширины элемента в 2 раза.
translate() сдвигает элемент на заданное значение по горизонтали и вертикали

Свойство animation-delay - задаёт задержку анимации, например animation-delay5s; - анимация начнёт выполняться через 5 секунд.

Свойство animation-iteration-count - задаёт количество повторений анимации, например animation-iteration-count10; - анимация повторится 10 раз. Значение infinite задаёт бесконечное повторение анимации.

Для директивы @keyframes зададим правилa
0% {transform: rotate(0deg);}
0% {transform: rotate(360deg);}
- здесь мы разбиваем время анимации на отдельные элементы анимации. В начальной точке времени - 0% - мы указали нулевой поворот, в конечной точке времени -100% - полный поворот.

animation-timing-function - алгоритм выполнения анимации - как будет выполняться анимация в заданном временном промежутке. По умолчанию выставлено значение easy - плавно начинается, разгоняется и плавно заканчивается. animation-timing-function: linear - линейный алгоритм - анимация будет выполняться равномерно на всем временном интервале.

Различные типы анимации реализованы в примере ниже:

<!DOCTYPE html>
	<html>
		<head>
			<title>Анимация через CSS</title>
			<style>
			
				html {
					background: #fff;
					color: #000; 
					font-size: 100%;
					}
			
				#box {
					width: 700px;
					height: 350px; 
					background: url(/images/sq_1.png);
					position: relative;
					border: 5px solid #00f;
					overflow: hidden;
					}
					 
				#sq_2 {
					width: 74px;
					height: 56px; 
					background: url(/images/sq_2.png);
					position: absolute; 
					animation-name: s; 
					animation-duration: 4.2s; 
					animation-iteration-count: infinite;
					animation-timing-function: linear;
						}
					
				@keyframes s {
					0% {
						background: green;
						}
					100% {
						background: red;
						}
					} /*плавное изменение цвета*/
					
				#cr_1 {
					width: 78px;
					height: 79px; 
					background: url(/images/cr_1.png); 
					position: absolute;
					left: 250px; 
					top: 200px; 
					animation-name: w; 
					animation-duration: 4.2s;
					animation-iteration-count: infinite;
					animation-timing-function: linear;
						}   /*задали имя, время, алгоритм 
						выполнения и количество повторений 
						анимации*/
					
				@keyframes w {
					0% {
						transform: rotate(0deg);
						}
						
					100% {
						transform: rotate(360deg);
						}
					}
					
				#mn_1 {
					width: 82px;
					height: 80px; 
					background: url(/images/mn_1.png);
					position: absolute;
					left: 750px;
					top: 100px; 
					animation-name: w1; 
					animation-duration: 3.2s;
					animation-iteration-count: infinite;
					animation-timing-function: linear;
					transform: scale(0.8, 0.8);
						}
					
				@keyframes w1 {
					0% {
						left: -150px;
						}
					50% {
						transform: rotate(90deg);
						} /*на этом отрезке 
					времени элемент поворачивается на 90 градусов*/
					80% {
						transform: translate(150px, 220px);
						} /*translate 
					сдвигает элемент на заданное значение по 
					горизонтали и вертикали*/
					100% {
						left: -150;
						}
					}
					
				#zv_1 {
					width: 73px;
					height: 68px; 
					background: url(/images/zv_1.png);
					position: absolute;
					left: 450px;
					top: 30px;
					animation-name: w2; 
					animation-duration: 2.2s;
					animation-iteration-count: infinite; 
					animation-timing-function: linear;
					}
					
				@keyframes w2 {
					0% {
						opacity: 0.1;
						}
					100% {
						opacity: 1;
						}
					} /*плавное изменение прозрачности*/
					
			</style>
		</head>
		<body>
		<div id="box">
			
			<div id="sq_2"></div>
			<div id="sq_3"></div>
			<div id="cr_1"></div>
			<div id="mn_1"></div>
			<div id="zv_1"></div>
			
		</div>
		</body>
	</html>
Результат:показать/скрыть

Генерируемое содержание и автоматическая нумерация

Рассмотрим построение сложного списка с подпунктами (1.1, 1.2 и т.д.). Конечно, если список статичный, то сложную нумерацию с подпунктами, наверное, проще сделать вручную, но что если список постоянно обновляется и элементы в нём то исчезают, то появляются новые где-то в середине? Тогда вручную перенумеровывать весь список довольно муторная задача.

Свойства автоматической нумерации:
counter-reset - инициализация счетчика (работает с 9-го IE);
content: значения counter, counters;
counter-increment - увеличение счётчика.

Для родителя задаётся свойство counter-reset - инициализация счётчика, которой присваивается название, а у детей с помощью элемента before, свойства content и директивы counter() создаётся счётчик и далее content-increment его увеличивает.

Пример:
body {counter-reset: w;}
h2:before {content: 'Глава' counter(w, decimal) '.'; content-increment: w}

Помимо 'decimal' - арабские цифры - можно указать и другие значение, подробнее об этих значениях.

Код сложного списка реализован в примере ниже:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Сложная нумерация</title>
			<style>
			
				#ul {
					counter-reset: w;
					} /*создали и обнулили счётчик*/
				
				#ul div {
					margin: 0 0 0 40px;
					}
				
				#ul div:before {
					 /*создаём значение  и увеличение счётчика для родителей*/
					content: counter(w, decimal) '. '; 
					counter-increment: w;
					 /*теперь создаём второй счётчик для вложенных элементов*/
					counter-reset: w2;
					}
				
				#ul span {
					display: block;
					margin: 0 0 0 30px;
					}
				
				#ul span:before {
					content: counter(w, decimal) '. ' counter(w2, decimal) ' '; 
					counter-increment: w2;
					}
				
				/*Второй список*/
				
				ol{
					counter-reset: q; 
					list-style: none;
					}
				
				ol li:before {
					content: counters(q, '. ', decimal) ' '; 
				counter-increment: q;
				} 
				/*при помощи значения counters создали трёхуровневый список 
				одним счётчиком	*/
				
			</style>
		</head>
		<body>
		
		<h2>Двухуровневый список</h2>
		
			<div id="ul">
				<div>Глава
					<span>Раздел</span>
					<span>Раздел</span>
				</div>
				<div>Глава
					<span>Раздел</span>
					<span>Раздел</span>
					<span>Раздел</span>
					<span>Раздел</span>
				</div>
			</div>
			
			<h2>Трёхуровневый список</h2>
			
			<ol>
			<li>Глава
				<ol>
					<li>Раздел
						<ol>
							<li>Параграф</li>
							<li>Параграф</li>
						</ol>
					</li>
					<li>Раздел</li>
				</ol>
			</li>
			<li>Глава
				<ol>
					<li>Раздел
						<ol>
							<li>Параграф</li>
							<li>Параграф</li>
							<li>Параграф</li>
							<li>Параграф</li>
						</ol>
					</li>
				</ol>
			</li>
			</ol>
		</body>
	</html>

Меню для сайта

Рассмотрим код заготовки меню для сайта. HTML-код довольно простой - DIV, внутри которого расположены элементы маркированного списка. При помощи CSS делаем горизонтальное прижатое влево меню сайта:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Меню для сайта</title>
			<style>
			
				#menu {
					width: 800px; 
					height: 200px;
					margin: auto; 
					background: #ccf;
					}
					
				#menu ul {
					list-style: none;
					padding: 0;
					}
					
				#menu li {
					float: left;
					}
				
				#menu li a {
					background: #fc0;
					height: 50px;
					display: block; 
					padding: 0 15px;
					line-height: 50px;
					color: #7F00FF; 
					text-decoration: none; 
					 /*underline - подчёркивание*/
					}
					
				#menu a:hover {
					background: #69c;
					transition: 1.2s background ease;
				/*задали плавное изменение цвета*/
				}
				
			</style>
		</head>
		<body>
		<div id="menu">
			<ul>
				<li><a href="#">Компьютеры</a></li>
				<li><a href="#">Комплектующие</a></li>
				<li><a href="#">Аксессуары</a></li>
			</ul>
		</div>
		</body>
	</html>

Добиться горизонтального расположения элементов списка можно несколькими способами:
#menu li {display: inline-block;} или
#menu li {display: table-cell;} или
#menu li {float: left;}
Есть и другие способы.

Для значения transition задаётся время плавного изменения, через пробел свойство, которое будет изменяться (либо значение all для применения ко всем свойствам) и, через пробел, можно указать easy - плавное изменение указанного свойства.


Посмотрим на результат:

Прижатое влево раскрывающееся меню

Раскрывающееся меню в CSS можно реализовать только при помощи псевдокласса :hover, что не будет работать на мобильных устройствах. Эту проблему можно решить только применив код JavaScript, сделав выпадающее меню при клике, а не при наведении мышью. Здесь мы рассмотрим раскрывающееся меню только при наведении мышью:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Горизонтальное раскрывающееся меню</title>
			<style>
			
				#menu {
					width: 800px;
					height: 200px; 
					margin: auto;
					background: #ccf;
					}
				
				#menu ul {
					list-style: none;
					padding: 0; 
					margin: 0;
					}
					
				#menu > ul > li {
					float: left;
					position: relative;
					}
				
				#menu li a {
					background: #fc0;
					height: 50px;
					display: block; 
					line-height: 50px;
					padding: 0 20px;
					color: #fff; 
					text-decoration: none; 
					text-transform: uppercase;
					}
					
				#menu li a:hover {
					background: #69c;
					}
					
				#menu li ul{
					display: none;
					position: absolute;
					left: 2px; 
					top: 100%;
					}
					
				#menu li:hover ul{
					display: block;
					}
					
				#menu li li a{
					white-space: nowrap;
					/*запретили перенос по словам*/
					}
					
			</style>
		</head>
		<body>
			<div id="menu">
				<ul>
					<li><a href="#">Компьютеры</a>
					
					<ul>
						<li><a href="#">Acer</a></li>
						<li><a href="#">Samsung</a></li>
						<li><a href="#">HP</a></li>
					</ul>
					</li>
					
					<li><a href="#">Комплектующие</a></li>
					<li><a href="#">Аксессуары</a></li>
					
				</ul>
			</div>
		</body>
	</html>

Для #menu li ul задано абсолютное позиционирование, чтобы при появлении подменю оно не влияло на расположенные ниже элементы (не сдвигало их вниз).


Результат:

Горизонтальное табличное меню

Для того, чтобы растянуть таблицу на всю ширину родителя и сделать ячейки одинаковыми (например, для горизонтального меню) нужно в стилях задать такие правила:
#menu ul {display: table; width: 100%; table-layout: fixed;}
#menu li {display: table-cell; text-align: center;}
Рассмотрим пример:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Горизонтальное табличное меню</title>
			<style>
			
			* {
				margin: 0;
				padding: 0;
				/* Обнулили отступы для всех жлементов */
				}
			
			#wrapper {
				width: 700px; 
				margin: auto;
				}
				/* Задали фиксированную ширину для родительского элемента и 
				разместили его по центру */
			
				#menu ul {
					display: table;
					width: 100%; 
					table-layout: fixed; 
					list-style: none;
					/* Убрали маркеры списка */
					}
					
				#menu li {
					display: table-cell;
					text-align: center;
					background: pink;
					}
			
			</style>
		</head>
		<body>
		
			<div id="wrapper">
				<div id="menu">
				<ul>
					<li><a href="menu_1.html">Главная</a></li>
					<li><a href="menu_1.html">Товары</a></li>
					<li><a href="menu_1.html">Контакты</a></li>
					<li><a href="menu_1.html">О сайте</a></li>
				</ul>
				</div>
			</div>
		
		</body>
	</html>

Результат отображения в браузере будет таким:

Свойство table-layout отвечает за то, как браузер должен вычислять ширину ячеек таблицы в зависимости от их содержимого. По умолчанию значение выставлено в auto. Значение fixed задаёт равную ширину ячеек.

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля