x
 
↑
Май
1 •
5 •

8 •
4 •

6 •
↓
Александр Иванов
16 мая 2013

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

Самый простой вариант для верстальщика — проставить точки прямо в ХТМЛ: 

<ul>
  <li><a href="/1">Раз</a></li>
  ·
  <li><a href="/2">Два</a></li>
  ·
  <li><a href="/3">Три</a></li>
</ul>

Но серверный программист, оживляющий шаблон, будет недоволен тем, что придётся усложнять цикл вывода меню — добавлять проверку, чтобы не ставить точку после последнего пункта.

Для чистоты кода — и клиентского, и серверного — предпочтительнее будет такая разметка: 

<ul>
  <li><a href="/1">Раз</a></li>
  <li><a href="/2">Два</a></li>
  <li><a href="/3">Три</a></li>
</ul>

А украшающие точечки добавим в ЦСС:

ul {
  list-style: none;
  margin: 0;
}
ul > li {
  display: inline;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-right: -.1em;
}
ul > li:before {
  content: '· ';
  letter-spacing: 0;
}
ul > li:first-child:before {
  content: '';
}

Результат:

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

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

Комментарии
Станислав Биченко
16 мая 2013

А почему не li + li:before?

http://jsfiddle.net/brM58/
Иван Титов
16 мая 2013

Для старых браузеров точечка делается фоновой картинкой у 

  • . Элементы
  • сдвигаются влево внутри
      , которому добавляется overflow:hidden, чтобы первая точечка спряталась.

    		•

    16 мая 2013

    Станислав, спасибо, именно так и нужно :-)

    16 мая 2013

    Серверный программист не будет недоволен, а использует:

    implode(' · ', $menuItems);
    Ведь он попапдает в такую ситуацию при любом перечислении в строку, например, тегов.
    		Илья Страйков
    16 мая 2013

    Иван, лучше старые браузеры вообще оставить без точечки.
    		Иван Титов
    16 мая 2013

    Коля, а можно ли на PHP сразу склеить двумерный массив вида [пункт меню, ссылка] в требуемую строчку, чтобы обойтись без промежуточного массива, содержащего однотипные кусочки html-кода?

    17 мая 2013

    Иван, можете воспользоваться функцией array_map (http://www.php.net/manual/ru/function.array-map.php) :

    function makeMenuItem($url, $name, $style)
    {

    return '

  • ' .

    $name . '
    • ';

    }



    $urls = array('/1', '/2', '/3');

    $names = array('Раз', 'Два', 'Три');

    $styles = array('normal', 'active', 'normal');

    $menu = implode(' · ', array_map('makeMenuItem',

    $urls, $names, $styles));
    		Вадим Макеев
    17 мая 2013

    Мне кажется, что аргумент про серверного программиста, который опроверг Коля, тут не причём. Дело в том, что точечки — это элемент оформления, такой же как цвет и размер текста, поэтому хранить его нужно в стилях, чтобы замена точек на тире или крестики не потребовало изменений серверных шаблонов, они-то здесь причём?

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

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

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

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




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

    1 • Экран ожидания в поликлинике 6 • Почему дизайнер должен уметь писать текст? 8 • Все уже успели заметить, что вы почти во всех пятничных примерах советуете немного поунижаться 12 •