Создание навигационного меню сайта не представляет из себя ничего сложного. Первое с чего нужно начать это создание элемента <nav> (открывающий и закрывающий тег обязателен). Внутри этого элемента мы размещаем неупорядоченный список и пишем название для каждого элемента меню.
Вот так это должно выглядеть:
Обратите внимание что каждый пункт меню представляет собой ссылку на ту или иную страницу Вашего сайта (в моем случае они никуда не ведут поэтому вместо URL-адреса допустимо использовать "решетку").
Вот что мы получаем на выходе:
Однако это совсем не то меню, которое мы привыкли видеть на различных интернет-сайтах. Как же быть? Решение есть! Применяем к нашему меню css-стили:
Думаю что дополнительные комментарии к этому скриншоту будут излишними. Скажу только что все вышепредставленные стили применяются к трем элементам меню: <ul>, <li> и <a>. Сохраняем примененные css-файл, обновляем html-страницу и получаем следующее:
Поздравляю! Вы создали свое первое навигационное меню!)
К статье будет прикреплен исходный код для копирования.
Для меню:
<nav>
<ul>
<li><a href="вставить символ решетки">Стационарные компьютеры</a></li>
<li><a href="вставить символ решетки">Ноутбуки</a></li>
<li><a href="вставить символ решетки">Смартфоны</a></li>
<li><a href="вставить символ решетки">Планшеты</a></li>
<li><a href="вставить символ решетки">Аксессуары</a></li>
</ul>
</nav>
Для стилей:
ul {
list-style: none; /*убираем маркеры списка*/
margin: 0; /*убираем верхнее и нижнее поле, равное 1em*/
padding-left: 0; /*убираем левый отступ, равный 40px*/
text-align: center; /*выравниваем меню по центру*/
font-family: Arial; /*выбираем нужный шрифт*/}
ul > li {
display: inline-block;/*выравниваем меню по горизонтали*/
margin-right: 30px; /*задаем расстояние между словами*/}
a {text-decoration: none; /*убираем подчеркивание текста ссылок*/}
Спасибо за внимание!
Появились вопросы? Что-то не получилось? Пишите в комментариях. Вместе мы сможем со всем разобраться)
Если статья оказалась полезной предлагаю подписаться на канал.