Сайт

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

04.05.2021

Содержание

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


Узнайте, как создать «фиксированное» меню с помощью 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.


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

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

Как я и говорил, структура меню в обоих способах одинакова, меняется только id=menu_номер-примера:

<div>
 <ul>
      <li><a href="#">Пункт 1</a></li>
      <li><a href="#">Пункт 2</a></li>
      <li><a href="#">Пункт 3</a></li>
      <li><a href="#">Пункт 4</a></li>
      <li><a href="#">Пункт 5</a></li>
      <li><a href="#">Пункт 6</a></li>
      <li><a href="#">Пункт 7</a></li>
  </ul>
</div>

Первый способ

Стандартное горизонтальное HTML меню, которое можно увидеть на многих сайтах. Первым делом добавляем HTML структуру меню. Она будет состоять из «оберточного» дива с id=menu_1, в который кладем наш ненумерованный HTML список. Собственно, можно обойтись и без тега div (чем меньше тегов – тем лучше и все такое…), дописав наш id непосредственно к ul, но это будет зависеть от вашего шаблона. Иногда без «оберток» вообще ничего путного не сверстаешь.

<div>
    <ul>
      <li><a href="#">Пункт 1</a></li>
      <li><a href="#">Пункт 2</a></li>
      <li><a href="#">Пункт 3</a></li>
      <li><a href="#">Пункт 4</a></li>
      <li><a href="#">Пункт 5</a></li>
      <li><a href="#">Пункт 6</a></li>
      <li><a href="#">Пункт 7</a></li>
  </ul>
</div>

Далее добавляем CSS стили меню:

#menu_1{
    background-color: #69c;
}
    #menu_1 ul{
     list-style: none;
       margin: 0;
      padding: 0;
 }
   #menu_1 ul:after{
       content: "";
      display: block;
     clear: both;
        height: 0;
  }
       #menu_1 li{
         float: left;
        }
           #menu_1 li a{
               display: block;
             height: 50px;
               line-height: 50px;
              padding: 0 20px;
                background-color: #69c;
             color: #fff;
                text-transform: uppercase;
              text-decoration: none;
              cursor: pointer;
            }
           #menu_1 li a:hover{
             background-color: #369;
         }

Тут поподробнее:

  1. Первым делом задаём фон «обёртки» тем же цветом, что и пункты нашего меню, иначе будем наблюдать «дребезг» в несколько пикселей при отрисовке страницы разными браузерами, куда будет заползать цвет «верхних» элементов, если таковые есть, или белый цвет body, если не задан другой;
  2. Убираем маркеры у списка ul и обнуляем внешние и внутренние отступы;
  3. Запрещаем обтекание, подробнее как сделать читаем в [url=http://falbar. ru/article/zapret-obtekaniya-tremya-sposobami-na-css target=_blank]ранее написанной статье[/url], это необходимое действие, так как для пунктов меню будет использоваться свойство float;
  4. Используем float со значением left для элементов li, чтобы выстроить их в один ряд;
  5. Для ссылок, указываем стили. Главное указать display со значением block чтобы ссылки стали блочными и заняли всё допустимое место внутри элемента li;
  6. Готово.

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

HTML без изменений, для примера меняем id=menu_2.

Основной CSS остается практически неизменным, необходимый нам эффект заключен в следующих строках:

#menu_2 ul{
   list-style: none;
   margin: 0;
  padding: 0;
 text-align: justify;
    overflow: hidden;
   height: 50px;
}
#menu_2 ul:after{
 content: "";
  width: 100%;
    display: inline-block;
}
 #menu_2 li{
     display: inline-block;
  }

После использования этих стилей все пункты станут одинаковыми по ширине, а также растянуться по всей ширине обертки.

Второй способ

Второй способ реализации горизонтального меню заключается в превращении нашего списка в таблицу. Да да, мы не будет использовать теги table и иже с ними. Почему? Как писал выше – исторически сложившийся факт, HTML таблица не используется для построения меню, связано это, в первую очередь, с неудобством прикручивания такого меню к движку. А уж если попытаться сделать и выпадающие вкладки в пунктах, то вы получите такого «монстра», что нагнете всю дальнейшую структуру страницы в самом её начале.

Так вот, для реализации нам нужны стандартные свойства таблицы, поэтому мы воспользуемся нехитрыми манипуляциями с CSS стилями: элементу ul задаем свойство display со значением table а тегам li display — table-cell и, вуаля, перед нами уже горизонтальное меню в виде таблицы со всеми вытекающими свойствами. =drop] {
  display: none;
}

nav {  
  margin:0;
  padding: 0;
  background-color: #254441;
}

#logo {
  display: block;
  padding: 0 30px;
  float: left;
  font-size:20px;
  line-height: 60px;
}

nav:after {

  content:»»;
  display:table;
  clear:both;
}

nav ul {
  float: right;
  padding:0;
  margin:0;
  list-style: none;
  position: relative;
  }
   
nav ul li {
  margin: 0px;
  display:inline-block;
  float: left;
  background-color: #254441;
  }

nav a {
  display: block;
  padding: 14px 17px;
  color: #fdf8f8;
  font-size: 18px;
  text-decoration: none;
}

nav ul li ul li:hover { background: #000000; }

nav a:hover {  
  background-color: #000000;  
}

nav ul ul {
  display: none;
  position: absolute;  
  top: 60px;  
}
   
nav ul li:hover > ul {

  display:inherit;
}
   
nav ul ul li {
  width:170px;
  float:none;
  display:list-item;
  position: relative;
}

nav ul ul ul li {
  position: relative;
  top:-60px;
  left:170px;  
}

li > a:after { content: ‘ +’; }
li > a:only-child:after { content: »; }

@media all and (max-width : 768px) {

  #logo {
  display: block;
  padding: 0;
  width: 100%;
  text-align: center;
  float: none;
  }

  nav {
  margin: 0;
  }

  /* Hide the navigation menu by default */
  /* Also hide the */
  .katelovtesa + a,
  .ranitasem {
  display: none;

  }

  /* Stylinf the toggle lable */
  .katelovtesa {
  display: block;
  background-color: #254441;
  padding:14px 20px;  
  color:#FFF;
  font-size:17px;
  text-decoration:none;
  border:none;
  }

  . =drop]:checked + ul {
  display: block;
  }

  nav ul li {
  display: block;
  width: 100%;
  }

  nav ul ul .katelovtesa,
  nav ul ul a {
  padding: 0 40px;
  }

  nav ul ul ul a {
  padding: 0 80px;
  }

  nav a:hover,
  nav ul ul ul a {
  background-color: #000000;
  }
   
  nav ul li ul li .katelovtesa,
  nav ul ul a,
  nav ul ul ul a{
  padding:14px 20px;  
  color:#FFF;
  font-size:17px;  
  }
   
   
  nav ul li ul li .katelovtesa,
  nav ul ul a {
  background-color: #212121;  
  }

  /* Hide Dropdowns by Default */
  nav ul ul {
  float: none;
  position:static;
  color: #ffffff;
  }
   
  nav ul ul li:hover > ul,
  nav ul li:hover > ul {
  display: none;
  }
   
  nav ul ul li {
  display: block;
  width: 100%;
  }

  nav ul ul ul li {
  position: static;

  }

}

@media all and (max-width : 330px) {

  nav ul li {
  display:block;
  width: 94%;
  }

}

Конструктор меню — База знаний 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/

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

Web-разработка • HTML и CSS

Создание горизонтального адаптивного меню для сайта осуществляется с помощью компонента «Navbar». Компонент имеет два режима отображения:

  • десктопный (обычный) — выводятся все элементы меню;
  • мобильный (свёрнутый) — отображается бренд и кнопка «Гамбургер».

Режим отображения меню зависит от ширины viewport браузера. Точка перелома задается с помощью css-класса navbar-expand-{sm…xl}. 

