Меню

Создаем модное меню на CSS

22.05.2013 - CSS

HTML
Прежде чем приступить к работе с CSS, нам в первую очередь необходимо построить фундамент на HTML.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Плоские Nav</title>

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

<link href= " http://fonts.googleapis.com/css?Семейные=Доза' rel='stylesheet " type= " text/css">

</head>
<body>

<div id="demo">
<nav>
<ul>
<li>
<a href="#">
<span>Дом</span>
</a>
</li>
<li>
<a href="#">
<span>О нас</span>
</a>
</li>
<li>
<a href="#">
<span>Портфолио</span>
</a>
</li>
<li>
<a href="#">
<span>Контакты</span>
</a>
</li>

</ul>
</nav>
</div>

</body>
</html>

HTML5 документ обычно начинаем с !DOCTYPE html, название и ссылку на CSS стиль прикрепим позже. Стиль шрифта задаем с помощью Google Webfonts. Структура меню начинается в nav элемента. Каждый элемент в списке содержит ссылку, но, чтобы дать дополнительный элемент к ссылки мы его ложем в span.

CSS

nav ul {
	list-style: none; overflow: hidden; position: relative;
}
	nav ul li { 
		float: left; margin: 0 20px 0 0;
	}

Вот что получается:
Создаем модное меню на CSS

Теперь её надо разнообразить изображениями.

nav ul li a {
	display: block; width: 120px; height: 120px;
	background-image: url(icons.png); background-repeat: no-repeat;
}
	nav ul li:nth-child(1) a {
		background-color: #5bb2fc;
		background-position: 28px 28px;
	}
	nav ul li:nth-child(2) a {
		background-color: #58ebd3;
		background-position: 28px -96px;
	}
	nav ul li:nth-child(3) a {
		background-color: #ffa659;
		background-position: 28px -222px;
	}
	nav ul li:nth-child(4) a {
		background-color: #ff7a85;
		background-position: 28px -342px;
	}

Все иконки хоронятся в одном файле icons.png.

Создаем модное меню на CSS

Осталось только разобраться с текстом.

nav ul li a span {
	font: 50px "Dosis", sans-serif; text-transform: uppercase; 
	position: absolute; left: 580px; top: 29px;
	display: none;
}

Здесь прописываем шрифт и указываем позицию span.

Создаем модное меню на CSS
nav ul li a:hover span {
	display: block;
}

nav ul li:nth-child(1) a span {
color: #5bb2fc;
}
nav ul li:nth-child(2) a span {
color: #58ebd3;
}
nav ul li:nth-child(3) a span {
color: #ffa659;
}
nav ul li:nth-child(4) a span {
color: #ff7a85;
}

Все элементы span будут скрыты display: none до тех пор, пока они не раскроются с помощью display: block;.

Полный CSS

nav ul {
	list-style: none; overflow: hidden; position: relative;
}
	nav ul li {
		float: left; margin: 0 20px 0 0;
	}
		nav ul li a {
			display: block; width: 120px; height: 120px;
			background-image: url(icons.png); background-repeat: no-repeat;
		}
			nav ul li:nth-child(1) a {
				background-color: #5bb2fc;
				background-position: 28px 28px;
			}
			nav ul li:nth-child(2) a {
				background-color: #58ebd3;
				background-position: 28px -96px;
			}
			nav ul li:nth-child(3) a {
				background-color: #ffa659;
				background-position: 28px -222px;
			}
			nav ul li:nth-child(4) a {
				background-color: #ff7a85;
				background-position: 28px -342px;
			}
		
				nav ul li a span {
					font: 50px "Dosis", sans-serif; text-transform: uppercase; 
					position: absolute; left: 580px; top: 29px;
					display: none;
				}
					nav ul li a:hover span {
						display: block;
					}
				
				nav ul li:nth-child(1) a span {
					color: #5bb2fc;
				}
				nav ul li:nth-child(2) a span {
					color: #58ebd3;
				}
				nav ul li:nth-child(3) a span {
					color: #ffa659;
				}
				nav ul li:nth-child(4) a span {
					color: #ff7a85;
				}
					

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *