Как сделать меню для html сайта: Горизонтальное меню для сайта

Сайт 

Содержание

CSS меню. Простое меню для сайта. Горизонтальное CSS меню.

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

Как и в прошлой публикации, меню сайта будет создано при помощи маркированного HTML списка (при помощи тегов <li> и <ul>). Оформлять горизонтальное меню для сайта мы будем при помощи таблицы стилей (CSS), мы не будем использовать JavaScript для создания горизонтального CSS меню. Как и в прошлый раз, мы не будем использовать изображений для создания горизонтального CSS меню.

Создание меню для сайта. Горизонтальное CSS меню. Шаг 1 -создание HTML макета меню.

Содержание статьи:

И так, начнем мы с создания HTML макета меню сайта. Для этого мы воспользуемся HTML списком, ненумерованным списком:

</p> <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.

01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Создание CSS меню</title> <link rel=»stylesheet» href=»style.css» type=»text/css» > </head> <body> <div> <ul> <li><a href=»#»>Home</a></li> <li><a href=»#»>Ссылка1</a></li> <li><a href=»#»>Ссылка2</a></li> <li><a href=»#»>Ссылка3</a></li> <li><a href=»#»>Ссылка4</a></li> </ul> <span><span><br></span></span> </div> </body> </html> <p>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

</p>

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4. 01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

<title>Создание CSS меню</title>

<link rel=»stylesheet» href=»style.css» type=»text/css» >

</head>

<body>

<div>

<ul>

<li><a href=»#»>Home</a></li>

<li><a href=»#»>Ссылка1</a></li>

<li><a href=»#»>Ссылка2</a></li>

<li><a href=»#»>Ссылка3</a></li>

<li><a href=»#»>Ссылка4</a></li>

</ul>

<span><span><br></span></span>

</div>

</body>

</html>

<p>

Сразу подключаем файл таблиц стилей, который называется style.css. При помощи тегов <ul> и <li> создаем HTML макет меню для сайта. Поскольку, пункты нашего горизонтального CSS меню должны куда-нибудь вести, делаем их ссылками при помощи тега <a>, в качестве значения атрибута href устанавливаем #(хэш), ссылки с таким атрибутом никуда не ведут. HTML список меню помещаем в контейнер <div> с идентификатором hmenu, поскольку внутри элемента <body> могут находиться только блочные HTML элементы и элементы <ins> и <del>. После созданного списка стоит тег <br> — перевод строки, он нужен для того, чтобы растянуть меню сайта по горизонтали на всю ширину окна браузера.

Создание меню для сайта. Горизонтальное CSS меню. Шаг 2 — Задаем стили для меню сайта.

Первое, что нужно сделать — это задать цвет фона и ширину контейнера <div> в CSS, хотя вы знаете, что блочные HTML элементы занимают всю доступную ширину, в отличие от строчных HTML элементов:

#menu{ width: 100%; background-color: #333; }

#menu{

width: 100%;

background-color: #333;

}

Затем нам нужно задать общий стиль для горизонтального CSS меню:

#menu ul{ margin: 0; padding: 0; float: left;}

#menu ul{

 

margin: 0;

 

padding: 0;

 

float: left;}

Здесь мы убираем внутренние и внешние отступы, а также «прижимаем» меню сайта к левой границе окна браузера.

Теперь можно задать стиль отображения для всех пунктов меню сайта:

#menu ul li{ display: inline;}

#menu ul li{

display: inline;}

Мы знаем, что элемент <li> относится к блочным, то есть занимает всю область, в которой он стоит, из-за этого наше меню было вертикальным, добавив CSS свойство display: inline, мы сделали элементы <li> строчными, а наше меню стало горизонтальным.

Теперь мы можем задать CSS стили для содержимого контейнеров <li>, то есть стили для навигации горизонтального меню(для тега <a>):

#menu ul li a{ float: left; text-decoration: none; color: white; padding: 10.5px 11px; background-color: #333; }

#menu ul li a{

float: left;

text-decoration: none;

color: white;

padding: 10. 5px 11px;

background-color: #333; }

CSS свойство float:left выравнивает горизонтальное меню и контейнер <div> по верхней границе. Все ссылки по умолчанию подчеркиваются браузером, чтобы избавиться от этого недоразумения мы используем свойство text-decoration:none. Далее мы задаем цвет ссылок, то есть цвет текста меню сайта. Внутренними отступами мы расширяем наше горизонтальное меню.

Задаем стили для посещенных пунктов меню и то, как будут отображаться пункты меню, при наведение на них курсора мыши:

