Урок 7

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

Содержание
Создание меню......................................................................... 3
Меню сайта........................................................................ 3
Виды меню......................................................................... 5
Добавление меню........................................................... 10

Материалы урока прикреплены к данному PDF-файлу. Для доступа

к ним, файл необходимо открыть в программе Adobe Acrobat Reader.

2
 Создание меню

Создание меню
Меню сайта
Навигация — важный элемент любого ресурса. Она
помогает пользователю быстрее сориентироваться на сай-
те, перейти на нужную страницу.
Рассмотрим, как круто можно оформить меню.
Тени в меню гармонично смотрятся на странице. Мяг-
кие тени создают эффект глубины и выхода за пределы
экрана. Вот пример того, как можно сочетать тень с вы-
падающим меню (рис. 1):

Рисунок 1
Использование гамбургер-меню (меню, состоящее
из трех линий) не акцентирует внимание на лишних де-
талях. Иногда такие меню могут быть неудобно распо-
ложены, или пользователь вовсе может их не замечать.
Важнейшие элементы навигации, например, главную

3
Урок 7

страницу, вход, регистрацию, следует выносить из меню

на верхнюю или боковую панель (рис. 2).

Рисунок 2

Рисунок 3
В меню можно использовать иконки. Мы говорили
о них на прошлой встрече. Такие иконки могут выгля-

4
 Создание меню

деть гармонично. Не стоит добавлять иконки, которые

не передают содержание страницы. Например, значок
дома возле слова About лишний. Кроме того, иконки
следует добавлять к каждому пункту меню. Взгляните
на пример оформления навигации с помощью иконок
(рис. 3).

Виды меню
Меню бывает трех видов: горизонтальное, вертикаль-
ное и выпадающее. При этом на странице можно комби-
нировать несколько видов меню.
Горизонтальное меню
Горизонтальное меню подходит для сайтов с неболь-
шим количеством вкладок. Данный тип меню часто за-
креплен в верхней части страницы, что очень удобно.
Пользователь всегда может перейти на нужную страницу.
Один из типов горизонтального меню — фиксиро-
ванное меню. Это меню закреплено в верхней части сай-
та и не исчезает при прокрутке вниз (рис. 4).

Рисунок 4

5
Урок 7

Взгляните на рисунок 5. Пользователь может с легко-

стью перейти на другую страницу без прокрутки вверх.

Рисунок 5
Вертикальное
Вертикальное меню не загромождает страницу и дает
больше пространства для контента. Зачастую вертикаль-
ное меню добавляют в левую часть окна, поскольку боль-
шинство пользователей просматривают информацию
слева направо. Помимо этого, вертикальное меню может
открываться по нажатию кнопки (рис. 6).

Рисунок 6

6
 Создание меню

На страницах данный тип меню выглядит интересно

и необычно (рис. 7).

Рисунок 7
Выпадающее
Выпадающее меню можно использовать практически
для всех сайтов. Такой тип навигации отлично подходит
для интернет-магазинов, когда один раздел может содер-
жать множество подразделов (рис. 8).

Рисунок 8

7
Урок 7

Взгляните на пример выпадающего меню (рис. 9):

Рисунок 9
Комбинированное меню
Комбинированные меню очень популярны. Их нужно
использовать, когда один тип расширяет другой (рис. 10).

Рисунок 10
На рисунке 11 показано, как горизонтальное меню
дополняет гамбургер-меню.

8
 Создание меню

Рисунок 11
Меню в футере
Футер — это нижняя часть страницы. Обычно в нем
располагаются ссылки на социальные сети, контактные
данные, адрес электронной почты и тому подобное.
Навигация в футере подходит для сайтов с многоу-
ровневой структурой (рис. 12).

Рисунок 12
Обратите внимание, пользователи опускаются до фу-
тера, если не находят нужной им информации. В нижней
части страницы следует публиковать меню в разверну-

9
Урок 7

том виде. Хорошо оформленный футер не только упро-

щает навигацию, но и несет дополнительную информа-
цию (рис. 13).

Рисунок 13

Добавление меню
Добавим в <header> следующий код:

