Saya perlu menambahkan pemisah antara elemen navigasi. Pemisah adalah gambar.
Struktur HTML saya seperti: ol > li > a > img
.
Di sini saya sampai pada dua kemungkinan solusi:
- Untuk menambahkan lebih banyak
li
tag untuk pemisahan (boo!), - 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?
css
navigation
usability
separator
daGrevis.dll
sumber
sumber
Jawaban:
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:
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.
sumber
:before
pseudo selector mencegahnya muncul setelah elemen terakhir.border-left
untuk menggambar garis vertikal di antara item.Jika tidak ada kebutuhan mendesak untuk menggunakan gambar untuk pemisah, Anda dapat melakukan ini dengan CSS murni.
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
:before
pemilih semu, itu tidak menempatkannya di akhir.sumber
Anda dapat menambahkan satu
li
elemen di mana Anda ingin menambahkan pembatasDi CSS Anda dapat menambahkan kode berikut.
Ini akan meningkatkan kecepatan eksekusi Anda karena tidak akan memuat gambar apa pun. coba saja .. :)
sumber
Solusi lain tidak masalah, tetapi tidak perlu menambahkan pemisah di akhir jika menggunakan : setelah atau di awal jika menggunakan : sebelumnya .
BEGITU:
kasus: setelah
case: before
sumber
Untuk mendapatkan pemisah secara vertikal di tengah relatif terhadap teks menu,
sumber
Tambahkan pemisah ke
li
latar belakang dan pastikan tautan tidak meluas untuk menutupi pemisah, yang berarti pemisah tidak dapat diklik.sumber
Bagi mereka yang menggunakan Sass , saya telah menulis mixin untuk tujuan ini:
Contoh:
Yang akan memberi Anda ini:
sumber
Saya percaya solusi terbaik untuk ini, adalah apa yang saya gunakan, dan itu adalah batas css alami:
Anda mungkin perlu merawat bantalan seperti:
Terakhir, jika Anda tidak ingin li terakhir memiliki batas pemisah, berikan "none" last-child di "border-right" seperti ini:
Semoga berhasil :)
sumber
Letakkan sebagai latar belakang pada elemen daftar:
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:
CSS:
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.
sumber