<nav>
    <!-- Контейнер (определяет ширину компонента Navbar) -->
    <div>
        <!-- Бренд и кнопка «Гамбургер» -->
        <a href="#">Brand</a>
        <button type="button" data-toggle="collapse"
                data-target="#navbar-example" aria-controls="navbar-example"
                aria-expanded="false" aria-label="Toggle navigation">
            <span></span>
        </button>
        <!-- Основная часть меню (может содержать ссылки, формы и другие элементы) -->
        <div>
            <!-- Этот блок расположен слева -->
            <ul>
                <li>
                    <a href="#">
                        Первая ссылка <span>(текущая)</span>
                    </a>
                </li>
                <li>
                    <a href="#">Вторая ссылка</a>
                </li>
                <li>
                    <a href="#"
                       role="button" data-toggle="dropdown" aria-haspopup="true"
                       aria-expanded="false">
                        Выпадающее меню
                    </a>
                    <div aria-labelledby="navbarDropdown">
                        <a href="#">Третья ссылка</a>
                        <a href="#">Четвертая ссылка</a>
                        <div></div>
                        <a href="#">Пятая ссылка</a>
                    </div>
                </li>
                <li>
                    <a href="#">Не активная</a>
                </li>
            </ul>
            <!-- Этот блок расположен справа -->
            <form>
                <input type="search" placeholder="Search"
                       aria-label="Search">
                <button type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>

Для установки цветового оформления меню используются еще два дополнительных класса: navbar-{…} и bg-{…}. Для установки цвета фона к bg-{…} необходимо добавить любую из восьми цветовых схем — primary, secondary, dark, light, warning, danger, info, success. Класс navbar-{…} отвечает за цвет текста и поддерживает два варианта — navbar-dark и navbar-light. 

<nav>
    ..........
</nav>

Для «NavBar» не обязателен контейнер, но если необходимо ограничить ширину всего меню, то можно его обернуть в .container. 

<div>
    <nav>
        ..........
    </nav>
</div>

Если же нужно ограничить ширину только содержимого, а само меню отображать на всю ширину страницы, то .container следует поместить внутри .navbar. 

<nav>
    <div>
        ..........
    </div>
</nav>

Для позиционирования меню фреймворк предлагает три дополнительных класса:

  • fixed-top — фиксирует меню в самом верху страницы;
  • fixed-bottom — фиксирует меню в самом низу страницы;
  • sticky-top — приклеивает меню в верху при прокрутке страницы.
<nav>
    ..........
</nav>
<nav>
    ..........
</nav>
<nav>
    ..........
</nav>

Элементы меню

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

Название или логотип компании

<nav>
    <!-- Текстовая ссылка -->
    <a href="#">Brand</a>
    ..........
</nav>
<nav>
    <!-- Ссылка с логотипом -->
    <a href="#">
        <img src="/images/logo.png" alt="...">
    </a>
    ........ ..
</nav>
<nav>
    <!-- Ссылка с логотипом и текстом-->
    <a href="#">
        <img src="/images/logo.png" alt="...">
        Brand
    </a>
    ..........
</nav>
<nav>
    <!-- Как заголовок без ссылки-->
    <span>Brand</span>
    ..........
</nav>

Кнопка для открытия меню

Имеет css-класс .navbar-toggler и предназначена для показа и скрытия содержимого меню .collapse.navbar-collapse на малениких экранах: 

<nav>
    ..........
    <button type="button" data-toggle="collapse"
            data-target="#navbar-example" aria-controls="navbar-example"
            aria-expanded="false" aria-label="Toggle navigation">
        <span></span>
    </button>
    ..........
</nav>

Блок содержимого меню

Имеет css-классы .collapse.navbar-collapse и скрывается в контрольной точке, которая задается классом navbar-expand-{sm…xl}. Может быть показано и скрыто по клику на кнопке .navbar-toggler: 

<nav>
    ..........
    <div>
        ..........
    </div>
    ..........
</nav>

Блок ссылок меню

Имеет css-класс .navbar-nav и состоит из ссылок и вложенных выпадающих списков со ссылками: 

<nav>
    ..........
    <div>
        <ul>
            <li>
                <a href="#">
                    Первая ссылка <span>(текущая)</span>
                </a>
            </li>
            <li>
                <a href="#">Вторая ссылка</a>
            </li>
            <li>
                <a href="#"
                   role="button" data-toggle="dropdown" aria-haspopup="true"
                   aria-expanded="false">
                    Выпадающее меню
                </a>
                <div aria-labelledby="navbarDropdown">
                    <a href="#">Третья ссылка</a>
                    <a href="#">Четвертая ссылка</a>
                    <div></div>
                    <a href="#">Пятая ссылка</a>
                </div>
            </li>
            <li>
                <a href="#">Не активная</a>
            </li>
        </ul>
        . .........
    </div>
    ..........
</nav>

Форма внутри меню

<nav>
    ..........
    <div>
        ..........
        <form>
            <input type="search" placeholder="Search"
                   aria-label="Search">
            <button type="submit">Search</button>
        </form>
    </div>
    ..........
</nav>

Текст внутри меню

Класс .navbar-text — позволяет добавлять текст в меню. 

<nav>
    <span>Brand</span>
    <button type="button" data-toggle="collapse"
            data-target="#navbar-example" aria-controls="navbar-example"
            aria-expanded="false" aria-label="Toggle navigation">
        <span></span>
    </button>
    <div>
        <ul>
            <li>...</li>
            <li>...</li>
            <li>...</li>
        </ul>
        <!-- Текст внутри меню -->
        <span>Navbar text with an inline element</span>
        <form>
            ..........
        </form>
    </div>
</nav>

Поиск: Bootstrap • CSS • HTML • Web-разработка • Верстка • Компонент • Меню • Навигация • Фреймворк • Navbar

Боковая панель — HTML

Большинство сайтов имеют боковую панель или, как её ещё называют, сайдбар. Он служит для отображения информации, которая дополняет основной текст, но не является обязательной. Чаще всего это меню раздела, список определений из статьи, виджеты и т.д.

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

<header>
    <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
    <nav> <!-- Меню -->
        <ul>
            <li><a href="/">Главная</a></li>
            <li><a href="/about">О нас</a></li>
            <li><a href="/contacts">Контакты</a></li>
        </ul>
    </nav>
</header>

<aside> <!-- Боковая панель (сайдбар) -->
    <nav> <!-- Дополнительное меню раздела -->
        <ul>
            <li><a href="/service-1/">Услуга 1</a></li>
            <li><a href="/service-2/">Услуга 2</a></li>
            <li><a href="/service-3/">Услуга 3</a></li>
        </ul>
    </nav>
</aside>

<main>
    <p>Основной контент страницы.  Это может быть статья, описание услуги, данные на странице контакты</p>

    <section>
        <h3>Оставить заявку</h3>
        <form>
            <!-- Здесь форма заказа услуги -->
        </form>
    </section>

    <section>
          <h3>Читайте также</h3>
          <article>
              <h4>Услуга 2</h4>
              <p>Описание новой услуги</p>
              <a href="#">Ссылка на услугу</a>
          </article>

          <article>
              <h4>Услуга 3</h4>
              <p>Описание новой услуги</p>
              <a href="#">Ссылка на услугу</a>
          </article>

          <article>
              <h4>Услуга 4</h4>
              <p>Описание новой услуги</p>
              <a href="#">Ссылка на услугу</a>
          </article>
    </section>
</main>

Обратите внимание, что aside содержится вне тега main. Этот контент не обязан быть уникальным на каждой странице. Он может быть уникальным для каждого конкретного раздела (если речь идёт, например, о меню). Если боковая панель уникальна для каждой страницы, то она должна быть расположена внутри тега main.

Задание

