Как сделать меню навигации в HTML и CSS для сайта

Автор статьи: admin

Метки: CSS / HTML / Как сделать / Новичку

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

Также, перед тем как начать читать эту статью, рекомендуется сначала прочитать наш учебник по HTML и учебник по CSS.

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<header>

    <h4>Header</h4>

</header>

<main>

    <nav>

        <ul>

            <li><a href=»#»>Главная</a></li>

            <li><a href=»#»>Новости</a></li>

            <li><a href=»#»>Игры</a></li>

            <li><a href=»#»>Продукты</a></li>

        </ul>

    </nav>

    <div>

        <h2>Content</h2>

    </div>

</main>

Тут всё понятно, единственное, что смущает, это тег <nav>, он нужен для обозначения, что внутри него будет меню навигации.

Примечание:

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

Теперь добавим в тег <nav> список <ul>, что бы сделать меню.

1

2

3

4

5

6

<ul>

    <li><a href=»#»>Главная</a></li>

    <li><a href=»#»>Новости</a></li>

    <li><a href=»#»>Игры</a></li>

    <li><a href=»#»>Продукты</a></li>

</ul>

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

Как видите всё работает не так как нам надо, теперь с помощью CSS сделаем так, что бы меню стало с левого бока от контента.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

header {

  border: black 2px solid;

}

 

main nav {

  display: inline-block;

  width: 200px;

  border: black 2px solid;

  margin-right: 10px;

  padding: 10px 20px;

  float: left;

}

 

main nav ul {

  padding: 0;

}

 

main nav ul li {

  list-style-type: none;

}

 

main . content {

  display: inline-block;

  width: 500px;

  border: black 2px solid;

  float: left;

}

Как можете заметить для тега <nav> и <div> с классом «content», используем свойство display со значение «inline-block», то есть эти два блока принимают свойства как строчных, так и блочных элементов.

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

Примечание:

В современных проектах не используется блочно строчные элементы и float, сейчас используются FlexBox или Grid, но новичкам это стоит знать, поэтому в статье используются именно это.

Вот результат.

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

Как сделать горизонтальное меню:

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

Сначала надо внести изменения в HTML, мы просто перетащим навигацию в header.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<header>

    <h4>Header</h4>

    <nav>

        <ul>

            <li><a href=»#»>Главная</a></li>

            <li><a href=»#»>Новости</a></li>

            <li><a href=»#»>Игры</a></li>

            <li><a href=»#»>Продукты</a></li>

        </ul>

    </nav>

</header>

<main>

    <div>

        <h2>Content</h2>

    </div>

</main>

Просто перенесли всё навигацию на верх, теперь изменим CSS.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

header {

  border: black 2px solid;

}

 

header nav {

  width: 600px;

  border: black 2px solid;

  margin-right: 10px;

  padding: 10px 20px;

}

 

header nav ul {

  display: flex;

  justify-content: space-around;

  padding: 0;

}

 

header nav ul li {

  list-style-type: none;

}

 

main . content {

  border: black 2px solid;

}

Тут самое важное, это то, что для работы с FlexBox, нужно сделать значение свойства display, «flex», что и сделали для тега <ul>.

Дальше, после этого идёт свойство justify-content, которое нужно для определения пространства между дочерними блоками, в нашем случае принимает значение «space-around», что означает равномерное распределение пространства, вот результат.

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

Вывод:

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

Подписываетесь на соц-сети:

Оценка:

Количество оценивших: 2
Средняя оценка: 3,00

Загрузка. ..

Поделится:

Пока кнопок поделиться нет

Также рекомендую:

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

Если Вы занимаетесь веб-дизайном либо у Вас есть собственный сайт (блог), то Вы знакомы с тем, как создается меню и пункты в нем. Если мы рассматриваем какую-либо систему управления сайтом (CMS), то там вручную создавать пункты меню не надо – всё делается на автомате. Это с одной стороны хорошо, а с другой стороны плохо…

Автоматическое создание меню хорошо тогда, когда пользователь вообще не имеет представления о том, что такое HTML, PHP, CSS, JavaScript. В CMS достаточно ввести названия страниц, рубрик и т.п. и меню будет сформировано. А вот плох такой режим его создания тем, что если Вам необходимо внести какие-то правки в структуру меню, то тут без специалиста уже не обойтись. Более того, даже специалисты зачастую вынуждены коренным образом переписывать код вывода меню CMS, чтобы удовлетворить желания заказчика (кстати исполнителей рекомендую искать здесь).

Скажу больше: если мы возьмем самую популярную на сегодняшний день CMS – WordPress, то названия рубрик в сайдбаре сортируются автоматически по алфавиту. Изменить порядок их вывода без специального плагина силами самой CMS нельзя…

Если Вы хорошо знаете HTML, JavaScript, то создать меню любого вида для Вас не представляет никакой сложности. А вот если эти языки программирования Вы знаете лишь поверхностно или вовсе о них слышите впервые, то задача окажется для Вас скорее всего неподъемной, особенно если дело касается выпадающего меню.

Pure CSS Menu – онлайн генератор меню для сайта. С его помощью Вы сможете сделать выпадающее вертикальное либо горизонтальное меню

с необходимым количеством подпунктов.

Пример горизонтального выпадающего меню

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

Кому может быть полезен сервис

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

Как создать меню