</p> #menu ul li a:visited{ color: white;} #menu ul li a:hover{ color: #fff; background-color:#0b75b2;} <p>

</p>

#menu ul li a:visited{

color: white;}

 

#menu ul li a:hover{

color: #fff;

background-color:#0b75b2;}

<p>

Ну тут все понятно: мы задаем цвет текста и цвет фона для горизонтального CSS меню.

Осталось задать стиль для тега <br>, чтобы выровнять по высоте горизонтальное меню и элемент <div>:

</p> <p>br{clear:left;}</p> <p>

</p>

<p>br{clear:left;}</p>

<p>

Это горизонтальное CSS меню будет растягиваться на всю ширину окна браузера и при это данное меню корректно отображается во всех браузерах.

Исходные коды примеров вы можете скачать на публичных страницах вконтакте: раз и два.

На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru. Не забываем комментировать и делиться с друзьями;)

Как сделать фиксированное меню


Узнайте, как создать «фиксированное» меню с помощью CSS.

Как создать фиксированное верхнее меню

Шаг 1) добавить HTML:

Пример


  Home
  News
  Contact

<div>
  <p>Some text some text some text some text..</p>
</div>

Шаг 2) добавить CSS:

Чтобы создать фиксированное верхнее меню, используйте position:fixed и top:0. Обратите внимание, что фиксированное меню будет накладывать другое содержимое. Чтобы исправить это, добавьте margin-top (к содержимому), которое равно или больше, чем высота вашего меню.

Пример

/* The navigation bar */
.navbar {
    overflow: hidden;
    background-color: #333;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
}

