Navigasi menu yang indah menggunakan posisi jangkar – Beragampengetahuan

Anda pasti pernah mendengar tentang positioning jangkar CSS yang baru, bukan? Ini adalah fitur yang memungkinkan Anda menautkan elemen apa pun di halaman Anda ke elemen lain (yaitu jangkar). Ini berguna untuk semua konten tooltip, namun dapat menciptakan banyak efek bagus lainnya juga.

Pada artikel ini kita akan melihat navigasi menu dan saya mengandalkan posisi jangkar untuk menciptakan efek hover yang bagus pada tautan.

Keren, bukan? Kami memiliki efek geser di mana persegi panjang biru menyesuaikan agar sesuai dengan konten teks dengan sempurna dan memiliki transisi yang bagus. Jika Anda baru mengenal penargetan jangkar, contoh ini cocok untuk Anda karena sederhana dan memberi Anda dasar-dasar fitur baru ini. Kita juga akan melihat contoh lainnya, jadi tunggu sampai akhir!

Perhatikan bahwa saat tulisan ini dibuat, hanya browser berbasis Chromium yang sepenuhnya mendukung penentuan posisi jangkar. Anda harus melihat demo di browser seperti Chrome atau Edge hingga fitur tersebut didukung lebih luas di browser lain.

Konfigurasi awal

Mari kita mulai dengan struktur HTML, yang tidak lebih dari a nav Elemen yang berisi tautan ke daftar tidak berurutan:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">About</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Kami tidak akan menghabiskan terlalu banyak waktu untuk menjelaskan struktur ini karena mungkin berbeda jika kasus penggunaan Anda berbeda. Pastikan semantiknya relevan dengan apa yang ingin Anda lakukan. Sedangkan untuk bagian CSS, kita akan mulai dengan beberapa gaya dasar untuk membuat navigasi menu horizontal.

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  gap: .5rem;
  font-size: 2.2rem;
}

ul li a {
  color: #000;
  text-decoration: none;
  font-weight: 900;
  line-height: 1.5;
  padding-inline: .2em;
  display: block;
}

Tidak ada yang istimewa sejauh ini. Kami menghapus beberapa gaya default dan menggunakan Flexbox untuk menyelaraskan elemen secara horizontal.

efek geser

Pertama, mari kita pahami cara kerja efek. Pada pandangan pertama, kita memiliki persegi panjang yang menyusut hingga ketinggian kecil, berpindah ke elemen yang melayang, dan kemudian tumbuh hingga ketinggian penuh. Ini adalah efek visual, tapi sebenarnya ada lebih dari satu elemen yang terlibat!

Ini adalah demo pertama di mana saya menggunakan warna berbeda untuk lebih memahami apa yang terjadi.

Setiap item menu memiliki “elemen” sendiri yang dapat diperkecil atau diperbesar. Kemudian kita memiliki “elemen” umum (yang berwarna merah) yang meluncur di antara item menu yang berbeda. Efek pertama dilakukan dengan menggunakan animasi latar belakang, efek kedua adalah dimana posisi jangkar ikut berperan!

animasi latar belakang

Kami akan menganimasikan tinggi gradien CSS untuk bagian pertama:

/* 1 */
ul li {
  background: 
    conic-gradient(lightblue 0 0)
    bottom/100% 0% no-repeat;
  transition: .2s;
}

/* 2 */
ul li:is(:hover,.active) {
  background-size: 100% 100%;
  transition: .2s .2s;
}

/* 3 */
ul:has(li:hover) li.active:not(:hover) {
  background-size: 100% 0%;
  transition: .2s;
}

Kami mendefinisikan gradien 100% lebar dan 0% tinggi, ditempatkan di bagian bawah. Sintaks gradien mungkin terlihat aneh, tetapi ini adalah sintaks terpendek yang memungkinkan saya memiliki gradien warna tunggal.

Terkait: “Cara mendefinisikan gradien monokrom dengan benar”

Lalu jika item menu diarahkan atau dimiliki .active kelas, kita buat tingginya sama dengan 100%. Perhatikan bahwa penundaan digunakan di sini untuk memastikan bahwa pertumbuhan terjadi setelah penyusutan.

Terakhir, kita perlu menangani kasus khusus .active benda. Jika kita mengarahkan kursor ke item apa pun (mis. TIDAK aktif), lalu .active item memperoleh efek escape (ketinggian gradien sama dengan 0%). Inilah tujuan dari pemilih ketiga dalam kode.

Animasi pertama kita selesai! Perhatikan bagaimana pertumbuhan dimulai kembali Penyusutan ini dilakukan karena penundaan yang kami tentukan di pemilih kedua.

Animasi penentuan posisi titik jangkar

Animasi pertama sangat sederhana karena setiap item memiliki animasi latar belakangnya sendiri, yang berarti kita tidak perlu mempedulikan konten teks karena latar belakang otomatis akan memenuhi seluruh ruang.

Sebagai animasi kedua kita akan menggunakan elemen yang meluncur di antara semua item menu sambil menyesuaikan lebarnya agar sesuai dengan teks setiap item. Di sinilah penahan dapat membantu kita.

Mari kita mulai dengan kode berikut:

ul:before {
  content:"";
  position: absolute;
  position-anchor: --li;
  background: red;
  transition: .2s;
}

ul li:is(:hover, .active) {
  anchor-name: --li;
}

ul:has(li:hover) li.active:not(:hover) {
  anchor-name: none;
}

Untuk menghindari penambahan elemen tambahan, saya lebih suka menggunakan ul. Ini harus benar-benar diposisikan dan kami akan mengandalkan dua properti untuk mengaktifkan penentuan posisi jangkar.

Kami mendefinisikan titik jangkar anchor-name milik. Saat item menu diarahkan atau dimiliki .active kelas, yang menjadi elemen jangkar. Kita juga harus mulai dengan .active item jika item lain dalam keadaan melayang (dengan demikian, pemilih terakhir dalam kode). Dengan kata lain, hanya tentukan satu titik jangkar dalam satu waktu.

Lalu kita gunakan position-anchor Atribut menghubungkan elemen semu ke jangkar. Perhatikan bagaimana keduanya menggunakan simbol yang sama --li. Misalnya, ini mirip dengan cara kita mendefinisikan @keyframes dengan nama tertentu dan kemudian masuk animation milik. Ingat, Anda harus menggunakan <dashed-indent> sintaksis, artinya nama harus selalu diawali dengan dua tanda hubung (--).

Elemen semu ditempatkan dengan benar, tetapi Anda tidak dapat melihat apa pun karena kami belum menentukan dimensi apa pun! Mari tambahkan kode berikut:

ul:before {
  bottom: anchor(bottom);
  left: anchor(left);
  right: anchor(right);
  height: .2em;  
}

ini height Meskipun propertinya tidak signifikan, namun tetap saja itu penting anchor() Apakah orang baru. Juan Diego menggambarkannya seperti ini di Almanak:

CSS anchor() Fungsi ini mengambil satu sisi elemen jangkar dan memutuskannya <length> Dimana lokasinya. Itu hanya dapat digunakan untuk menyisipkan properti (mis. top, bottom, bottom, left, rightdll.), biasanya digunakan untuk menempatkan elemen yang diposisikan secara mutlak relatif terhadap titik jangkar.

Mari kita periksa juga halaman MDN:

ini anchor() Fungsi CSS dapat digunakan dalam nilai atribut inset dari elemen jangkar untuk mengembalikan nilai panjang relatif terhadap posisi tepi elemen jangkar terkait.

Biasanya kami menggunakan left: 0 Tempatkan elemen absolut di tepi kiri blok yang memuatnya (yaitu nenek moyang terdekat memiliki position: relative). ini left: anchor(left) akan melakukan hal yang sama, tetapi akan mempertimbangkan elemen jangkar yang terkait, bukan blok yang memuatnya.

Selesai – kita selesai! Arahkan kursor ke item menu dalam demo di bawah untuk melihat bagaimana elemen semu meluncur di antara item tersebut.

