Разделители Для Навигации

Мне нужно добавить разделители между элементами навигации. Сепараторы изображений.

Separators between elements.

моя структура HTML похожа на:ol>li>a>img.

здесь я прихожу к двум возможным решениям:

  1. добавить больше ли теги для разделения (boo!),
  2. включить разделитель в изображение каждого элемента (это лучше, но это делает возможным, что пользователь может нажать на, например, "Home", но добраться до "Услуги", потому что они один за другим, и пользователь может случайно нажать на разделитель, который принадлежит "услуги");

Что делать?

103
css navigation separator usability

9 ответов

просто используйте разделитель изображения в качестве фонового изображения на li.

чтобы он появлялся только между элементами списка, поместите изображение слева от li, но не на первом.

например:

#nav li + li {
    background:url('seperator.gif') no-repeat top left;
    padding-left: 10px
}

этот CSS добавляет изображение к каждому элементу списка, который следует за другим элементом списка - другими словами, все, кроме первого.

NB. Будьте в курсе смежного селектора (li + li) не работает в IE6, поэтому вам нужно будет просто добавить фоновое изображение в обычный li (с условной таблицей стилей) и, возможно, применить отрицательное поле к одному из краев.

61

Если нет необходимости использовать изображения для разделителей, вы можете сделать это с помощью чистого CSS. 

nav li + li:before{
    content: " | ";
    padding: 0 10px;
}

это помещает полосу между каждым элементом списка, так же, как изображение в исходном вопросе, описанном. Но поскольку мы используем селекторы, он не ставит панель перед первым элементом. И так как мы используем :before псевдо селектор, он не один в конце.

123

другое решение в порядке, но нет необходимости добавлять разделитель в самом последнем случае, если используется :после или в самом начале при использовании :до.

так:

случае :после

.link:after {
  content: '|';
  padding: 0 1rem;
}

.link:last-child:after {
  content: '';
}

случае :перед

.link:before {
  content: '|';
  padding: 0 1rem;
}

.link:first-child:before {
  content: '';
}
3

чтобы получить разделитель вертикально по центру относительно текста меню,

.menustyle li + li:before

    {
        content: " | ";
        padding: 0;
        position: relative; 
        top: -2px;
    }
3

добавьте разделитель в li фон и убедитесь, что ссылка не расширяется, чтобы покрыть разделитель,что означает, что разделитель не будет щелчком мыши.

2

добавить li элемент, где вы хотите добавить разделитель 

<ul>
    <li> your content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> NExt content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> last item </li>
</ul>

в CSS вы можете добавить следующий код.

.divider-vertical-second-menu{
   height: 40px;
   width: 1px;
   margin: 0 5px;
   overflow: hidden;
   background-color: #DDD;
   border-right: 2px solid #FFF;
}

Это увеличит скорость выполнения, так как он не будет загружать изображения. просто проверь.. :)

2

для тех, кто использует Сасс, я написал mixin для этого:

@mixin addSeparator($element, $separator, $padding) {
    #{$element+'+'+$element}:before {
        content: $separator;
        padding: 0 $padding;
    }
}

пример:

@include addSeparator('li', '|', 1em);

который даст вам это:

li+li:before {
  content: "|";
  padding: 0 1em;
}
2

поместите его в качестве фона в элемент списка:

<ul id="nav">
    <li><a><img /></a></li>
    ...
    <li><a><img /></a></li>
</ul>

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
/* left padding creates a gap between links */

далее, я рекомендую другую разметку для доступности:
Вместо того, чтобы вставлять изображения в строку, помещать текст в виде текста, окружать каждый из них промежутком, применять изображение в качестве фона, а затем скрывать текст с помощью display:none-это дает гораздо больше гибкости стиля и позволяет использовать плитку с изображением 1px wide bg, экономит пропускную способность, и вы можете встроить его в CSS-спрайт, который сохраняет HTTP звонки:

HTML:

<ul id="nav">
    <li><a><span>link text</span></a></li>
    ...
    <li><a><span>link text</span></a></li>
</ul

CSS:

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
#nav a{background: url(/images/nav-bg.gif) repeat-x;}
#nav a span{display:none;}

обновление Хорошо, я вижу, что другие получили аналогичный ответ до меня-и я отмечаю, что Джон также включает средство для удержания разделителя от появления перед первым элементом, используя селектор li + li-что означает любой li, следующий за другим li.

1

Я считаю, что лучшим решением для этого является то, что я использую, и это естественная граница css:

border-right:1px solid;

возможно, вам придется позаботиться о прокладке, как:

padding-left: 5px;
padding-right: 5px;

наконец, если вы не хотите, чтобы последний ли имел эту разделяющую границу, дайте ему последний ребенок " нет "в" границе справа", как это:

li:last-child{
  border-right:none;
}

удачи :)

0