Мы предлагаем вам ознакомиться с новой техникой по созданию респонсив (адаптивного) меню без использования Javascript. Она использует чистые и семантические разметки HTML5. Меню может быть выровнено по левому краю, по центру или справа. Это меню переключается при наведении, что является более удобным для пользователей. У него также есть индикатор, который показывает “работающий/поточный” пункт меню. Он работает на всех мобильных и настольных браузерах, включая Internet Explorer!

Цель

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

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

Nav HTML разметка

Вот разметка для навигации. Тег <nav> необходим для создания выпадающего меню со свойством CSS абсолютной позиции. Мы объясним это в уроке позже. .current класс указывает на активные/текущие ссылки меню.

<nav class="nav">    <ul>    <li class="current"><a href="#">Portfolio</a></li>    <li><a href="#">Illustration</a></li>    <li><a href="#">Web Design</a></li>    <li><a href="#">Print Media</a></li>    <li><a href="#">Graphic Design</a></li>    </ul>    </nav>

CSS

CSS для навигации (вид с рабочего стола) является довольно простым, так что мы не собираемся вдаваться в подробности. Обратите внимание, что мы указали display:inline-block вместо float:left в NAV элемента <li>. Это позволит кнопкам меню выстроиться по левому краю, по центру или вправо, указав text-align на <ul> элементе.