Создайте шапку сайта. Она состоит из 2-х элементов:
* Логотип
* Секция навигации. Внутри неё маркированный список из двух элементов

Добавьте секцию main. Внутри создайте секцию с заголовком в теге h3 и два блока с описанием новых услуг. Не забудьте, что внутри тега article обязательно содержится заголовок. Сами заголовки внутри article разметьте тегом h4.

Добавьте боковую панель. Она является уникальной для каждой страницы и содержит текст, относящийся только к этой странице. Внутри панели вставьте произвольный текст.

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github. com/hexlet-basics

Семантический HTML — Основы современной вёрстки

Основы современной вёрстки

При создании вёрстки нужно учитывать семантику, то есть смысловое (логическое) значение элементов.

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

Вторая важная причина необходимости создания семантической вёрстки — использование страниц людьми с ограниченными возможностями. Слабовидящие пользователи используют «скринридеры» — устройства или приложения, воспроизводящие голосом элементы страницы. Чтобы скринридер мог правильно понять, где содержится основная информация, меню, поясняющие блоки и так далее, мы должны правильно разметить страницу. Это поможет устройствам правильно разбить страницу на логические блоки и дать возможность посетителям корректно перемещаться по странице. Такая концепция называется «Доступный WEB».

Запомните: минимальная доступность лучше, чем её отсутствие.

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

Шапка сайта

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

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

Один из примеров шапки сайта:

<header>
    <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
    <div> <!-- Меню -->
        <ul>
            <li><a href="/">Главная</a></li>
            <li><a href="/about">О нас</a></li>
            <li><a href="/contacts">Контакты</a></li>
        </ul>
    </div>
</header>

По своему поведению тег header работает так же, как и простой div. Почти все семантические элементы являются блочными и не имеют стилей по умолчанию. Это позволяет очень быстро добавить семантику в уже существующие проекты. Если стили в этих проектах не завязаны на тегах, то достаточно просто сменить название с div на header и мы получим уже семантичную шапку сайта.

Навигация

Попробуйте взглянуть на шапку сайта из примера выше глазами компьютера. Что он там видит?

  • Картинку.
  • Блочный элемент div.
  • Маркированный список.
  • Набор ссылок.

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

Как же нам ему помочь? Для этого в стандарте HTML5 появился тег nav. Он обозначает навигационную область. Причём помочь отделить основное меню от меню раздела можно с помощью других тегов, речь о которых пойдёт ниже.

Заменим простой блочный элемент div на его семантичного брата nav:

<header>
    <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
    <nav> <!-- Меню -->
        <ul>
            <li><a href="/">Главная</a></li>
            <li><a href="/about">О нас</a></li>
            <li><a href="/contacts">Контакты</a></li>
        </ul>
    </nav>
</header>

Главной особенностью использования nav является то, что не обязательно оборачивать все меню на странице. Обычно достаточно обернуть только главное меню и, например, не оборачивать меню в футере. При этом не запрещается иметь сразу несколько элементов nav на странице. Выделяйте ими главные меню на странице.

Уникальный контент

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

Для разметки уникального контента в стандарте HTML5 появился специальный тег main. Именно он поможет обозначить область с самым важным контентом на странице. Старайтесь в нём держать только контент. Обычно меню, боковые панели и футер в эту область не входят. Исключением может быть только ситуация, если эти блоки действительно уникальны для данной страницы. Например, меню может вести по разделам страницы. В таком случае оно на полных правах может быть включено в область уникального контента.

Добавим такую область в нашу вёрстку:

<header>
    <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
    <nav> <!-- Меню -->
        <ul>
            <li><a href="/">Главная</a></li>
            <li><a href="/about">О нас</a></li>
            <li><a href="/contacts">Контакты</a></li>
        </ul>
    </nav>
</header>

<main>
    <h2>Хекслет — практические курсы по программированию</h2>

    <p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
    <p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?».  Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p>
    <p>Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства. </p>
</main>

