Как создать модное навигационное меню в плоском стиле в CSS

Поскольку тенденция плоского дизайна очень популярна, мы будем использовать этот стиль для сегодняшнего меню, используя яркие сплошные цвета и чистые значки. Мы будем использовать различные методы CSS, которые необходимо знать, так что это отличный учебник для любого веб-дизайнера, изучающего основы.




Концепция меню

Вот меню, которое мы создадим в этом уроке. Значки любезно предоставлены пакетом Linecons, а шрифт, который мы будем использовать через Google Webfonts, — Dosis . При наведении курсора на каждое окно навигации справа появляется текстовая метка, в которой используется та же цветовая схема, что и для его родительского пункта меню.

Структура HTML

Прежде чем приступить к оформлению любого стиля, нам сначала нужно заложить основы и построить меню в HTML. Такие элементы HTML5, navкоторые сегодня широко поддерживаются даже в IE, с помощью таких плагинов, как html5shiv .

<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<title> Плоская навигация </title>

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

<link href = 'http: //fonts.googleapis.com/css? family = Dosis' 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>

HTML начинается с обычной структуры документа: типа документа, заголовка и ссылки на таблицу стилей CSS, которую мы заполним позже. Шрифт Dosis настраивается через Google Webfonts, и его таблица стилей прилагается. Фактическая структура меню навигации начинается с navэлемента, внутри которого находится типичный неупорядоченный список. Каждый элемент списка содержит ссылку, но чтобы получить дополнительный элемент для таргетинга при стилизации смещенного текста, метка каждой привязки оборачивается в spanэлемент.




Стили CSS

nav ul {
	стиль списка: нет; переполнение: скрыто; положение: относительное;
}
	nav ul li { 
		плыть налево; маржа: 0 20px 0 0;
	}

Стиль меню начинается с изменения внешнего вида неупорядоченного списка путем удаления маркеров списка и размещения каждой <li>из них рядом. Чтобы компенсировать это, overflow: hidden;объявление добавляется к <ul>объекту, чтобы очистить поплавки, затем его положение изменяется, чтобы положение текста при наведении курсора могло быть относительно родительского ul.

nav ul li a {
	дисплей: блок; ширина: 120 пикселей; высота: 120 пикселей;
	фоновое изображение: URL (icons.png); фон-повтор: без повторения;
}
	nav ul li: nth-child (1) a {
		цвет фона: # 5bb2fc;
		background-position: 28px 28px;
	}
	nav ul li: nth-child (2) a {
		цвет фона: # 58ebd3;
		background-position: 28px -96px;
	}
	nav ul li: nth-child (3) a {
		цвет фона: # ffa659;
		background-position: 28px -222px;
	}
	nav ul li: nth-child (4) a {
		цвет фона: # ff7a85;
		background-position: 28px -342px;
	}

Каждый якорь внутри элемента списка оформлен так, чтобы казаться квадратным путем добавления ширины и высоты 120 пикселей, что разрешено преобразованием из встроенного элемента в блок display: block;. Все значки были экспортированы из Photoshop в виде одного файла, поэтому icons.pngфайл добавляется в качестве фонового изображения ко всем привязкам с помощью универсального nav ul li aселектора.
Затем с помощью :nth-childселектора добавляется любой уникальный стиль к каждой отдельной привязке. Это превосходит добавление дополнительных классов в HTML, просто имея возможность настроить таргетинг на каждого человека liна основе его количества. Затем добавляются фоны разного цвета, и положение фона изображения значков регулируется, чтобы найти правильный значок.




nav ul li a span {
	шрифт: 50px "Dosis", без засечек; преобразование текста: прописные буквы;
	позиция: абсолютная; слева: 580 пикселей; верх: 29 пикселей;
	дисплей: нет;
}

Если бы в этом дизайне использовались только квадратные блоки, этот урок был бы в значительной степени завершенным, но дополнительный необычный шаг — создать эффект смещения текста при наведении курсора на каждый элемент. Все это делается путем нацеливания на <span>то, что было добавлено к каждой привязке. Сначала стиль шрифта настраивается как Dosis Google WebFont, а его внешний вид преобразуется в верхний регистр с помощью text-transformсвойства.
По умолчанию каждая метка выравнивается по верхнему левому углу каждого блока навигации, но мы хотим, чтобы все они были выровнены по правому краю всего меню. Для этого мы просто добавляем position: absolute;объявление и изменяем положение слева и сверху в соответствии с требованиями. Это position: relative;объявление, которое было добавлено вnav ul ранее позволяет этому абсолютному позиционированию быть относительно родительского ul, а не относительно полной ширины окна браузера.

nav ul li a: hover span {
	дисплей: блок;
}

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

Все метки видны одновременно , пока они не скрыты с display: none;, они потом сказали , чтобы вновь появиться на парении каждого якоря путем добавления объявления противоположное: display: block;. Осталось только :nth-childеще раз использовать селекторы, чтобы присвоить каждой метке соответствующий цвет, соответствующий блоку меню, с которым она связана.

Полный CSS

Вот полный CSS, который вы хотите скопировать / вставить в свой собственный дизайн.




nav ul {
	стиль списка: нет; переполнение: скрыто; положение: относительное;
}
	nav ul li {
		плыть налево; маржа: 0 20px 0 0;
	}
		nav ul li a {
			дисплей: блок; ширина: 120 пикселей; высота: 120 пикселей;
			фоновое изображение: URL (icons.png); фон-повтор: без повторения;
		}
			nav ul li: nth-child (1) a {
				цвет фона: # 5bb2fc;
				background-position: 28px 28px;
			}
			nav ul li: nth-child (2) a {
				цвет фона: # 58ebd3;
				background-position: 28px -96px;
			}
			nav ul li: nth-child (3) a {
				цвет фона: # ffa659;
				background-position: 28px -222px;
			}
			nav ul li: nth-child (4) a {
				цвет фона: # ff7a85;
				background-position: 28px -342px;
			}
		
				nav ul li a span {
					шрифт: 50px "Dosis", без засечек; преобразование текста: прописные буквы;
					позиция: абсолютная; слева: 580 пикселей; верх: 29 пикселей;
					дисплей: нет;
				}
					nav ul li a: hover span {
						дисплей: блок;
					}
				
				nav ul li: nth-child (1) a span {
					цвет: # 5bb2fc;
				}
				nav ul li: nth-child (2) a span {
					цвет: # 58ebd3;
				}
				nav ul li: nth-child (3) a span {
					цвет: # ffa659;
				}
				nav ul li: nth-child (4) a span {
					цвет: # ff7a85;
				}

Окончательный дизайн меню CSS в плоском стиле

Узнать больше интересного: