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

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

 

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

В качестве структуры для меню используем обычный список 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;

} 

 

 Резиновое меню на css

 

Прием, который позволяет сделать меню резиновым (в него можно будет добавлять новые пункты и размер не увеличиться, а всегда будет 100% родительского блока). 

  1. блок обертка для меню
  2. само меню, выведенное через маркированный список (тег ul)
  3. ну и пункты меню внутри, а в них, соответственно, уже ссылки

 Код разметки:

<div class = "wrap">
<ul class = "r-menu">
<li><a href = "#">Пункт 1</a></li>
<li><a href = "#">Пункт 2</a></li>
<li><a href = "#">Пункт 3</a></li>
<li><a href = "#">Пункт 4</a></li>
<li><a href = "#">Пункт 5</a></li>
</ul>
</div>



Теперь будем приводить все в нужный вид при помощи CSS.

Базовые стили

Создаем и подключаем таблицу стилей к html документу. Первым делом я сброшу отступы у всех элементов.

*{      margin: 0;      padding: 0;}

Это стандартный код, для верстки реальных сайтов рекомендую использовать более серьезное решение — файлы типа reset.css. 

Далее добавим стили блоку-обертке. А именно, установим максимальную ширину в 600 пикселей (просто чтобы удобно было делать скриншот, чтобы меню влезало), а также отцентрируемблок.

.wrap{      background: #fff;      max-width: 600px;      margin: 0 auto;}

Реализуем резиновость

Теперь беремся за само меню. У него (у тега ul) уберем маркеры, сделаеь фоновый линейный градиент, и, самое главное, свойством display: table-row заставим контейнер для меню вести себя как табличный ряд. Это важно сделать для дальнейших манипуляций.

.r-menu{

      background: linear-gradient(to right, #b0d4e3 0%,#88bacf 100%);

      display: table-row;

      list-style: none;

}

Как видите, приведенный код как раз решил все, о чем  писалось. Кстати, градиенты удобно генерировать с помощью инструмента Ultimate CSS Gradient generator. 

Далее нужно задать стили для пунктов меню. Вот:

.r-menu li{

      vertical-align: bottom;

      display: table-cell;

      width: auto;

      text-align: center;

      height: 50px;

      border-right: 1px solid #222;

}

Пояснение:

  • vertical-align: bottom — это свойство необходимо для того, чтобы в случае, если текст в пункте меню займет 2 строки, он отображался ровно. Когда мы сделаем меню, можете удалить это свойство, увеличить масштаб чтобы пункты сжались и текст перенесся на две строки и увидите проблему с отображением. Верните свойство и все будет нормально.
  • display: table-cell — поскольку мы задали самому меню отображения табличным рядом, логично будет задать его пунктам отображение как ячейки в таблице. Это обязательно.
  • width: auto — ширина будет вычисляться автоматически, в зависимости от длины текста в пункте
  • text-align: center — это просто для выравнивания текста внутри по центру
  • height: 50px — задаем высоту в 50 пикселей
  • ну и border-right это просто граница справа, такой разделитель для пунктов

Пока меню выглядит неказисто, но ничего, настало время довести его до ума.

Последнее, что нужно сделать — задать стили ссылкам внутри пунктов. Тут такой код:

.r-menu li a{

      text-decoration: none;

      width: 1000px;

      height: 50px;

      vertical-align: middle;

      display: table-cell;

      color: #fff;

      font: normal 14px verdana;

}


 пояснение некоторых строк:

  • свойство text-decoration отменяет подчеркивание у ссылок, которое ставится по умолчанию
  • width: 1000px — пожалуй, самая важная строка. Нужно задать ссылкам примерно такую ширину, можно и меньше, но обязательно больше максимально широкого пункта меню. Ссылки не станут в ширину 1000 пикселей, поскольку ширину ограничит пункт меню li, у которого ширина задана как auto, зато это позволит сделать так, чтобы при любом количестве пунктов в меню оно всегда было на 100 процентов ширины.
  • vertical-align: middle и display: table-cell — первое выровняет текст по вертикали по центру, а второе также делает отображение ссылок в виде ячеек. Оба свойства нужны.
  • font— ну это просто набор установок для шрифта.

Добавление интерактивности

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

.r-menu li:hover{      background-color: #6bba70;}

Тестируем меню на резиновость

Отлично, меню готовы, но мы не проверили самое главное — насколько оно резиновое. Добавлим в меню еще 2 пункта:

Меню осталось в ширину на 600 пикселей. Остальные пункты просто немного ужались, чтобы поместились 2 новых.

Добавим еще 1 длинный пункт:

Как видите, меню еще немного ужалось и длинный пункт отобразился вполне себе нормально. А если бы не было свойства vertical-align: bottom, о котором  говорилось, то меню выглядело бы хуже.

Уменьшим меню до трех пунктов.

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

Как его адаптировать?

В принципе, если вы задали блоку-обертке не фиксированную, а максимальную ширину, то его даже не нужно адаптировать. В моем случае у меня стоит свойство max-width: 600px и когда ширина станет меньше 600 пикселей, блок просто будет уменьшаться вслед за экраном, не образуя горизонтальной прокрутки.