Наличие тега main также очень важно для мобильных браузеров. Вы могли видеть, что многие из них имеют функцию «Режим чтения». При его включении браузер автоматически удалит всё оформление и все ненужные блоки, оставив только главный контент. Этим контентом и будет являться область, заключённая в тег main. Такой режим отлично подходит для людей, у которых, в настоящий момент, слабое подключение к интернету.

Так как внутри main содержится уникальный контент страницы, то разрешено использовать только один такой тег на странице.

Секции

Контент на странице не является однородным. Обычно это цепочка логических областей, каждая из которых описывает что-то конкретное. Например, на странице могут присутствовать область с описанием преимуществ, цены, формы и так далее. Их хочется как-то выделить. И на это есть несколько причин:

  • С правильно разделённым контентом удобно работать. Мы легко можем перемещать такие области, менять местами или удалять. В коде их будет легко найти.
  • Правильная группировка разделов — важная часть при создании доступного web’а.

Для таких самостоятельных логических единиц существует специальный тег section, который внутри себя может содержать одну конкретную секцию. Добавим её в наш пример:

<header>
    <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
    <nav> <!-- Меню -->
        <ul>
            <li><a href="/">Главная</a></li>
            <li><a href="/about">О нас</a></li>
            <li><a href="/contacts">Контакты</a></li>
        </ul>
    </nav>
</header>

<main>
    <h2>Хекслет — практические курсы по программированию</h2>

    <p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением.  Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
    <p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p>
    <p>Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства. </p>

    <section>
        <h3>Преимущества</h3>

        <ul>
            <li>Много теории</li>
            <li>Много практики</li>
            <li>Много менторов</li>
        </ul>
    </section>
</main>

Заметьте, как легко стало искать преимущества в коде, ведь они находятся в отдельной секции. Также вы могли обратить внимание на заголовок внутри секции. Так как секция — это самостоятельная единица, то почти всегда она имеет свой заголовок. Хоть это и не всегда так, и стандарт не обязывает нас включать заголовок в секцию, но старайтесь придерживаться этого правила.

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

Независимые секции

Другим способом выделить логический участок текста является использование тега article. Может показаться, что какой смысл иметь два различных тега для выделения одного и того же?

Между section и article есть одна существенная разница: article является независимой секцией, то есть её можно перенести на любую страницу сайта или даже на другой сайт, и при этом она не потеряет своего контекста.

Представьте себе блог и отдельную статью в нём. Можем ли мы понять статью, если она вдруг окажется не в блоге, а, например, на странице с услугами? Конечно! Ведь статья — это законченный текст. Следовательно, такую статью можно обернуть в тег article.

Добавим колонку новостей в наш пример вёрстки. Сразу подумаем, как она может быть разделена. Сами по себе новости являются достаточно уникальным элементом, ведь даже если их перенести на другую страницу, то они не потеряют свою актуальность. В этом случае каждую новость можно обернуть в article. А что делать с обёрткой блока? Она объединяет по смыслу несколько различных новостей, её можно спокойно назвать одним словом, и она точно будет иметь свой заголовок. Следовательно, ей подойдёт тег section.

<header>
    <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
    <nav> <!-- Меню -->
        <ul>
            <li><a href="/">Главная</a></li>
            <li><a href="/about">О нас</a></li>
            <li><a href="/contacts">Контакты</a></li>
        </ul>
    </nav>
</header>

<main>
    <h2>Хекслет — практические курсы по программированию</h2>

    <p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
    <p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p>
    <p>Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства.  </p>

    <section>
        <h3>Преимущества</h3>

        <ul>
            <li>Много теории</li>
            <li>Много практики</li>
            <li>Много менторов</li>
        </ul>
    </section>

    <section>
        <h3>Новости</h3>

        <article>
            <h4>Новость 1</h4>
            <p>Текст новости 1</p>
            <a href="#">Подробнее</a>
        </article>

        <article>
            <h4>Новость 2</h4>
            <p>Текст новости 2</p>
            <a href="#">Подробнее</a>
        </article>

        <article>
            <h4>Новость 3</h4>
            <p>Текст новости 3</p>
            <a href="#">Подробнее</a>
        </article>
    </section>