/* nav */    .nav {    position: relative;    margin: 20px 0;    }    .nav ul {    margin: 0;    padding: 0;    }    .nav li {    margin: 0 5px 10px 0;    padding: 0;    list-style: none;    display: inline-block;    }    .nav a {    padding: 3px 12px;    text-decoration: none;    color: #999;    line-height: 100%;    }    .nav a:hover {    color: #000;    }    .nav .current a {    background: #999;    color: #fff;    border-radius: 5px;    }

Центр и выравнивание по правому краю

Как уже упоминалось выше, вы можете изменить выравнивание кнопок с помощью “text-align”.

/* right nav */    .nav.right ul {    text-align: right;    }    /* center nav */    .nav.center ul {    text-align: center;    }

Поддержка Internet Explorer

HTML5 <nav> тег и медиа запросы не поддерживаются Internet Explorer 8 и старше версиями. Включите CSS3-mediaqueries.js (или respond.js) и html5shim.js, чтобы обеспечить резервную поддержку. Если вы не хотите добавлять html5shim.js, то тогда замените <nav> тег на <div>тег.

<!--[if lt IE 9]>    <script src=  "//css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js">  </script>    <script src="//html5shim.googlecode.com/svn/trunk/html5.js">  </script>    <![endif]-->

Респонсив меню

Здесь начинается самое интересное – создание респонсивности меню с медиа запросами! На 600px мы установили nav элемент в относительное положение, чтобы возможно было поместить <ul> список меню вверху с абсолютной позицией. Мы скрыли все элементы <li> указав display:none, но оставили .current <li> отображающийся в виде блока. Затем на NAV ховере, мы поставили все <li> на display:block (это даст результат выпадающего списка). Мы добавили графический значок на проверку .current элемента, чтобы указать, что этот элемент является активным. Для выравнивания меню по центру и справа, используйте левую и правую собственности позиционирования <ul> списка.

@media screen and (max-width: 600px) {    .nav {    position: relative;    min-height: 40px;    }    .nav ul {    width: 180px;    padding: 5px 0;    position: absolute;    top: 0;    left: 0;    border: solid 1px #aaa;    background: #fff url(images/icon-menu.png) no-repeat 10px 11px;    border-radius: 5px;    box-shadow: 0 1px 2px rgba(0,0,0,.3);    }    .nav li {    display: none; /* hide all <li> items */    margin: 0;    }    .nav .current {    display: block; /* show only current <li> item */    }    .nav a {    display: block;    padding: 5px 5px 5px 32px;    text-align: left;    }    .nav .current a {    background: none;    color: #666;    }    &nbsp;    /* on nav hover */    .nav ul:hover {    background-image: none;    }    .nav ul:hover li {    display: block;    margin: 0 0 5px;    }    .nav ul:hover .current {    background: url(images/icon-check.png) no-repeat 10px 7px;    }    &nbsp;    /* right nav */    .nav.right ul {    left: auto;    right: 0;    }    &nbsp;    /* center nav */    .nav.center ul {    left: 50%;    margin-left: -90px;    }    }

Высоких конверсий!

lpgenerator.ru

Описание HTML5-элементов

• Содержание:
• 1. Элемент <header>
• 2. Элемент <nav>
• 3. Элемент <article>
• 4. Элемент <section>
• 5. Элемент <aside>
• 6. Элемент <footer>
• 7. Элемент <address>
• 8. Элемент <main>
• 9. Элемент <figure>
• 10. Элемент <figcaption>
• 11. Элемент <time>
• 12. Элемент <mark>
• 13. Элемент <bdi>
• 14. Элемент <wbr>
• 15. Элементы для описания Восточно-Азиатских символов

1. Элемент <header>

Категории контента: потоковое содержимое.
Группирует вводные и навигационные элементы, не является обязательным. Может содержать заголовки, оборачивать содержание раздела страницы, форму поиска или логотип. В HTML-документе может содержаться одновременно несколько элементов <header> и они могут располагаться в любой части страницы.

<header>   <h1>Site description</h1>   <nav>   <ul>   <li><a href="">About</a>   <li><a href="">Forum</a>   <li><a href="">Download</a>   </ul>   </nav>  </header>

Элемент <header> нельзя помещать внутрь элементов <footer>, <address> или другого элемента <header>.

2. Элемент <nav>

Категории контента: потоковое содержимое, секционное содержимое.
Предназначен для создания блока навигации веб-страницы или всего веб-сайта, при этом не обязательно должен находиться внутри <header>. На странице может быть несколько элементов <nav>. Не заменяет теги <ul> или <оl>, он просто их обрамляет. Не все группы ссылок на странице должны быть обёрнуты <nav>, этот элемент предназначен в первую очередь для разделов, которые состоят из главных навигационных блоков.

<nav>   <ul>   <li><a>...</a></li>   <li><a>...</a></li>   <li><a>...</a></li>   </ul>  </nav>

В качестве элементов панели навигации можно использовать не только элементы списков:

<nav>   <p><a href="">...</a></p>   <p><a href="">...</a></p>  </nav>

Также можно добавлять заголовки внутрь элемента:

<nav>   <h2>...</h2>   <ul>   <li><a>...</a></li>   <li><a>...</a></li>   <li><a>...</a></li>   </ul>  </nav>

3. Элемент <article>

Категории контента: потоковое содержимое, секционное содержимое.
Используется для группировки записей — публикаций, статей, записей блога, комментариев. Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка. Может дублироваться на других страницах сайта и содержать внутри другие элементы <article>, которые по содержанию имеют близкое отношение к содержанию внешней статьи. Если на странице присутствует только одна статья с заголовком и текстовым содержимым, она не нуждается в обёртке элементом <article>. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.

<article>   <header>   <h2>...</h2>   </header>   <p>...</p>   <footer>   Опубликовано в категории<a href="">Музыка</a>.   <a href="">0 комментариев</a>   </footer>  </article>

4. Элемент <section>

Категории контента: потоковое содержимое, секционное содержимое.
Элемент представляет собой универсальный раздел документа. Группирует тематическое содержимое и обычно содержит заголовок. Не является блоком-оберткой, для этих целей уместнее использовать элемент <div>. В качестве содержимого может выступать оглавление, разделы научных публикаций, программа мероприятия. Домашняя страница сайта также может быть поделена на секции — блок вводной информации, новости и контакты. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.

<article>   <h1>...</h1>   <section>   <h2>...</h2>   <p>...</p>   </section>   <section>   <h2>...</h2>   <p>...</p>   </section>   <p>...</p>  </article>

<article> внутри <section>

Можно создавать родительские элементы <section> с вложенными элементами <article>, в которых есть один или несколько элементов <article>. Не все страницы должны быть устроены именно так, но это допустимый способ вложения элементов. Например, основная область контента страницы содержит два блока со статьями разной тематики. Можно сделать на этом акцент, поместив каждую статью одной тематики внутрь элемента <section>

<section>   <h1>Заметки о природе</h1>   <article>   <h2>...</h2>   <p>...</p>   </article>   <article>   <h2>...</h2>   <p>...</p>   </article>  </section>  <section>   <h1>Исторические заметки</h1>   <article>   <h2>...</h2>   <p>...</p>   </article>   <article>   <h2>...</h2>   <p>...</p>   </article>  </section>

5. Элемент <aside>

Категории контента: потоковое содержимое, секционное содержимое.
Группирует содержимое, связанное с окружающим его контентом напрямую, но которое можно счесть отдельным (т.е., удаление этого блока не повлияет на понимание основного содержимого). Чаще всего элемент позиционируется как боковая колонка (как в книгах) и включает в себя группу элементов: <nav>, цифровые данные, цитаты, рекламные блоки, архивные записи. Не подходит для блоков, просто позиционированных в стороне.

<aside>   <h2>...</h2>   <p>...</p>  </aside>

<aside>   <h2>...</h2>   <p>...</p>   <blockquote>   <p>...<cite>...</cite>...</p>   <p>...</p>   </blockquote>  </aside>

6. Элемент <footer>

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

В одном веб-документе может быть несколько элементов <footer>. Как каждая страница, так и каждая статья может иметь свой элемент <footer>, более того, <footer> можно поместить в элемент <blockquote>, чтобы указать источник цитирования.

<footer>   <address>...</address>   <small>@2014...</small>  </footer>

7. Элемент <address>

Категории контента: потоковое содержимое.
Используется для определения контактной информации автора/владельца документа или статьи. Для обозначения автора документа тег размещают внутри элемента <body>, для отображения автора статьи — внутри тега <article>. В браузере обычно отображается курсивом.

8. Элемент <main>

Категории контента: потоковое содержимое.
Элемент <main> представляет основное содержимое документа (содержимое элемента <body>). Контент, находящийся внутри элемента, должен быть уникальным и не повторяться во всех документах сайта, таких как навигационные ссылки, информация о копирайте, логотипы, формы поиска (в случае, если форма поиска является основной функцией документа).

Элемент <main> не может быть потомком таких элементов как <article>, <aside>, <footer>, <header> или <nav>.

<body>  <header>   <h1>Пудель</h1>   <nav>   <ul>   <li><a href="index.html">Главная</a></li>   <li><a href="about.html">О породе</a></li>   <li><a href="health.html">Здоровье</a></li>   </ul>   </nav>   </header>   <main>   <section>   <header>   <h2>О породе</h2>   <nav>   <ul>   <li><a href="#basic">Разновидности</a></li>   <li><a href="#app">Внешний вид</a></li>   <li><a href="#temp">Характер</a></li>   </ul>   </nav>   </header>   <section id="basic">   <h3>Разновидности</h3>   <p>...</p>   </section>   <section id="app">   <h3>Внешний вид</h3>   <p>...</p>   </section>   <section id="temp">   <h3>Характер</h3>   <p>...</p>   </section>   <footer>   <a href="#basic">Разновидности</a>   <a href="#app">Внешний вид</a>   <a href="#temp">Характер</a>   </footer>   </section>   </main>   <footer>   <small>Copyright © <time datetime="2016">2016</time> Моя собака.ру</small>   </footer>  </body>

9. Элемент <figure>

Категории контента: потоковое содержимое, корневое секционное содержимое.
Элемент <figure> представляет автономный контент (необязательно с заголовком), являющийся самостоятельным элементом основного потока. Элемент может быть перемещен из основного содержимого документа в боковую колонку или приложение, не затрагивая поток документа. С помощью элемента <figure> можно добавлять краткие характеристики к иллюстрациям, фотографиям, диаграммам, фрагментам кода и т.д..

<figure>   <img src="picture.jpg" alt="Осень">   <figcaption>Осенний лес</figcaption>  </figure>

Элемент <figure> является блочным, по ширине занимает всю ширину блока-контейнера за минусом внешних отступов margin:

margin-left: 40px;  margin-right: 40px;  margin-top: 1em;  margin-bottom: 1em;

10. Элемент <figcaption>

Элемент <figcaption> — потомок элемента <figure>, не принадлежит ни к одной категории контента. Элемент является блочным, по ширине равен ширине элемента <figure>, высота по умолчанию равна 18px.

11. Элемент <time>

Категории контента: потоковое содержимое, текстовое содержимое.
Определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса. Текст, заключенный в данный тег, не имеет стилевого оформления браузером. Для тега доступен атрибут datetime, в качестве содержимого которого указывается то, что будет видеть пользователь на экране своего компьютера:

<time datetime="2014-09-25"> 25 Сентября 2014</time>

Чтобы дата могла считываться автоматически, она должна быть в формате YYYY-MM-DD. Время, которое также может указываться, задается в формате HH:MM с добавлением разделяющего префикса T (time):

<time datetime="2014-09-25T12:00"> 25 Сентября 2014</time>

12. Элемент <mark>

Категории контента: потоковое содержимое, текстовое содержимое.
Текст, помещенный внутрь тега <mark>, выделяется по умолчанию желтым цветом (цвет фона и цвет шрифта в выделенном блоке можно изменить, задав определенные css-стили). С помощью данного тега можно отмечать важное содержимое, а также ключевые слова.

13. Элемент <bdi>

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

14. Элемент <wbr>

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

15. Элементы для описания Восточно-Азиатских символов

Категории контента: потоковое содержимое, текстовое содержимое.
Элемент <ruby> позволяет помечать один и более элементов категории текстовое содержимое с помощью ruby-аннотации. Ruby-аннотация используется в преимущественно в Восточно-Азиатской типографики как руководство по произношению или для включения других характеристик. Элемент может содержать:
— один и более текстовых узлов или элементов <rb>;
— один и более элементов <rt>, <rtc>, каждый из которых предшествует или следует непосредственно за элементом <rp>.

Элементы <rb>, <rt>, <rtc> и <rp> не относятся ни к одной категории контента.

Элемент <rb> определяет вложенный в него текст как базовый компонент аннотации.
Элемент <rt> выводит аннотацию к тексту сверху или снизу над ним.
Элемент <rtc> отмечает вложенный в него текст как дополнительную аннотацию.
Элемент <rp> выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.

html5book.ru

Значение и применение

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

 <nav> <!-- начало навигации --> 	<ul> <!-- маркированный список --> 		<li><a href = "#">Домой</a></li> <!-- ссылка в элементе списка --> 		<li><a href = "#">HTML</a></li> <!-- ссылка в элементе списка --> 		<li><a href = "#">CSS</a></li> <!-- ссылка в элементе списка --> 	</ul> <!--конец списка--> </nav> <!-- конец навигации --> 

---

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

---

Тег <div> имеет довольно общий характер — это просто элемент на уровне блока, используемый для разбиения страницы на разделы. Одна из целей HTML 5 заключается в предоставлении в распоряжение разработчиков широкого выбора из других, семантически более осмысленных тегов.

HTML 5 включает в себя множество различных тегов, чьи имена отражают тип их содержимого, и эти теги могут использоваться вместо тега <div>. HTML 5 предлагает новые блочные семантические элементы для определения различных частей веб-страницы, вы можете детально с ними познакомиться в статье учебника HTML 5 «Теги разметки страницы».

Пример использования

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

 <!DOCTYPE html> <html> 	<head> 		<title>Разметка страницы</title> 	</head> 	<body> 		<header style = "background-color:khaki; height:100px"> 			<p>Верхний колонтитул (тег <header>)</p> 		</header> 		<nav style = "background-color:coral; height:75px"> 			<a href = "#">Ссылка 1</a> | 			<a href = "#">Ссылка 2</a> | 			<a href = "#">Ссылка 3</a> | 		<p>Панель навигации (тег <nav>)</p> 		</nav> 		<aside style = "float:right; width:200px; height:250px; background-color:tan"> 			<p>Справа мы разместили тег <aside></p> 		</aside> 		<main style = "height:250px"> 			<h1>Главный заголовок сайта</h1> 			<p>Основное содержимое (тег <main>)</p> 			<section style = "background-color:grey; height:75px"> 				<h2>Заголовок второго уровня</h2> 				<p>Раздел 1 (тег <section>)</p> 			</section> 			<section style = "background-color:grey; height:75px"> 				<h2>Заголовок второго уровня</h2> 				<p>Раздел 2 (тег <section>)</p> 			</section> 		</main> 		<footer style = "background-color:khaki; height:80px"> 			<p>Нижний колонтитул (подвал) тег <footer></p>  			<address>Пример с сайта basicweb.ru</address> 		</footer> 	</body> </html> 

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

И так по порядку, что мы сделали в этом документе:

• Для элемента <header> (верхний колонтитул) мы задали цвет заднего фона khaki и установили высоту элемента равную 100 пикселям.
• Следующим на странице мы разместили элемент <nav> (навигация), для которого задали те же встроенные CSS свойства, но указали цвет заднего фона coral, а высоту элемента 75 пикселей.
• Далее мы разместили элемент <aside>, который мы сделали плавающим и сместили в правую сторону (CSS свойство float со значением right), задали ему цвет заднего фона (tan), ширину (200 пикселей) и высоту (250 пикселей). Как вы можете заметить другие элементы его обтекают, не смотря на то, что они блочные. Таким образом происходит верстка плавающими элементами. Подробно изучить работу с плавающими элементами вы можете в учебнике CSS в статье «Плавающие элементы».
• Добавили на страницу элемент <main> в который мы добавили заголовок первого уровня (тег <h1>). Прдеполагается, что внутри этого элемента будет содержаться основной контент.
• Внутри элемента <main> мы добавили два тематических раздела (тег <section>), поместили внутри этих элементов заголовки второго уровня (тег <h2>), задали им цвет заднего фона grey и высоту блоков по 75 пикселей.
• После основного содержимого мы разместили элемент <footer> (нижний колонтитул), по аналогии с предыдущими элементами задали ему цвет заднего фона (khaki) и высоту (80 пикселей). Внутри него разместили тег <address>, в котором указали контактные данные, которые по умолчанию отображаются курсивом.

Результат нашего примера:

Разметка страницы на HTML 5.

Значение CSS по умолчанию

 nav { display: block; } 

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

basicweb.ru

Назначение элемента nav

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

Навигация — это фрагмент кода, содержащий ссылки на другие страницы сайта или на разделы этой же страницы. Навигацию обычно оформляют в виде маркарированного списка (ul), элементы li которого содержат элементы a (ссылки). Такой образ представления навигации является самым простым и понятным для поисковых роботов.

  <!-- Секция на странице, содержащая навигацию -->  <nav>   <ul>   <li><a href="/">Главная</a>   <li><a href="news.html">Новости</a>   <li><a href="blog.html">Блог</a>   <li><a href="about.html">О блоге</a>   </ul>  </nav>  

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

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

Пользовательские агенты, такие как программы чтения с экрана, могут извлечь выгоду из навигационной информации. Например, при чтении HTML-страницы они будут знать, что это за фрагмент кода и могут в зависимости от желания пользователя пропустить или предоставить его.

Применение элемента nav

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

  <body>   <h1>Мой сайт</h1>   <!--Навигация по сайту-->   <nav>   <h2>Навигация по сайту</h2>   <ul>   <li><a href="/">Главная</a></li>   <li><a href="html.html">Статьи по HTML</a></li>   <li><a href="html.html">Статьи по CSS</a></li>   <li><a href="html.html">Статьи по JavaScript</a></li>   </ul>   </nav>   <!-- Основное содержимое страницы (статья) -->   <article>   <!-- Заголовок статьи -->   <header>   <h2>Название статьи</h2>   <p>Дополнительная информация...</p>   </header>   <!-- Навигация по этой странице (статье) -->   <nav>   <h3>Содержание статьи:</h3>   <ul>   <li><a href="#section1">Раздел 1</a></li>   <li><a href="#section2">Раздел 2</a></li>   <li><a href="#section3">Раздел 3</a></li>   </ul>   </nav>   <div>   <!-- 1 раздел статьи -->   <section id="section1">   <!-- Заголовок раздела -->   <h3>Раздел 1</h3>   <!-- Содержимое 1 раздела -->   <div>...</div>   </section>   <!-- 2 раздел статьи -->   <section id="section2">   <!-- Заголовок раздела -->   <h3>Раздел 2</h3>   <!-- Содержимое 2 раздела -->   <div>...</div>   </section>   <!-- 3 раздел статьи -->   <section id="section3">   <!-- Заголовок раздела -->   <h3>Раздел 3</h3>   <!-- Содержимое 3 раздела -->   <div>...</div>   </section>   </div>   <!-- Футер статьи -->   <footer>   ...   </footer>   </article>   <!-- Футер страницы -->   <footer>   <p>Мой сайт, 2015.</p>   </footer>  </body>  

Элемент nav не обязательно должен содержать навигацию в виде списка. Навигация также может быть представлена другим контентом.

Например, рассмотрим следующий вариант навигации сайта:

  <nav>   <h1>Навигация</h1>   <p>Вы находитесь на моей главной странице. Это отправная точка, с которой Вы можете путешествовать по моему ресурсу. Если Вы хотите познакомиться с моими записями, то переходите в <a href="blog">"Мой блог"</a>. Если Вам интересны проекты, над которыми я сейчас работаю, то переходите в <a href="laboratory">"Мою лабораторию</a>. А если Вы хотите увидеть мои разработки или приобрести их, то переходите в раздел <a href="ready">"Готовые решения"</a>.</p>   <p>У Вас есть вопросы ко мне или Вы хотите узнать больше информации об проектах, то посетите страницу <a href="about">"О блоге"</a>.</p>  </nav>  </p>  

itchief.ru

Простое HTML-меню навигации с использованием CSS

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

Демо-версия содержит меню в 6 различных цветовых тонах, но в руководстве я рассмотрю один вариант внешнего вида меню.

HTML

В разделе body HTML-документа добавьте несколько гиперссылок маркированным списком (<ul>) и оберните их в HTML 5 nav. Смотрите приведенный ниже код:

Пояснение

.nav выступает в роли основного контейнера для меню навигации, этот класс назначен элементу навигации HTML5 (nav). .nav__list назначен маркированному списку (ul), он действует как список ссылок. .nav__list__item — это класс, назначенный для элементов списка (li).

Я использовал классы практически для всех элементов кроме гиперссылок. Назначение классов позволяет избежать специфичности CSS.

Когда я работаю с CSS, я предпочитаю задавать имена классов согласно методологии BEM.

Еще одна особенность, которая заметна в коде — это теги комментариев HTML. Постараемся избежать перемещения элементов списка влево или вправо, поэтому для простоты я буду использовать свойство display: inline-block. Таким образом, теги комментариев удаляют крошечное пространство между элементами, связанное с display: inline-block.

Если вы предпочитаете делать элементы списка блочными и смещать их влево, необходимо использовать хак clearfix, чтобы разобраться со смещением HTML nav.

CSS

Теперь поместите следующий код внутри тегов стиля в разделе head или в отдельном внешнем файле CSS:

Прежде чем перейти к объяснению приведенного выше кода, посмотрите наше меню навигации на основе nav class HTML в действии:

Демо-версия

Пояснение

Я написал CSS, следуя mobile-first подходу к разработке адаптивного дизайна. Сначала мы обнуляем значения padding и margin для списка ссылок.

Затем задаем стиль и размер для гиперссылок. Я добавил некоторые дополнения к ссылкам, чтобы они выглядели прямоугольными.

Затем делаем элементы списка (<.nav__list__item>) и гиперссылки блочными элементами (display: block). Благодаря этому они будут отображаться свернутыми на планшетах и смартфонах.

Я также использую для ссылок переход, чтобы задать эффект медленного перехода цвета фона. Чтобы меню не отображалось свернутым на стационарных устройствах, я использовал медиа-запросы CSS3, а также сделал элементы списка и гиперссылки на больших экранах элементами inline-block. Это заставит их располагаться горизонтально один за другим.

Затем для улучшения внешнего вида я добавил для элементов списка цвет границы. Установил значение свойства text-decoration — none, чтобы удалить подчеркивание гиперссылок по умолчанию.

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

Это все! Вы можете поэкспериментировать с CSS-свойствами, чтобы сделать свое меню на основе HTML 5 nav более привлекательным.

Перевод статьи «Creating a Simple Responsive Navigation menu with CSS» дружной командой проекта Сайтостроение от А до Я.