x
 
Дмитрий Шишкин
6 июня 2013

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



Инлайн-блоками:

<style type="text/css">
  ul.menu-col {
    /* Хаки для ИЕ 7 и ФФ 1.5
       оставим за кадром */
    display: inline-block;
    vertical-align: top;

    /* Не забыли про нижний отступ
       на случай переноса блоков */
    margin: 0 1.5em .5em 0;

    /* Защита от Константинопольского */
    max-width: 33%;

    /* Нормализация */
    list-style: none;
    padding: 0;
  }

  ul.menu-col > li {
    margin: 0 0 .5em;
  }
</style>
        
<ul class="menu-col">
  <li><a href="/">Главная</a></li>
  <li><a href="/photo/">Фотогалерея</a></li>
</ul>
<ul class="menu-col">
  <li><a href="/apartments/">Квартиры</a></li>
  <li><a href="/docs/">Документы</a></li>
</ul>
<ul class="menu-col">
  <li><a href="/about/">О компании</a></li>
  <li><a href="/contacts/">Контактная информация</a></li>
</ul>

Результат:

Таблицы в прошлом, флекс-боксы в будущем. Инлайн-блоки — в настоящем.


P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Дмитрий Шишкин
6 июня 2013

Минус такого подхода в том, что нужно использовать три списка.

Станислав Биченко
6 июня 2013

Альтернативный вариант: http://jsfiddle.net/ZdDnY/ (версия с более сложным контентом: http://jsfiddle.net/rYAQ8/)

Ширина колонки = (100 / количество колонок) — 1%

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


6 июня 2013

Станислав, вы не заметили важную особенность на макете — все колонки разной ширины, в зависимости от длины пунктов.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Сайты для слабовидящих 2 За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично? 1 С чего начать изучение ЦСС? 1 Как сделать, чтобы блок при прокрутке залипал у верхней границы окна браузера? 5