/* Links inside the navbar */
.navbar a {
    float: left;
    display: block;

    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change background on mouse-over */
. navbar a:hover {
    background: #ddd;
    color: black;
}

/* Main content */
.main {
    margin-top: 30px; /* Add a top margin to avoid content overlay */
}

Как создать фиксированное нижнее меню

Чтобы создать фиксированное нижнее меню, используйте position:fixed и bottom:0:

Пример

/* The navigation bar */
.navbar {
    position: fixed; /* Set the navbar to fixed position */
    bottom: 0; /* Position the navbar at the bottom of the page */
    width: 100%; /* Full width */
}

/* Main content */
.main {
    margin-bottom: 30px; /* Add a bottom margin to avoid content overlay */
}

Совет: Чтобы узнать больше о навигационных панелях, перейдите в наш Учебник CSS Navigation.


Конструктор меню — База знаний uCoz

Конструктор меню

Меню сайта — один из основных функциональных элементов, состоящий из набора ссылок на ключевые страницы. По умолчанию в него входят ссылки на активные модули и стандартные страницы («Информация о сайте», «Обратная связь»). Конструктор меню позволяет изменить набор ссылок без редактирования HTML-кода шаблонов сразу для всех страниц сайта.

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

Вы можете создавать до 10 различных меню в рамках одного сайта.

Данная инструкция состоит из следующих шагов:

  1. Как узнать, используется ли конструктор меню на моем сайте?
  2. Редактирование меню
  3. Создание и размещение нового меню на сайте
  4. Адреса модулей системы

Как узнать, используется ли конструктор меню на моем сайте?

За отображение меню отвечают переменные вида $NMENU_n$. Подобные переменные встроены во все стандартные шаблоны.

В других случаях в панели управления нужно перейти в «Дизайн» / «Редактор» / «Глобальные блоки» и найти переменную в коде шаблона «Верхняя часть сайта»:

Не всегда меню размещается в указанном шаблоне, поэтому проверьте и другие: «Нижняя часть сайта», «Первый контейнер» и т. д.

Если вы разрабатываете свой шаблон, то включайте переменные меню в HTML-код. Когда покупаете шаблон в магазине или заказываете его разработку у фрилансеров, уточняйте, будет ли в шаблон встроен конструктор меню.

Редактирование меню

Чтобы отредактировать меню, перейдите в панель управления, откройте раздел «Дизайн» / «Конструктор меню»:

Выберите меню, которое хотите отредактировать:

Слева от названия меню нажмите на «Изменить параметры меню»:

Появится окно редактирования меню:

  1. Название меню. Отображается только в панели управления и помогает администратору отличить одно меню от другого.
  2. Ориентация меню. В зависимости от выбранного значения к меню будут применены разные стили оформления — горизонтальный или вертикальный.
  3. Удалить. Полностью удаляет меню.

Когда закончите редактирование, нажмите на ссылку «Готово».

Изменить порядок пунктов в меню можно, перетащив его за точки с левой стороны от формы:

Чтобы изменить пункт, наведите на него курсор мыши и нажмите «Изменить»:

Появится окно редактирования пункта меню:

  1. Название пункта. Отображается в списке пунктов меню, например, «Главная страница».
  2. URL-адрес. Будет открываться при нажатии на пункт меню.
  3. «Открывать в новом окне» добавляет атрибут target=”_blank” к ссылке.
  4. CSS-класс предназначен для индивидуального оформления. Используйте его, когда нужно выделить один или несколько пунктов меню.
  5. Удалить пункт меню.

Когда закончите редактирование пункта меню, нажмите на ссылку «Готово».

Для добавления пункта меню нажмите на изображение «+»:

и повторите действия по редактированию меню, которые мы рассмотрели ранее.

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

Чтобы внесенные изменения вступили в силу и отобразились на сайте, нажмите на кнопку «Сохранить»:

Создание и размещение нового меню на сайте

Чтобы создать новое меню, в панели управления откройте раздел «Дизайн» / «Конструктор меню» и нажмите на кнопку «Добавить»:

Появится новое меню:

Настройте меню, используя второй шаг данной инструкции.

Скопируйте переменную, которая отвечает за отображение меню в шаблоне (в нашем примере это $NMENU_2$).

В панели управления откройте раздел «Дизайн» / «Редактор» и найдите в меню слева «Глобальные блоки»:

Затем выполните следующие действия:

  1. Выберите подходящий глобальный блок для размещения меню
  2. Добавьте код в шаблон глобального блока
  3. Нажмите на кнопку «Сохранить»

Меню появится на сайте.

Другой способ разместить меню на сайте, включив конструктор из панели инструментов сайта, — отредактировать HTML-код глобального блока:

Адреса модулей системы

В этом разделе приведена информация об адресах модулей системы, которая поможет указать корректные ссылки на них:

МодульОтносительная ссылкаПример абсолютной ссылки
Новости/news///example.com/news/
Блог/blog///example. com/blog/
Каталог сайтов/dir///example.com/dir/
Каталог статей/publ///example.com/publ/
Каталог файлов/load///example.com/load/
Доска объявлений/board///example.com/board/
FAQ/faq///example.com/faq/
Интернет-магазин/shop///example.com/shop/
Тесты/tests///example.com/tests/
Видео/video///example.com/video/
Форум/forum///example.com/forum/
Фотоальбомы/photo///example.com/photo/
Онлайн-игры/stuff///example.com/stuff/
Гостевая книга/gb///example.com/gb/

Конструктор меню

Создание сайта с меню без использования фреймов

Q1 1-Как лучше всего создать персональную веб-страницу html с такими строками меню, не используя фреймы ?

Это в значительной степени вопрос личных предпочтений, поскольку как разработчик я уже некоторое время не использовал Dreamweaver, поскольку, хотя он дал обзор дизайна, его возможности как инструмента программирования отсутствуют по сравнению с другими IDE.

Вместо того, чтобы использовать фреймы для построения ваших страниц, возможно, посмотрите на создание столбцов с вашей структурой HTML и CSS.

<div>
    <div>
       <div>

       </div>
       <div>

       </div>
       <br />
    </div>
</div>

И CSS:

.canvas   { height: 100%; width: 100%; overflow: hidden }
.row      { width: 960px; margin: 0 auto; }
.column1  { width:70%; height: 1024px; float:left; } // Could use PX instead of %
.column2  { width:30%; height: 1024px; float:left; } // As above
.clearFix { clear: both; }

Может быть, заглянуть в IDE, например в Aptana студию для PHP, HTML, CSS, Javascript. Это поможет вам понять код, который вы пишете, и ваш вид ‘design’ станет браузером, который гораздо точнее отображает HTML и CSS, чем Dreamweaver.

Q2 2-Если html недостаточно, какие другие скриптовые языки вы бы порекомендовали изучить кому-то с Java фоном и базовыми знаниями html и css.

Javascript

Javascript поможет вам добавить некоторый динамический контент на ваш сайт, объединенный с расширениями JS, такими как JQuery и JQuery-UI, это очень мощный инструмент для выбора и манипулирования элементами DOM.

Взгляните на Академию кода . Я наткнулся на этот gem около 8 месяцев назад и рекомендовал его многим людям, чтобы узнать Javascript. (У них тоже есть Python, Ruby, HTML 5, CSS 2 / 3 доступные курсы)

PHP

PHP-это серверный язык, который помогает вам обрабатывать любые внутренние функции вашего сайта, такие как Отправка форм, управление базами данных и т. д.

Начиная с PHP 5 OOP функциональность также была значительно расширена. Исходя из фона Java, вы не будете чувствовать себя таким потерянным, как я предполагаю, изучая PHP ООП. Этот язык поможет вам, если вы планируете писать более глубокий и привлекательный код.

Q3 3-Какие инструменты веб-дизайна вы бы порекомендовали для создания персонального сайта ?

Если вы хотите создать сайт и у вас уже есть возможности, придерживайтесь того , что вы знаете на данный момент, но попробуйте различные инструменты и найдите язык для изучения (опять же я приведу CodeAcademy, это действительно так хорошо).

Элемент секции навигации — HTML

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

Категории контентаПотоковый контент, секционный контент, явный контент.
Разрешённый контентПотоковый контент.
Опускание теговНет. Как начальный, так и конечный тег являются обязательными.
Нет, открывающий и закрывающий теги обязательны.
Разрешённый родительский элементЛюбой элемент, содержащий потоковый контент.
Разрешённые ARIA-атрибутыНет
DOM интерфейсHTMLElement
  • Не обязательно все ссылки должны быть обёрнуты в <nav>. <nav> следует использовать лишь для главных навигационных блоков. Например, <footer>  часто содержит список ссылок, которые не стоит оборачивать в <nav> .
  • Документ может содержать несколько <nav> элементов. Например, один для навигации по сайту, второй для навигации по странице.
  • Пользовательские агенты, такие как устройства чтения с экрана, предназначенные для людей с плохим зрением, могут использовать этот элемент, чтобы определить следует ли пускать рендеринг содержимого навигации.

В данном примере, блок <nav> содержит ненумерованный список (<ul>) ссылок. С помощью CSS данный блок можно использовать как сайдбар, навигационную колонку или выпадающее меню.

<nav>
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

BCD tables only load in the browser

  • Другие секционные элементы: <body>, <article>, <section>, <aside>, <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h5> (en-US), <h6> (en-US), <hgroup>, <header>, <footer>, <address>;
  • Использование разделов и создание структуры HTML документа.

Создание меню на CSS | Как создать сайт

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

Здравствуйте! В этом уроке рассмотрим как создать меню на CSS. Меню или панель навигации играет важную роль на сайте, так как обеспечиват переходы между страницами сайта или на внешние ресурсы.  Фактически панель навигации — это набор ссылок, часто в виде ненумерованного списка. Панели навигации бывают самыми различными: вертикальными и горизонтальными, одноуровневыми и многоуровневыми, но в любом случае в центре каждой навигации находится элемент <a>. Поэтому при создании панели навигации мы можем столкнуться с рядом трудностей, которые вытекают из ограничений элемента ссылки. А именно, элемент <a> является строчным, а это значит, что мы не можем указать для него ширину, высоту, отступы. По ширине ссылка автоматически занимает то место, которое ей необходимо.

Вертикальное меню

Распространенное решение данной проблемы для создания вертикального меню состоит в том, чтобы сделать ссылку блочным элементом.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Панель навигации в HTML5</title>
        <style>
            ul.nav{
                margin-left: 0px;
                padding-left: 0px;
                list-style: none;
            }
            ul.nav a {
                display: block;
                width: 7em;
                padding:10px;
                background-color: #f4f4f4;
                border-top: 1px dashed #333;
                border-right: 1px dashed #333;
                border-left: 5px solid #333;
                text-decoration: none;
                color: #333;
            }
            ul.nav li:last-child a {
                border-bottom: 1px dashed #333;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#">Главная</a></li>
            <li><a href="#">Контакты</a></li>
            <li><a href="#">О сайте</a></li>
        </ul>
    </body>
</html>

Просмотреть  пример

После установки свойства display: block мы можем определить у блока ссылки ширину, отступы и т. д.

Горизонтальное меню

Для создания горизонтального меню есть два метода. Первый заключается в применении свойства float и создании из ссылок плавающих элементов, которые обтекают друг друга с слева. И второй способ состоит в создании строки ссылок с помощью установки свойства display: inline-block.

Использование float

Алгоритм создания панели навигации с помощью float разделяется на два этапа. На первом этапе у элемента li, в который заключена ссылка, устанавливается float: left;. Это позволяет расположить все элементы списка в ряд при достаточной ширине, когда правый элемент списка обтекает левый элемент списка.

Второй этап заключается в установке у элемента ссылки display: block, что дает нам возможность устанавливать ширину, отступы, вообщем все те признаки, которые характерны для блочных элементов.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Панель навигации в HTML5</title>
        <style>
            ul. nav{
                margin-left: 0px;
                padding-left: 0px;
                list-style: none;
            }
            .nav li {
                float: left;
            }
            ul.nav a {
                display: block;
                width: 5em;
                padding:10px;
                margin: 0 5px;
                background-color: #f4f4f4;
                border: 1px dashed #333;
                text-decoration: none;
                color: #333;
                text-align: center;
            }
            ul.nav a:hover{
                background-color: #333;
                color: #f4f4f4;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#">Главная</a></li>
            <li><a href="#">Блог</a></li>
            <li><a href="#">Контакты</a></li>
            <li><a href="#">О сайте</a></li>
        </ul>
    </body>
</html>

Просмотреть  пример

Меню с помощью inline и inline-block

Для создания горизонтальной панели навигации нам надо сделать каждый элемент li строчным, то есть установить для него display: inline. После этого для элемента ссылки, которая располагается в элементе li, мы можем установить display: inline-block:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Панель навигации в HTML5</title>
        <style>
            ul.nav{
                margin-left: 0px;
                padding-left: 0px;
                list-style: none;
            }
            .nav li {
                display: inline;
            }
            ul.nav a {
                display: inline-block;
                width: 5em;
                padding:10px;
                background-color: #f4f4f4;
                border: 1px dashed #333;
                text-decoration: none;
                color: #333;
                text-align: center;
            }
            ul.nav a:hover{
                background-color: #333;
                color: #f4f4f4;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#">Главная</a></li>
            <li><a href="#">Блог</a></li>
            <li><a href="#">Контакты</a></li>
            <li><a href="#">О сайте</a></li>
        </ul>
    </body>
</html>

Просмотреть  пример

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться

Твитнуть

Поделиться

Также читайте

» УРОК 2. СОЗДАЕМ ШАБЛОН САЙТА

ОСНОВНЫЕ БЛОКИ

Современные сайты конструируются по принципу блочной верстки.

В HTML5 появились новые элементы, помогающие определять разные части документа и упорядочить его структуру. В HTML5 документ (в отличии от предыдущих версий) делится на несколько основных разделов, и структура сайта практически не зависит от тегов <div> и <table>.

Ключевые слова, используемые в тегах, выбранные для каждого элемента, дают подсказку относительно его назначения.

Большинство современных сайтов построены по следующему шаблону:

Верхняя область сайта (Заголовке), как правило, содержит лого­тип, название организации, контактную информацию и т. п.

Под заголовком находится меню навигации

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

В нижней части шаблона (футере) обычно дублируются ссылки на разделы сайта, пишутся копирайты и контактная информация.

С учетом новых элементов HTML5 шаблон будет такой

 

<header> — ШАПКА

Один из новых элементов HTML5. В отличии от тега <head>, который предназначен для хранения информации обо всем документе, <header> используется только для тела документа или для его разделов. В блоке находится логотип организации, её наименование, контакты и ряд других элементов. См. пример шапки магазина «Эльдорадо»

Зададим заголовок сайта

 h2 – заголовок первого уровня

 

<nav> — НАВИГАЦИЯ

 Тег меню сайта <nav> находит после тега <header>. Элемент <nav> предназначен для определения навигацион­ных элементов (главное меню или другие элементы навигации). Используйте его только для этих целей.

Сформируем код меню

Внутри <nav> используются 2 тега:

<ul> — тег списка

<li> — тег элементов списка

<section> — ОСНОВНАЯ ИНФОРМАЦИЯ

В этом блоке находится основной контент страницы (текст, фото, видео)

 

 

 

 

<aside> — БО­КОВАЯ ПАНЕЛЬ

Блок <aside> может располагаться справа и слева, содержать дополнительное меню, баннеры или виджеты. См. пример боковой панели

В нашем случае он будет находиться под блоком <section>.

 

<footer> — ПОДВАЛ

Подвал (или «футер») — это часть сайта, где обычно дублируются ссылки на разделы сайта, пишутся копирайты и контактная информация, ставится метрика.

Тэг подвала   <footer>

 

 

 

 

 

 

 

 

Основные блоки шаблона мы прописали

Создание нескольких страниц с меню навигации

Введение

В этой статье учебной программы по веб-стандартам мы поговорим о навигации и меню веб-сайта. Вы узнаете о различных типах меню и о том, как их создавать в HTML. Мы также затронем тему удобства использования и доступности меню. Мы пока не будем вдаваться в стилистику меню, но эта статья заложит основы. Есть примеры кода, которые можно загрузить вместе с этой статьей — мы будем ссылаться на них на протяжении всего руководства.

HTML5 определяет меню