Pemisah untuk Navigasi


107

Saya perlu menambahkan pemisah antara elemen navigasi. Pemisah adalah gambar.

Pemisah antar elemen.

Struktur HTML saya seperti: ol > li > a > img.

Di sini saya sampai pada dua kemungkinan solusi:

  1. Untuk menambahkan lebih banyak litag untuk pemisahan (boo!),
  2. Sertakan pemisah dalam gambar setiap elemen (ini lebih baik, tetapi memungkinkan pengguna dapat mengeklik, misalnya, "Rumah", tetapi masuk ke "Layanan", karena mereka berada satu di belakang yang lain dan pengguna dapat secara tidak sengaja mengklik pemisah yang milik "Layanan");

Apa yang harus dilakukan?


96
1 untuk penampilan artistik.
James P.

Jawaban:


64

Cukup gunakan gambar pemisah sebagai gambar latar belakang di li.

Untuk membuatnya hanya muncul di antara item daftar, posisikan gambar di sebelah kiri li, tetapi bukan di yang pertama.

Sebagai contoh:

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

CSS ini menambahkan gambar ke setiap item daftar yang mengikuti item daftar lainnya - dengan kata lain semuanya kecuali yang pertama.

NB. Sadarilah pemilih yang berdekatan (li + li) tidak berfungsi di IE6, jadi Anda hanya perlu menambahkan gambar latar belakang ke li konvensional (dengan stylesheet bersyarat) dan mungkin menerapkan margin negatif ke salah satu tepinya.


2
Menggunakan :beforepseudo selector mencegahnya muncul setelah elemen terakhir.
jrue

3
Solusi bagus -berfungsi seperti pesona -IE6 support? Siapa peduli! :) Jika kita semua berhenti mendukung browser lama daripada mungkin kita akan memaksa orang untuk berhenti menggunakannya.
Jordan

Berfungsi seperti chram dengan a border-leftuntuk menggambar garis vertikal di antara item.
Richard-Degenne

132

Jika tidak ada kebutuhan mendesak untuk menggunakan gambar untuk pemisah, Anda dapat melakukan ini dengan CSS murni.

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

Ini menempatkan sebuah bar di antara setiap item daftar, seperti yang dijelaskan gambar dalam pertanyaan asli. Tapi karena kita menggunakan selektor yang berdekatan , itu tidak meletakkan bilah sebelum elemen pertama. Dan karena kita menggunakan :beforepemilih semu, itu tidak menempatkannya di akhir.


Wow! Inilah yang saya butuhkan untuk menu footer saya. Tentu saja dengan beberapa CSS tambahan.
Vladimir

Secara teknis Anda masih bisa menggunakan gambar, tetapi base64 menyandikannya dan menyimpan gambar sebaris. css-tricks.com/data-uris
commadelimited

@jrue apakah mungkin juga untuk mengubah posisi pemisah secara vertikal? Itu tidak merespons padding / margin atas.
Floris

3

Anda dapat menambahkan satu lielemen di mana Anda ingin menambahkan pembatas

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

Di CSS Anda dapat menambahkan kode berikut.

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

Ini akan meningkatkan kecepatan eksekusi Anda karena tidak akan memuat gambar apa pun. coba saja .. :)


dapatkah anda menjelaskan bagaimana caranya? Tapi selalu ada cara lain ... CSS3: Kita bisa menambahkan get Nth Element dan menambahkan Divider padanya.
Rajiv Pingale

1
Sial, aku terlibat dalam kekacauan. Saya hanya menghabiskan waktu 30 menit untuk membaca dokumen standar, pamflet RWD, dan bahkan mencoba berbagai pembaca layar untuk membuktikan maksud saya. Namun, setidaknya pembaca layar cukup pintar untuk TIDAK MEMBACA peluru kosong KERAS (atau menyebutkan opsi yang tidak ada saat menggunakan @ ol @ alih-alih @ ul @). Jadi saya bisa menunjukkan bahwa penggunaan @ li @ di sini termasuk dalam kategori yang sama seperti menggunakan tabel untuk mencapai tata letak kolom.
Volker Stolz

3

Solusi lain tidak masalah, tetapi tidak perlu menambahkan pemisah di akhir jika menggunakan : setelah atau di awal jika menggunakan : sebelumnya .

BEGITU:

kasus: setelah

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

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

case: before

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

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

3

Untuk mendapatkan pemisah secara vertikal di tengah relatif terhadap teks menu,

.menustyle li + li:before

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

2

Tambahkan pemisah ke lilatar belakang dan pastikan tautan tidak meluas untuk menutupi pemisah, yang berarti pemisah tidak dapat diklik.


2

Bagi mereka yang menggunakan Sass , saya telah menulis mixin untuk tujuan ini:

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

Contoh:

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

Yang akan memberi Anda ini:

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

Ini tidak menunjukkan '|' untuk beberapa alasan? Ada alasan kenapa tidak?
Yakobus111

Jangan khawatir, saya menemukan cara untuk melakukannya. Saya juga harus menambahkan: setelah ke anak terakhir untuk membuat konten anak yang tidak memerlukan seperator = content: ""
James111

2

Saya percaya solusi terbaik untuk ini, adalah apa yang saya gunakan, dan itu adalah batas css alami:

border-right:1px solid;

Anda mungkin perlu merawat bantalan seperti:

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

Terakhir, jika Anda tidak ingin li terakhir memiliki batas pemisah, berikan "none" last-child di "border-right" seperti ini:

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

Semoga berhasil :)


1

Letakkan sebagai latar belakang pada elemen daftar:

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

Selanjutnya, saya merekomendasikan markup yang berbeda untuk aksesibilitas:
Daripada menyematkan gambar sebaris, letakkan teks sebagai teks, lingkari masing-masing dengan rentang, terapkan gambar sebagai latar belakang, dan kemudian sembunyikan teks dengan display: none - this memberikan lebih banyak fleksibilitas gaya, dan memungkinkan Anda menggunakan ubin dengan gambar bg selebar 1px, menghemat bandwidth, dan Anda dapat menyematkannya dalam sprite CSS, yang menghemat panggilan 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;}

UPDATE Oke, saya melihat orang lain mendapat jawaban serupa sebelum saya - dan saya perhatikan bahwa John juga menyertakan cara untuk menjaga pemisah agar tidak muncul sebelum elemen pertama, dengan menggunakan pemilih li + li - yang berarti setiap li datang setelah yang lain li.


Ya - Saya baru saja mencarinya, dan Anda benar. Jawaban saya diedit, dan saya memberi Anda +1 sejak Anda memimpin.
Faust

Terima kasih. 1 untuk padding yang lupa saya tambahkan.
ajcw
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.