Setiap kali Anda mengarahkan kursor ke item menu, item tersebut menjadi jangkar baru untuk elemen semu ( ul:before). ini juga berarti anchor(...) Nilainya akan berubah, menciptakan efek geser! Penting bagi kita untuk tidak melupakan penggunaan transisi, jika tidak kita akan mengalami perubahan mendadak.

Kita juga dapat menulis kode dengan berbagai cara sebagai berikut:

ul:before {
  content:"";
  position: absolute;
  inset: auto anchor(right, --li) anchor(bottom, --li) anchor(left, --li);
  height: .2em;  
  background: red;
  transition: .2s;
}

Dengan kata lain, kita bisa mengandalkan inset singkatan daripada menggunakan properti fisik, mis. left, rightDan bottomdaripada mendefinisikan position-anchordimana kita bisa memasukkan nama jangkarnya anchor() Fungsi. Kami mengulangi nama yang sama tiga kali, yang mungkin tidak optimal di sini, namun dalam beberapa kasus Anda mungkin ingin elemen Anda mempertimbangkan beberapa jangkar, dalam hal ini sintaksis ini masuk akal.

menggabungkan dua efek

Sekarang, kami menggabungkan kedua efek ini, Tadafantasinya sempurna!

Perhatikan nilai transisi yang mengutamakan penundaan:

ul:before {
  transition: .2s .2s;
}

ul li {
  transition: .2s;
}

ul li:is(:hover,.active) {
  transition: .2s .4s;
}

ul:has(li:hover) li.active:not(:hover) {
  transition: .2s;
}

Kami memiliki serangkaian tiga animasi – mengecilkan tinggi gradien, menggeser elemen semu, dan menambah tinggi gradien – jadi kami memerlukan penundaan di antara keduanya untuk menyatukan semuanya. Itu sebabnya untuk geser elemen semu, penundaan kita sama dengan durasi satu animasi (transition: .2 .2s), untuk bagian yang sedang tumbuh, penundaannya sama dengan dua kali durasinya (transition: .2s .4s).

Efek peregangan? mengapa tidak?

Mari kita coba animasi mewah lainnya di mana persegi panjang yang disorot berubah menjadi lingkaran kecil, melompat ke item berikutnya, dan kemudian berubah kembali menjadi persegi panjang lagi!

Saya tidak akan menjelaskan terlalu banyak tentang contoh ini karena tugas Anda adalah membedah kodenya! Saya akan memberikan beberapa petunjuk sehingga Anda dapat memahami apa yang terjadi.

Seperti efek sebelumnya, kami memiliki kombinasi dua animasi. Untuk yang pertama saya akan menggunakan elemen semu untuk setiap item menu di mana saya menyesuaikan ukuran dan border-radius untuk mensimulasikan deformasi. Untuk animasi kedua saya akan menggunakan ul Elemen semu untuk membuat lingkaran kecil yang bisa saya pindahkan antar item menu.

Berikut versi demo lainnya, dengan warna berbeda dan transisi lebih lambat untuk memvisualisasikan setiap animasi dengan lebih baik:

Bagian yang rumit adalah efek melompat, saya menggunakan yang aneh cubic-bezier() Namun saya memiliki artikel mendetail yang menjelaskan teknik ini di artikel Trik CSS saya “Menggunakan Animasi CSS Tingkat Lanjut” cubic-bezier()“.

sebagai kesimpulan

Saya harap Anda menikmati eksperimen kecil ini menggunakan penentuan posisi jangkar. Kami hanya melihat tiga properti/nilai, namun itu cukup untuk membuat Anda siap menggunakan fitur baru ini. ini anchor-name Dan position-anchor Atribut adalah bagian wajib untuk menghubungkan satu elemen (sering disebut elemen “target” dalam konteks ini) ke elemen lain (yang dalam konteks ini kita sebut elemen “jangkar”). Dari sana, Anda akan mendapatkannya anchor() berfungsi untuk mengontrol posisi.

Terkait: Pedoman Pemosisian Jangkar CSS