В этой статье вы узнаете как сделать меню навигации в HTML и CSS, покажу здесь меню различных типов, вертикальное боковое и горизонтальное.
Также, перед тем как начать читать эту статью, рекомендуется сначала прочитать наш учебник по HTML и учебник по CSS.
Как сделать вертикальное меню:
Для начала разберём как сделать вертикальное меню в HTML и CSS, это самый просто тип, на подобие того что есть во ВКонтакте. Но для начала нужно сделать не большую HTML страницу.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <header> <h3>Header</h3> </header> <main> <nav> <ul class="menu"> <li><a href="#">Главная</a></li> <li><a href="#">Новости</a></li> <li><a href="#">Игры</a></li> <li><a href="#">Продукты</a></li> </ul> </nav> <div class="content"> <h1>Content</h1> </div> </main> |
Тут всё понятно, единственное, что смущает, это тег <nav>, он нужен для обозначения, что внутри него будет меню навигации.
Примечание:
Тег <nav> нужно использовать для навигации, что бы лучше индексировался ваш сайт.
Теперь добавим в тег <nav> список <ul>, что бы сделать меню.
1 2 3 4 5 6 | <ul class="menu"> <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> <h3>Header</h3> <nav> <ul class="menu"> <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 class="content"> <h1>Content</h1> </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, думаю вам было интересно и полезно, в одной из следующих статей, будет показываться как сделать выпадающее меню.
Подписываетесь на соц-сети:
Оценка:
Средняя оценка: 3,00
Загрузка...