Простой способ создать горизонтальное меню в HTML и CSS и расположить его по центру страницы

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

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

Для начала нам понадобится основная структура HTML-файла. Создадим <ul> элемент с классом menu, внутри которого будут находиться все пункты меню. Каждый пункт оформим как <li> элемент. Для наглядности добавим в них ссылки с использованием тега <a>.

Шаг 1: Создание структуры главного списка

Перед тем, как приступить к созданию горизонтального меню, необходимо создать структуру главного списка (списка элементов меню). Для этого используется тег <ul> (unordered list) или <ol> (ordered list).

Пример создания структуры главного списка:

<ul><li>Главная</li><li>О нас</li><li>Услуги</li><li>Контакты</li></ul>

В данном примере создается главный список с четырьмя элементами меню: «Главная», «О нас», «Услуги» и «Контакты».

При необходимости можно использовать тег <ol> вместо <ul>. Отличие заключается в том, что <ol> создает нумерованный список, а <ul> — маркированный список.

Шаг 2: Оформление списка и стилевое оформление

После того, как мы создали основную структуру горизонтального меню, мы можем приступить к его оформлению. Для этого мы будем использовать CSS стили.

Приведем пример простого стилизованного списка:

«`html

В данном примере мы использовали тег <table> для создания таблицы, в которой каждый пункт меню представлен ячейкой таблицы. После этого, мы использовали тег <a> для создания ссылок на каждый пункт меню.

Теперь добавим соответствующие стили для списка:

«`css

table {

margin: 0 auto;

text-align: center;

width: 100%;

}

table td {

padding: 10px 20px;

border: 1px solid #ccc;

}

table td a {

text-decoration: none;

color: #333;

}

table td a:hover {

color: #ff0000;

}

В данном CSS коде мы устанавливаем отступы для таблицы, выравнивание текста по центру и ширину таблицы в 100%. Затем, мы задаем отступы и границы для каждой ячейки таблицы. Для ссылок мы устанавливаем стиль без подчеркивания и цвет текста. При наведении на ссылку, меняем цвет текста на красный.

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

Шаг 3: Расположение меню по центру

Чтобы разместить горизонтальное меню по центру страницы, нам понадобятся некоторые изменения в HTML и CSS коде. Ниже приведены шаги, которые нужно выполнить:

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

<div class="container"><ul class="menu"><li><a href="#">Главная</a></li><li><a href="#">О нас</a></li><li><a href="#">Контакты</a></li></ul></div>

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

Шаг 4: Добавление адаптивности для мобильных устройств

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

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

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

Ниже приведен пример кода CSS, который можно добавить в наш файл стилей для добавления адаптивности для мобильных устройств:

В этом коде мы используем медиа-запрос @media для определения, какие стили должны применяться к нашему меню при ширине экрана, не превышающей 768 пикселей. Если ширина экрана меньше этого значения, то мы устанавливаем ширину меню на 100% и скрываем все элементы списка, кроме первого.

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

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