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

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

<header>
        <h1>Snap-Tite Rubber Co.</h1>
        <nav>
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Basic Services</a>
                <a href="#">Specialty Services</a>
                <a href="#">Contact Us</a>
        </nav>
</header>

Основной код CSS тоже подходит для обоих решений:

header {
        background-image: url(light_toast.png);
        text-transform: uppercase;
        text-align: center;
}
h1 {
        font: 4rem "Bree Serif";
        text-shadow: -1px -1px 1px rgba(255,255,255,0.4),
                1px 1px 1px rgba(0,0,0,0.4);
        color: rgba(255,255,255,0.6);
        padding-top: 1rem;
        opacity: 0.3;
        line-height: 1;
        margin: 1.5rem;
}
header nav {
        font-weight: 100;
        font-family: Agenda-Light, Agenda, Arial, sans-serif;
}
header nav a {
        text-decoration: none;
        font-size: 1.4rem;
        color: #333;
        background: rgba(255,255,255,0.4);
        transition: .6s;
        padding: .5rem;
}
header nav a:list-child {
        border-right: none;
}
header nav a:hover {
        background: rgba(0,0,0,0.5);
        color: #fee;
}

Остальной код CSS зависит от выбранного варианта воплощения.

Вариант 1:  верстка с помощью отображения в виде ячеек таблицы

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

header nav {
        display: table;
        width: 100%;
}
header nav a {
        display: table-cell;
        vertical-align: middle;
}

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

header nav {
        display: table;
        width: 100%;
        table-layout: fixed;
}

Естественно, нужно позаботиться и о мобильных устройствах. Очевидным решением будет располагать ссылки вертикально, когда им становится слишком тесно:

@media (max-width: 700px) { 
        header nav a {
                display: table-row;
                width: 100%;
        }
}

Основными преимуществами этого решения являются:

• Довольно простой синтаксис
• Универсальность записи, кроме точки перехода, для разного количества пунктов меню
• Поддержка большим количеством старых версий браузеров, включая браузер Internet Explorer 8

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

Другим, более современным решением является создание растягивающегося меню с использованием flexbox.

Вариант 2: верстка с помощью Flexbox

Хотя использование Flexbox кажется отличным решением, у такого подхода есть свои минусы: более сложный синтаксис, необходимость использовать приставки производителей и устаревшие варианты синтаксиса для старых версий браузеров:

header nav {
        display: flex;
}
header nav a {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
}

Хотя решение для создания адаптивного дизайна похоже:

@media (max-width: 700px) { 
        header nav {
                flex-direction: column;
        }
}

Ссылкам нужно задать гибкое отображение, чтобы вертикально выровнять их содержимое с помощью свойства выравнивания элементов по их центрам, а также flex: 1 1 20%;, чтобы они тянулись вертикально и горизонтально. С помощью этого способа можно создать больше вариантов расположения ссылок, задавая свойству выравнивания содержимого элемента меню значения пространство вокруг или пространство между. У Flexbox гораздо больше гибкости и возможностей, хотя это и не всегда востребовано и оправдано.

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

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

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Горизонтальное меню с размытием неактивных пунктов на CSS
• Выпадающее меню с использованием только CSS и недокументированных возможностей элемента флажка
• Создание трехмерного вытянутого текста с использованием CSS