</main>

Дополняющие секции

Ещё одним крупным контейнером для нашего контента служит тег aside. Это область с дополнительной информацией. Она может быть как связана с текущей страницей, так и не очень. Подобные секции вы можете встречать в виде боковых панелей на сайтах. Там содержится дополнительное меню, баннеры, реклама и другая информация.

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

Давайте добавим такую информацию в нашу вёрстку. Внутри этой дополнительной секции будет находиться ещё одно меню, которое не будем оборачивать в nav, так как оно не является основным.

<header>
    <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
    <nav> <!-- Меню -->
        <ul>
            <li><a href="/">Главная</a></li>
            <li><a href="/about">О нас</a></li>
            <li><a href="/contacts">Контакты</a></li>
        </ul>
    </nav>
</header>

<aside>
    <div>
        <a href="#">Необязательный пункт 1</a>
        <a href="#">Необязательный пункт 2</a>
        <a href="#">Необязательный пункт 3</a>
    </div>
</aside>

<main>
    <h2>Хекслет — практические курсы по программированию</h2>

    <p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением.  Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
    <p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p>
    <p>Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства. </p>

    <section>
        <h3>Преимущества</h3>

        <ul>
            <li>Много теории</li>
            <li>Много практики</li>
            <li>Много менторов</li>
        </ul>
    </section>

    <section>
        <h3>Новости</h3>

        <article>
            <h4>Новость 1</h4>
            <p>Текст новости 1</p>
            <a href="#">Подробнее</a>
        </article>

        <article>
            <h4>Новость 2</h4>
            <p>Текст новости 2</p>
            <a href="#">Подробнее</a>
        </article>

        <article>
            <h4>Новость 3</h4>
            <p>Текст новости 3</p>
            <a href="#">Подробнее</a>
        </article>
    </section>
</main>

Дополнительное задание

Создайте файл index.html на своём компьютере и создайте собственное резюме. Используйте изученные в этом уроке теги.

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

CSS Горизонтальная панель навигации

Горизонтальная панель навигации

Есть два способа создать горизонтальную панель навигации. Используя встроенные или плавающие элементов списка.

Встроенные элементы списка

Одним из способов создания горизонтальной панели навигации является указание элементов

  • как встроенный, в дополнение к «стандартному» коду с предыдущей страницы:

    Объяснение примера:

    • Дисплей: встроенный; — По умолчанию элементы
    • являются блочными.Мы тут удалить разрывы строк до и после каждого элемента списка, чтобы отобразить их в одной строке

    Элементы плавающего списка

    Еще один способ создания горизонтальной панели навигации — разместить

  • элементы и укажите макет для ссылок навигации:

    Пример

    Ли {
    плыть налево;
    }

    а {
    дисплей: блок;
    отступ: 8 пикселей;
    цвет фона: #dddddd;
    }

    Попробуй сам »

    Объяснение примера:

    • поплавок: левый; — используйте float, чтобы элементы блока скользили рядом друг с другом
    • дисплей: блок; — Позволяет указать отступы (и высота, ширина, поля и т. д.если хотите)
    • отступ: 8 пикселей; — Поскольку блочные элементы занимают всю доступную ширину, они не могут плавать рядом друг с другом. Поэтому укажите отступы, чтобы они хорошо выглядят
    • цвет фона: #dddddd; — Добавить серый цвет фона к каждому элементу a

    Совет: Добавьте цвет фона в

    Примечание. Этот материал был первоначально опубликован как часть учебной программы Opera Web Standards Curriculum, доступной как 23: Создание нескольких страниц с меню навигации, написанной Кристианом Хейльманном.Как и оригинал, он опубликован под лицензией Creative Commons Attribution, Non Commercial — Share Alike 2. 5.

    Далее: Проверка вашего HTML.

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

    Введение

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

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