Как сделать верхнее меню в html и css

Сохранив и открыв файл index.html в браузере мы увидим следующую картину:

Стилизация menu с помощью CSS

Для того чтобы начать оформлять наше меню создадим файл style.css, куда мы будем вписывать код CSS. А в index.html пропишем путь до созданного файла style.css. Полный код HTML будет выглядеть следующим образом:

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

В результате фон нашего меню стал голубым и появились внутренние отступы сверху, слева, справа и снизу.

Далее убираем маркеры в виде точек у тега

, а также сбрасываем на ноль значения padding и margin, чтобы убрать лишние отступы у меню. И центрируем наш список по центру горизонтали.

nav ul

nav ul li < display: inline-block; margin-left: 10px; text-transform: uppercase; >nav ul li:first-child

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

В результате получим окончательный пример меню:

Итог: в этой статье мы рассмотрели как сделать меню горизонтально с помощью CSS.

Как сделать верхнее меню в html и css

Создание игр на Unreal Engine 5

Данный курс научит Вас созданию игр на Unreal Engine 5. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

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

Помимо самого курса Вас ждёт ещё 8 бесплатных ценных Бонусов: «Chaos Destruction», «Разработка 2D-игры», «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства», «Создание прототипа RPG с открытым миром» и и весь курс «Создание игр на Unreal Engine 4» (актуальный и в 5-й версии), включающий в себя ещё десятки часов видеоуроков.

Уроки и статьи

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

Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Моя группа

Какая тема Вас интересует больше?

Бесплатный курс

Мастер-класс по созданию сайта на WordPress 6

Этот видеоурок длится всего 21 минуту, но уже в конце создан полностью рабочий сайт на WordPress (с применением ChatGPT). И весь процесс Вы увидите своими глазами, а повторить — не составит труда!

Чтобы получить Видеокурс,
заполните форму

Бесплатный онлайн-семинар

Как создать профессиональный Интернет-магазин

После семинара:

— Вы будете знать, как создать Интернет-магазин.

— Вы получите бесплатный подарок с подробным описанием каждого шага.

— Вы сможете уже приступить к созданию Интернет-магазина.

Горизонтальное меню justify

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

Сделать его можно с помощью text-align: justify и псевдо-свойств :before и :after .

Пример 1

.wrp < width: 600px; margin: 0 auto >.menu < background: #b92525; padding: 20px 0 0 0; height: 40px; >.menu ul < text-align: justify; margin: 0; padding: 0; >.menu ul:before < content: ''; display: block; width: 100%; height: 0; >.menu ul:after < content: ''; width: 100%; height: 0; visibility: hidden; overflow: hidden; display: inline-block; >.menu li < display: inline-block; margin: 0; padding: 0; list-style: none; >.menu a

Превращение меню в кнопку при уменьшении разрешения

Пытаюсь сделать превращение меню в кнопку (пример: аналог верхнее меню при уменьшении разрешения превращается в кнопку). Думал, это делается через media screen, но всё оказалось гораздо сложнее для меня, и я даже не знаю, с какой стороны к нему подойти. Возможно ли это реализовать средствами html+css?

Отслеживать
67.9k 216 216 золотых знаков 77 77 серебряных знаков 219 219 бронзовых знаков
задан 29 сен 2015 в 16:00
Medvedev A. Medvedev A.
109 1 1 серебряный знак 6 6 бронзовых знаков

Найдите в инете урок про адаптивное меню сделанное через скрытый checkbox + label — это и будет решением реализовать средствами html+css

29 сен 2015 в 16:05
круто, спасибо!
29 сен 2015 в 16:12
29 сен 2015 в 16:41
@soledar10, а почему опять комментарием? 🙂
29 сен 2015 в 16:53
Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа).
30 сен 2015 в 13:26

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Вот пример на html + css = Fiddle

nav < background: #000; padding: 15px 10px; color: #fff; font-family: 'Segoe UI', sans-serif; text-align: center; >nav > ul < padding: 0; >nav li < display: inline-block; vertical-align: top; >nav a < color: #fff; padding: 5px 10px; text-decoration: none; border: 1px solid transparent; transition: 0.3s; >nav a:hover < border: 1px solid #fff; >input[type="checkbox"] < display: none; >nav label < display: none; border: 1px solid #fff; padding: 5px 10px; cursor: pointer; transition: 0.3s; >nav label:hover < color: #f00; border: 1px solid #f00; >@media screen and (max-width: 500px) < nav label< display: inline-block; >nav > ul < display: none; >input[type="checkbox"]:checked ~ label + ul < display: block; >>

Отслеживать
ответ дан 29 сен 2015 в 16:57
27.6k 5 5 золотых знаков 35 35 серебряных знаков 65 65 бронзовых знаков

Пример лучше смотреть тут jsfiddle.net/soledar10/5b7cn34n Можно размер окна изменять для адаптивности.

29 сен 2015 в 17:02

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

nav < background: #000; padding: 1px 5px; color: #fff; font-family: 'Segoe UI', sans-serif; text-align: center; >nav > ul < padding: 0; >nav li < display: inline-block; vertical-align: top; padding: 2px; >nav a < color: #fff; padding: 1px 5px; text-decoration: none; border: 1px solid transparent; transition: 0.9s; >nav a:hover < border: 1px solid #fff; >input[type="checkbox"] < display: none; >nav label < display: none; border: 1px solid #fff; padding: 1px 5px; cursor: pointer; transition: 0.9s; >nav label:hover < color: #f00; border: 1px solid #f00; >@media screen and (max-width: 1000px) < nav < text-align: left; >nav label < display: inline-block; >nav > ul < display: none; /*width: 100px;*/ left: 0; >nav li < display: block; vertical-align: top; padding: 2px; >input[type="checkbox"]:checked ~ label + ul < display: block; >>