Полезное
563 статьи › RSS

Уроки веб-дизайна. Как сделать навигационное меню в модном flat-стиле

Выпадающее меню – это удобно, но сегодня оно уже не актуально. Мы писали о некоторых альтернативах такому виду навигации, а сегодня научимся делать еще кое-что стильное и интересное: меню с причудливыми эффектами при наведении.

Выполнено оно будет в плоском стиле. Это тренд, который держится на пике уже несколько лет. Возьмем чистые яркие цвета и простые иконки.

Будем использовать различные приемы CSS, так что разобраться в создании меню сможет даже начинающий дизайнер.

Требуется среднее знание HTML и CSS.
 

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

Вот так будет выглядеть наше меню:

 


В нем использованы иконки из набора Linecons и шрифт Google Webfonts – Dosis. Плоскому стилю соответствуют чистые цвета и простые квадратные кнопки.

Принцип работы меню прост – когда вы наводите мышку на кнопку, сбоку справа появляется надпись того же цвета, которого сама кнопка (родительский блок).
 


Как выглядит конечный результат 



Шаг 1. HTML

Прежде чем начать работу с любым стилем, необходимо построить конструкцию в HTML. Элементы HTML5, такие как <nav> (задает навигацию по сайту; в него помещают приоритетные ссылки), поддерживаются в даже через IE, с помощью плагинов, таких как html5shiv.
 

<!DOCTYPE html>

<html>

<head>

<meta charset=«utf-8» />

<title>Flat Nav</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>Home</span>

                                                               </a>

                                               </li>

                                               <li>

                                                               <a href="#">

                                                                              <span>About</span>

                                                               </a>

                                               </li>

                                               <li>

                                                               <a href="#">

                                                                              <span>Portfolio</span>

                                                               </a>

                                               </li>

                                               <li>

                                                               <a href="#">

                                                                              <span>Contact</span>

                                                               </a>

                                               </li>

                                              

                               </ul>

                </nav>

</div>

 

</body>

</html>


Как видите, файл имеет обычную структуру HTML-документа. Шрифт DOSIS настроен с помощью Google Web Fonts, прилагается его таблица стилей. Фактическая структура меню навигации заключена в навигационный тег <nav>, внутри которого — типичный неупорядоченный список. Каждый элемент списка содержит ссылку. Чтобы установить свой стиль для каждой ссылки, мы заключили ее название в тег <span>.
 

Шаг 2. CSS

Прописываем стили для списка внутри элемента навигации <nav>.
 

nav ul {

                list-style: none; overflow: hidden; position: relative;

}

                nav ul li {

                               float: left; margin: 0 20px 0 0;

                }


Стиль меню начинается с изменения внешнего вида маркированного списка путем удаления точек (list-style: none) и установки каждого <li> бок о бок.

Получается вот такая картина:
 

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;

                }


Теперь каждый анкор внутри списка стилизуем под квадрат со стороной 120 пикс… Преобразуем его из строчного в блочный элемент с помощью свойства display со значением  block. Все иконки были экспортированы из Photoshop в одном спрайте, поэтому файл icons.png добавляется в качестве фонового изображения для всех анкоров, с использованием универсального селектора – nav ul li a.

Любой уникальный стиль для каждого отдельного анкора затем добавляется с помощью селектора nth-child,  с указанием номера, для каждого отдельного <li>, основываясь на их порядке. Так нам не нужно добавлять отдельные классы в HTML-документ, и тем самым загромождать его.

Затем задаем цвет фона для каждого блока, и указываем координаты нужной иконки на спрайте (background-position).

Результат:
 


Как видим, уже вырисовались наши кнопки. Теперь нужно доработать ссылки.
 

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 span, то есть содержимого внутри каждого тега <span>.



Задаем стиль шрифта Dosis, устанавливаем размер – 50 пикселей. Свойство text-transform поможет перевести шрифт в верхний регистр (словно написано капсом).

По умолчанию каждая метка выравнивается в левом верхнем углу каждого блока навигации, но нам нужно, чтобы они все были справа от меню. Для этого мы просто добавляем position: absolute. Помним, что для nav ul ранее мы установили position: relative, поэтому отсчет будет вестись от края родительского элемента, а не от края окна браузера.

Получилось вот что:
 


Потому еще нужно поработать со стилями.

 

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;

}


Все ссылки показываются открытыми одновременно. Мы прописывали ранее для nav ul li a spanсвойство display: none. Чтобы при наведении мышки показывалась определенная надпись, пишем противоположное значение для nav ul li a:hover spandisplay: block. Теперь остается только прописать цвет для каждой ссылки, такой же, как у кнопок.

 

Весь CSS


Вот весь 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;

                                                               }                                                              


Вот финальный вид меню:
 


Ссылка на демо-версию 


 

Вот и все. Теперь вы можете использовать такое стильное меню на своем сайте-портфолио.

 

Источник 

    Понравилась статья? Поделись с друзьями!

    Поделиться

или

следи за новостями в соцсетях

Подпишись на рассылку.

Без рекламы и только самое интересное!

Комментарии

Всего: 0 комментариев

Оставлять комментарии могут только пользователи.

Подписка на Freelance.Today





или

следи за новостями в соцсетях


Фриланс новости, биржи фриланса, freelance