<nav id="menu1">
<ul>
<li><a href="#m1">MENU</a></li>
<li><a href="#m2">MENU</a></li>
<li><a href="#m3">MENU</a>
<ul>
<li><a href="#m3_1">Menu</a></li>
<li><a href="#m3_2">Menu</a></li>
<li><a href="#m3_3">Menu</a></li>
<li><a href="#m3_4">Menu</a></li>
<li><a href="#m3_5">Menu</a></li>

10
 Создание меню

</ul>
</li>
<li><a href="#m4">MENU</a></li>
<li><a href="#m5">MENU</a></li>
</ul>
</nav>

Этот код добавит список с пунктами основного меню

(MENU), а также подменю (Menu) в одном из этих пун-
ктов. Теперь добавим стили.
Для <nav> указываем относительное позициониро-
вание:
#menu1{
position: relative;
display: block;
width: 100%;
height: auto;
z-index: 10;
}

Для списков в <nav> указываем относительное пози-

ционирование, а также убираем маркеры списков.

#menu1 ul{
position: relative;
display: block;
margin: 0px;
padding: 0px;
width: 100%;
height: auto;
list-style: none;
}

11
Урок 7

::after используется для вывода текста после содер-

жимого элемента:

#menu1 > ul::after{

display: block;
width: 100%;
height: 0px;
clear: both;
content: " ";
}

Стили для элементов списка:

#menu1 ul li{
position: relative;
display: block;
float: left;
width: auto;
height: auto;
}

Ссылки в элементах списка, которые будут пункта-

ми меню:

#menu1 ul li a{
display: block;
padding: 9px 25px 0px 25px;
font-size: 14px;
line-height: 1.3em;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
height: 36px;

12
 Создание меню

box-sizing: border-box;
color: white;
}

Перейдем к описанию стилей для выпадающего спи-

ска. Задаем ему расположение и такой же фоновый цвет,
как и у <header>.

#menu1 ul li ul{
position: absolute;
top: 36px;
left: 0px;
display: none;
width: 200px;
background: #38b6ff;
}

Указываем, что при наведении (:hover) на ul li меня-

ется значение display у ul.

#menu1 ul li:hover ul{

display: block;
}

Аналогичным образом указываем стили и для эле-

ментов списка выпадающего меню.

#menu1 ul li ul li{
float: none;
width: 100%;
}

13
Урок 7

#menu1 ul li ul li a{
display: block;
text-transform: none;
height: auto;
padding: 7px 25px;
width: 100%;
box-sizing: border-box;
border-top: 1px solid #ffffff;
color: white;
}

#menu1 ul li ul li:first-child a{
border-top: 0px;
}

В результате получаем такое меню, как на рисун-

ке 14. Скопируйте его и добавьте на все страницы ва-
шего сайта.

Рисунок 14

14
 Создание меню

15
Урок 7
Создание меню

© Компьютерная Академия «Шаг»

www.itstep.org

Все права на охраняемые авторским правом фото-, аудио- и видеопро-

изведения, фрагменты которых использованы в материале, принадле-
жат их законным владельцам. Фрагменты произведений используются
в иллюстративных целях в объёме, оправданном поставленной задачей,
в рамках учебного процесса и в учебных целях, в соответствии со ст.
1274 ч. 4 ГК РФ и ст. 21 и 23 Закона Украины «Про авторське право і
суміжні права». Объём и способ цитируемых произведений соответству-
ет принятым нормам, не наносит ущерба нормальному использованию
объектов авторского права и не ущемляет законные интересы автора
и правообладателей. Цитируемые фрагменты произведений на момент
использования не могут быть заменены альтернативными, не охраня-
емыми авторским правом аналогами, и как таковые соответствуют
критериям добросовестного использования и честного использования.
Все права защищены. Полное или частичное копирование материалов
запрещено. Согласование использования произведений или их фраг-
ментов производится с авторами и правообладателями. Согласованное
использование материалов возможно только при указании источника.
Ответственность за несанкционированное копирование и коммерческое
использование материалов определяется действующим законодатель-
ством Украины.