Cara Menggunakan Pintu Geser di CSS Tanpa Tab

Cascading Style Sheets adalah jenis bahasa lembar gaya yang menambahkan gaya ke konten Web yang ditulis dalam bahasa markup seperti XML, HTML atau XHTML. Teknik pintu geser di CSS adalah tentang menciptakan efek dinamis menggunakan dua gambar latar belakang yang terpisah. Gambar atas terletak di atas gambar bawah untuk membuat ilusi tanpa menyelesaikan mengaburkan gambar bawah. Trik untuk menerapkan teknik pintu geser tanpa tab adalah dengan menghasilkan elemen navigasi berbasis teks menggunakan daftar yang dirancang dengan CSS.

1.

Mulailah dengan membuat daftar elemen navigasi Anda yang tidak berurutan yang terlampir dalam tag "DIV". Sebagai contoh:

• Beranda
• Produk dan Layanan
• Hubungi kami

Dalam contoh ini, daftar berisi tag anchor dan span. Tag jangkar menggunakan atribut "href" untuk menautkan ke lokasi spesifik elemen navigasi. Ini juga menggunakan tag untuk mengontrol gaya teks dalam elemen navigasi.

2.

Tambahkan beberapa gaya ke elemen navigasi dengan menentukan warna latar belakang, mengaktifkan float, menentukan margin, mengatur overflow ke otomatis dan menonaktifkan gaya daftar untuk item daftar. Float adalah properti CSS yang memungkinkan suatu elemen bergerak secara horizontal ke kiri atau ke kanan sehingga elemen lain dapat membungkusnya. Properti overflow menentukan bagaimana suatu objek harus berperilaku jika konten berkembang di luar kotak persegi panjangnya. Dengan mengatur overflow ke otomatis, overflow akan disembunyikan tetapi scrollbar dapat ditambahkan untuk melihat konten overflow.

3.

Terapkan gambar latar belakang yang dipilih ke gaya jangkar dan bentang untuk menyelesaikan teknik pintu geser, dan menghasilkan efek hover untuk elemen navigasi.