Как сверстать простое горизонтальное меню на CSS

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

В этой статье я расскажу как сверстать такое меню для вашего сайта. А так же рассмотрим вариант как центрировать горизонтальное меню.

Итак, приступим.

Базовая разметка

Разметка нашей страницы с меню будет стандартной, и без излишеств. Единственное, чтобы наша страница не казалась пустой, добавлен нейтральный учебный текст – Не выходи из комнаты.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Простое горизонтальное меню</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div id="wrapper">
        
        <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>
        
        <div id="middle">
            
            <div class="content">
              <hr>
               <h1>Учебная страница</h1>
<p>Короткий текст для проверки меню.</p>
</div>
            
        </div>
        
    </div>
    
</body>
</html>

Как видите – абсолютно стандартная разметка меню. В итоге мы получаем:

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

Стилизуем меню с помощью CSS

nav{

}

nav ul{
    position: relative;
    margin: 0; /* Сбрасываем отступы */
    padding: 0;
}

nav ul li{
    position: relative;
    list-style: none; /* Убираем маркеры списка */
    float: left; /* Выравниваем пункты по горизонтали */
}

nav ul li a:link,
nav ul li a:visited{
    display: block;
    padding: 4px 8px;

    font-family: "Tahoma", "Arial", "times new roman", sans-serif;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
    font-size: 14px;
    color: white;

    text-decoration: none; /*Убираем подчеркивание*/

    background: #4b91fc; /*Фон кнопки меню*/

    transition: all 0.2s ease; /*Параметры анимации при наведении*/
}


nav ul li a:hover,
nav ul li a:focus{

    background: white;
    color: #4b91fc;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}

К самым ключевым строчкам, в стилизации меню, я добавил комментарии, которые подробно рассказывают, что именно мы прописываем.

Единственно хочу добавить, главное что делает горизонтальное меню горизонтальным это строка float:left в контейнере nav>ul>li. Если не прописать это свойство то меню будет вертикальным.

В итоге у нас получается такой вид меню:

Открыть пример: menu_horizontal — Vian142

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

Выравниваем горизонтальное меню по центру

Общий принцип такой:

Сдвигаем содержимое списка ul с помощью свойств:

• float:left;
• left:50%;

Центрируем меню, сдвигая пункты li меню:

• left: -50%;

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

Для того, чтобы избежать этого ненужного недоразумения, пропишем родительскому контейнеру списка, а именно nav, свойство overflow: hidden. С помощью этого свойства мы скрываем всё содержимое, которое выходит за его границы.

Итог

Открыть пример: horizontal_center_menu — Vian142

Как видите, написать меню, для простого сайта, не так уж и сложно. А центрировать его еще легче. Надеюсь вам пригодиться данный урок.

Историческая техника

Вариант 2015 года показывает float и смещения на 50%. Он не единственный способ расположить меню горизонтально; современные проекты также используют flex и grid. В учебном коде длинное стихотворение заменено коротким текстом; это не меняет устройство меню.