Поскольку тенденция плоского дизайна очень популярна, мы будем использовать этот стиль для сегодняшнего меню, используя яркие сплошные цвета и чистые значки. Мы будем использовать различные методы 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 в плоском стиле
