Зайдите под своим паролем

     
  • Проекты Блог
  • Избранное ★

    Теги

    • Eatty!
    • бег
    • вёрстка
    • интерфейс
    • приложения
    • процесс

    Связаться со мной можно письмом или телеграммой.

  • Разделители меню

    30 марта 2012, 18:05

    Многие дизайнеры делают меню вот с такими разделителями:

    • Меню
    • разделенное
    • какими-нибудь
    • штучками

    Самое простое, что приходит на ум — просто убрать разделитель у первого пункта с помощью псевдо-элемента :first-child. Но вылезает один существенный недостаток:

    • Меню
    • c большим
    • количеством
    • пунктов
    • невлезающее
    • в одну
    • строку
    • что
    • приводит
    • к печальному
    • результату

    Для решения этой задачи понадобится обернуть пунткы меню в отдельный блок. Учитывая, что меню чаще всего делается списком, обёртка в виде ul уже есть. Далее, с помощью position: relative и свойства left пункты меню сдвигаются влево на расстояние ширину разделителя, а к обёртке применяется свойство overflow: hidden, скрывающее ненужные разделители:

    • Меню
    • c большим
    • количеством
    • пунктов
    • невлезающее
    • в одну
    • строку
    • теперь
    • выглядить
    • правильно

    Всё выглядит как надо. И к тому же работает даже в старичке ИЕ6. Осталось лишь прочитать никому ненужный листинг кода:

    <style type="text/css">
      .menu {
        list-style: none; padding: 0; margin: 0; /* обнуляем стили */
        position: relative;
        overflow: hidden; /* самое важное */
      }
      .menu li {
        white-space: nowrap; /* чтобы не было переносов внутри пункта меню */
        padding-right: 10px;
        padding-left: 20px; /* слева отступ больше на ширину разделителя */
        background: url(bullet.gif) no-repeat;
        position: relative;
        left: -20px; /* сдвигаем на расстояние отступа слева */
      }
    </style>
    <body>
      <ul class="menu">
        <li><a href="#">Привет!</a>
        <li><a href="#">Я меню</a>
        <li><a href="#">с разделителями</a>
      </ul>
    </body>
    
    Твитнуть
    Поделиться
    Поделиться
    вёрстка   уроки
    Правильный авторегистратор
    ←Ctrl→
    Демоклик
  • © Александр Гурьянов,
    2004—2016
  • Движок — Эгея