Верстка меню

09.08.2015

<nav>
  <ul>
    <li><a href="index.html">Домой</a></li>
    <li><a href="shop.html">Сделать заказ</a></li>
    <li><a href="contacts.html">Обратная связь</a></li>
  </ul>
</nav>

Элементы представлены в виде отдельных слов, не имея padding'ов и разделены лишь пробелами между ними

li { display: inline; }

Когда необходимо сделать меню с элементами, имеющими padding'и и/или фиксированную высоту/ширину

li { float: left/right; }

Примечание: Необходимо «очистить» ul, задав ему класс .clearfix или поместив в его конец элемент с clear: both, иначе у ul высота будет равна нулю;

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

Как делается В зависимости от вида пунктов меню, устанавливаем display: inline или display: inline-block элементам li. Родителю (ul) устанавливаем text-align: justify. Но сразу justify не заработает — нужно переполнить первую строку (если непонятно почему так — запускаем ворд и пытаемся растянуть несколько слов на всю ширину при помощи justify). Поэтому в конец элемента ul добавляем дополнительный элемент с display: inline-block и width: 100%, или, что лучше, псевдо-элемент ::after с такими же характеристиками.

Между пунктами меню нет промежутков, любое количество пунктов меню занимает всю ширину

Как делается При решении данной задачи есть соблазн сверстать меню таблицами; но мы же не собираемся нарушать семантику документа, правда? Поэтому используем display: table-cell для li и display: table для ul; потом задаем ширину для ul Если нужна поддержка старых браузеров, используем скрипт-полифилл, подменяющий такие блоки на таблицы для IE6 и IE7 или организуем fallback другими способами.

Пример

<style>
ul.navbar {
    margin: 0;
    padding: 0;
    list-style: none;
    display: table;
    width: 100%;
}

ul.navbar li {
    display: table-cell;
    margin: 0;
    padding: 0;
}

ul.navbar li a {
    display: block;
}
</style>

<ul class="navbar">
    <li>
        <a href="">One</a>
    </li>
    <li>
        <a href="">Two</a>
    </li>
    <li>
        <a href="">Three</a>
    </li>
    <li>
        <a href="">Four</a>
    </li>
</ul>

Для IE

$(function() {
    var fullWidth = 0,
        extraWidth = 0;
        $navbar = $('ul.navbar'),
        $items = $navbar.children('li'),
        itemExtraWidth = 0,
        oddExtra = 0;

    fullWidth = extraWidth = $navbar.innerWidth();

    $items.each(function() {
        extraWidth -= $(this).outerWidth();
    });

    itemExtraWidth = Math.floor(extraWidth / $items.length);
    oddExtra = extraWidth % $items.length;

    $items.each(function() {
        var $item = $(this),
            newWidth = $item.width() + itemExtraWidth;

        if(oddExtra > 0) {
            newWidth += 1;
            oddExtra--;
        }

        $item.css('width', newWidth + 'px');
    });
});

Оригинал