Navigasyon Ayırıcıları

Gezinme öğeleri arasına ayırıcılar eklemem gerekiyor. Ayırıcılar görüntülerdir.

Benim HTML yapısı gibidir: ol > li > a > img.

Burada iki olası çözüme ulaşıyorum:

1. liAyırma için daha fazla etiket eklemek için (yuh!),
2. Her bir öğenin görüntüsüne ayırıcı ekleyin (bu daha iyidir, ancak kullanıcının, örneğin "Ana Sayfa" yı tıklayıp "Hizmetler" e ulaşma olasılığı vardır, çünkü bunlar birbirinin arkasındadır ve kullanıcı yanlışlıkla ayırıcıyı tıklayabilir. "Hizmetler" e aittir);

Ne yapalım?

Ayırıcı görüntüsünü li.

Yalnızca liste öğeleri arasında görünmesini sağlamak için, görüntüyü liilkinin değil , sol tarafına yerleştirin .

Örneğin:

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

Bu CSS, görüntüyü başka bir liste öğesini izleyen her liste öğesine ekler - diğer bir deyişle tümü ilki hariç tümü.

NB. Unutmayın bitişik seçici sadece (koşullu stil sayfasıyla) geleneksel li arka plan görüntüsünü eklemek ve belki kenarından birine olumsuz marjı uygulamak zorunda kalacak, böylece (li + li) IE6 iş değildir.

Ayırıcılar için görüntüleri kullanmaya acil bir ihtiyaç yoksa, bunu saf CSS ile yapabilirsiniz.

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

Bu, açıklanan orijinal sorudaki resimde olduğu gibi, her liste öğesinin arasına bir çubuk koyar. Ancak bitişik seçicileri kullandığımız için , çubuğu ilk öğeden önce koymuyor. Ve :beforesözde seçiciyi kullandığımız için , sonuna bir tane koymuyor.

liBölücü eklemek istediğiniz yere bir öğe ekleyebilirsiniz

<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'de aşağıdaki kodu ekleyebilirsiniz.

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

Bu, herhangi bir görüntü yüklemeyeceği için yürütme hızınızı artıracaktır. sadece test edin .. :)

Diğer çözümde sorun yok, ancak : kullanılıyorsa en sonda ayırıcı eklemeye gerek yoktur : after veya kullanılıyorsa en başında : before .

YANİ:

durum: sonra

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

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

durum: önce

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

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

Ayırıcıyı menü metnine göre dikey olarak ortalamak için,

.menustyle li + li:before

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

Ayırıcıyı liarka plana ekleyin ve bağlantının ayırıcıyı kapsayacak şekilde genişlemediğinden emin olun; bu, ayırıcının tıklanabilir olmayacağı anlamına gelir.

Sass kullananlar için, bu amaçla bir mixin yazdım :

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

Misal:

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

Size bunu verecek:

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

Bunun için en iyi çözümün kullandığım şey olduğuna inanıyorum ve bu doğal bir css sınırı:

border-right:1px solid;

Aşağıdaki gibi doldurma işlemlerine bakmanız gerekebilir:

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

Son olarak, son li'nin bu ayırıcı kenarlığa sahip olmasını istemiyorsanız, "border-right" içinde son çocuğa şu şekilde "none" verin:

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

İyi şanslar :)

Bunu liste öğesinin arkaplanı olarak yerleştirin:

<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 */

Ardından, erişilebilirlik için farklı bir işaretleme öneriyorum:
Görüntüleri satır içine yerleştirmek yerine, metni metin olarak yerleştirin, her birini bir aralıkla çevreleyin, görüntüyü arka plan olarak uygulayın ve ardından metni ekranla gizleyin: yok - bu çok daha fazla stil esnekliği sağlar ve 1px genişliğinde bir bg görüntüsüyle döşeme kullanmanıza olanak tanır, bant genişliğinden tasarruf sağlar ve bunu bir CSS hareketli grafiğine gömebilirsiniz, bu da HTTP çağrılarını kaydeder:

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;}

GÜNCELLEME TAMAM, başkalarının da benden önce benzer bir yanıt aldığını görüyorum - ve John'un li + li seçiciyi kullanarak ayırıcının ilk öğeden önce görünmesini engellemek için bir araç içerdiğini de not ediyorum - bu, herhangi bir li'nin diğerinden sonra gelmesi anlamına gelir. li.