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.

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




Недавно всплыло

Как верстать текстовые блоки? 3 Все уже успели заметить, что вы почти во всех пятничных примерах советуете немного поунижаться 12 Правдивость 4 Как следует поступить дизайнеру, если клиент постоянно вспоминает «нечто очень важное» 7