Создание меню при помощи сервиса Pure CSS Menu происходит в визуальном редакторе. Для начала на вкладке «Templates» выберите необходимый шаблон меню из восьми доступных. Не обращайте пока внимания на количество пунктов и подпунктов меню, размер шрифта, цвет и пр. – всё это можно настроить, перейдя в закладку «Parameters».

Выбор шаблона меню

Настройка параметров меню

Пункты и подпункты меню, их названия, порядок следования, ссылки и пр. определяются в настройках редактора, которые можно найти, перейдя по закладке «Items». Т.к. многие не знают английского, объясню значение кнопок этого окна.

Настройка пунктов меню

1 – добавить пункт меню в конец всего списка
2 — добавить пункт меню сразу за активным (выделеным) в редакторе пунктом
3 – добавить подпункт в активный (выделеный) пункт меню
4 – удалить пункт (подпункт) меню
5 – удалить все пункты меню с подпунктам

Не забудьте указать ссылки для каждого пункта меню, подсказки при наведении и способ открытия ссылок в соответствующих полях под областью предпросмотра меню!

Свойства пунктов меню

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


Внутри архива Вы найдете папку «images» с графическими файлами, которые используются в меню, а также файл «purecssmenu.html» со сгенерированным кодом. Загружайте папку с картинками в директорию Вашего сайта, вставляйте код меню в нужное место и наслаждайтесь отличным выпадающим меню, написанном на простом HTML + CSS.

Видеоурок по созданию выпадающего меню:

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

Структура меню | Web Accessibility Initiative (WAI)

в учебнике по меню

Обзор

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

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

Ненумерованный список

Используйте неупорядоченный список (

Пометьте меню, чтобы их было легче найти и понять. Метки должны быть короткими, но описательными, чтобы пользователи могли различать несколько меню на веб-странице. Используйте заголовок aria-label или aria-labeled by для предоставления метки. Эти методы описаны в учебнике по маркировке областей.

Код: HTML

Указать текущий элемент

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

Использование невидимого текста

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

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

В следующем примере пункт меню имеет невидимый текст «Текущая страница:», а элемент заменен на с классом current :

Код: HTML
 
  • 
<диапазон>
Текущая страница: 
Космические медведи


    •

    Использование WAI-ARIA

    Используйте атрибут aria-current="page" для указания текущей страницы в меню. Этот метод особенно полезен, когда якорь ( ) не может быть удален из HTML.

    В следующем примере ссылка в навигации указывает на основное содержимое страницы.

    Код: HTML
     
  • 

Космические медведи


    •

    Помогите улучшить эту страницу

    Пожалуйста, поделитесь своими идеями, предложениями или комментариями по электронной почте в общедоступном архивном списке wai-eo-editors@w3.org или через GitHub.

    Электронная почта Fork & Edit на GitHubNew GitHub Issue

    Back to Top

    Navbar · Bootstrap

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

    Как это работает

    Вот что вам нужно знать перед началом работы с панелью навигации:

    • Для панелей навигации требуется упаковка
      .navbar       с .navbar-expand{-sm|-md|-lg|-xl} для адаптивного свертывания и классов цветовых схем.
    • Панели навигации и их содержимое изменчивы по умолчанию. Используйте дополнительные контейнеры, чтобы ограничить их ширину по горизонтали.
    • Используйте наши служебные классы spacing и flex для управления интервалами и выравниванием в панелях навигации.
    • Панели навигации по умолчанию реагируют, но вы можете легко изменить их, чтобы изменить это. Отзывчивое поведение зависит от нашего подключаемого модуля Collapse JavaScript.
    • Панели навигации по умолчанию скрыты при печати. Заставьте их распечатать, добавив
      .d-print       к .navbar . См. служебный класс дисплея.
    • Обеспечьте доступность с помощью элемента

    Прочтите пример и список поддерживаемых подкомпонентов.

    Поддерживаемый контент

    Navbars поставляются со встроенной поддержкой нескольких подкомпонентов. При необходимости выберите из следующего:

    • .navbar-brand для названия вашей компании, продукта или проекта.
    • .navbar-nav для полноразмерной и облегченной навигации (включая поддержку раскрывающихся списков).
    • .navbar-toggler для использования с нашим подключаемым модулем сворачивания и другими функциями переключения навигации.
    • .form-inline для любых элементов управления и действий формы.
    • .navbar-text для добавления вертикально центрированных строк текста.
    • .collapse.navbar-collapse для группировки и скрытия содержимого панели навигации родительской точкой останова.

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

     <навигация>
  Панель навигации

    В этом примере используются служебные классы цвета ( bg-light ) и интервала ( my-2 , my-lg-0 , mr-sm-0 , my-sm-0 ).

    Марка

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

     
<навигация>
  Панель навигации


<навигация>
  Панель навигации

    Добавление изображений в .navbar-brand , скорее всего, всегда потребует пользовательских стилей или утилит для правильного размера. Вот несколько примеров для демонстрации.

     
<навигация>
  <а href="#">
    
  
 
     
<навигация>
  <а href="#">
    
    Начальная загрузка

    Нав

    Навигационные ссылки

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

    Активные состояния — с .active — для указания, что текущая страница может быть применена непосредственно к .nav-link или их непосредственному родителю .nav-элемент с.

     <навигация>
  Панель навигации