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

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

See the Pen Горизонтальное резиновое меню by vavik (@vavik96) on CodePen.

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

HTML

<div class="menu-wrapper">
    <ul class="menu">
        <li><a href="#">Main</a>
        </li>
        <li><a href="#">About company</a>
        </li>
        <li><a href="#">Development</a>
        </li>
        <li><a href="#">Products</a>
        </li>
        <li><a href="#">Store</a>
        </li>
        <li><a href="#">Contacts</a>
        </li>
    </ul>
</div>

Для того, чтобы меню тянулось на всю ширину страницы, пишем для ul правила display: table; width: 100%, обнуляем все отступы margin и padding. Для пунктов li указываем display: table-cell, а также float: none (в случае если для элементов уже прописано правило float: left, которое не позволит растянуть меню на всю ширину родительского контейнера). Ссылки внутри li объявляются блоками для удобства их дальнейшего «раскрашивания»: ссылка растянется на всю ширину элемента li. Дописываем различные правила для текста, фона и необходимые отступы. Важное замечание: данный способ не будет работать в IE7 и ниже.

CSS

.menu {
    display: table;
    width: 100%;
    margin: 0;
    padding: 0;
}

.menu li {
    display: table-cell;
    float: none;
}

.menu li a {
    display: block;
    padding: 8px 15px;
    background: #2767A0;
    font-family: Tahoma;
    font-size: 12px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
}

.menu li a:hover {
    background: #528CBF;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}