Navigasi menu mewah menggunakan kedudukan utama

Saya percaya anda telah mendengar fungsi kedudukan penunggang CSS, bukan? Ciri ini membolehkan anda menghubungkan mana -mana elemen pada halaman ke elemen lain, titik utama. Ia sangat berguna untuk semua petua, tetapi ia juga menghasilkan banyak hasil yang baik.

Artikel ini akan mengkaji navigasi menu, dan saya bergantung pada kedudukan utama untuk membuat kesan hover yang sangat baik pada pautan.

Ia sejuk, bukan? Kami mempunyai kesan gelongsor, segi empat tepat biru sempurna menyesuaikan diri dengan kandungan teks melalui peralihan yang lancar. Jika anda tidak biasa dengan kedudukan sauh, contoh ini sesuai untuk anda kerana ia mudah dan akan memberi anda asas -asas ciri baru ini. Kami akan belajar contoh lain, jadi berpegang pada akhir!

Perhatikan bahawa sebagai penulisan ini, hanya pelayar berasaskan kromium sepenuhnya menyokong kedudukan sauh. Sebelum penyemak imbas lain dapat menyokong ciri ini dengan lebih luas, anda perlu melihat demo dalam pelayar seperti Chrome atau Edge.

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe0f n/link/93ac0c50dd620dc7b88e5fe05c70e15b konfigurasi awal mari kita mulakan dengan struktur HTML, yang hanya elemen NAV yang mengandungi senarai pautan yang tidak teratur:

Kami tidak akan menghabiskan banyak masa untuk menerangkan struktur ini, kerana ia juga mungkin berbeza jika kes penggunaan anda berbeza. Hanya pastikan semantik berkaitan dengan apa yang anda cuba lakukan. Bagi bahagian CSS, kami akan bermula dengan beberapa gaya asas untuk membuat navigasi menu mendatar.

<nav><ul>
<li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Home</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Projects</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Blog</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact</a></li>
  </ul></nav>

Setakat ini, tidak ada yang istimewa. Kami mengeluarkan beberapa gaya lalai dan menggunakan Flexbox untuk menyelaraskan unsur -unsur secara mendatar.

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

ul li a {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
  text-decoration: none;
  font-weight: 900;
  line-height: 1.5;
  padding-inline: .2em;
  display: block;
}

kesan gelongsor

Pertama, marilah kita faham bagaimana kesannya berfungsi. Pada pandangan pertama, nampaknya kita mempunyai segi empat tepat yang menyusut ke ketinggian yang sangat kecil, bergerak ke elemen hover, dan kemudian tumbuh ke ketinggian penuh. Ini adalah kesan visual, tetapi pada hakikatnya, pelbagai elemen terlibat!

Ini adalah demonstrasi pertama saya, dan saya menggunakan warna yang berbeza untuk lebih memahami apa yang sedang berlaku.

Setiap item menu mempunyai "elemen" tersendiri yang boleh menyusut atau berkembang. Kemudian kita mempunyai "elemen" biasa (yang berwarna merah) yang meluncur antara item menu yang berbeza. Kesan pertama dilakukan menggunakan animasi latar belakang, dan kesan kedua adalah di mana kedudukan titik utama dimainkan!

Animasi latar belakang

Untuk bahagian pertama, kita akan menghidupkan ketinggian kecerunan CSS:

Kami menentukan kecerunan dengan lebar 100% dan ketinggian 0% di bahagian bawah. Sintaks kecerunan mungkin kelihatan pelik, tetapi ia adalah sintaks terpendek yang membolehkan saya mempunyai kecerunan monokrom.

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

Berkaitan:

"Bagaimana untuk menentukan kecerunan monokrom dengan betul" Kemudian, jika item menu dilegakan atau mempunyai kelas aktif, kami menetapkan ketinggian kepada 100%. Sila ambil perhatian penggunaan kelewatan di sini untuk memastikan pertumbuhan berlaku selepas pengecutan.

Akhirnya, kita perlu menangani kes -kes khas. Item aktif. Jika kita melayang apa -apa item (bukan item aktif), item aktif akan mendapat kesan mengecut (ketinggian kecerunan sama dengan 0%). Inilah pemilih ketiga dalam kod.

Animasi pertama kami selesai! Perhatikan bagaimana pertumbuhan bermula selepas penguncupan selesai disebabkan oleh kelewatan yang kami tentukan dalam pemilih kedua. animasi kedudukan anchor

Animasi pertama sangat mudah kerana setiap projek mempunyai animasi latar belakang sendiri, yang bermaksud kita tidak perlu mengambil berat tentang kandungan teks, kerana latar belakang secara automatik mengisi seluruh ruang.

kami akan menggunakan satu elemen untuk melakukan animasi kedua yang meluncur di antara semua item menu sambil menyesuaikan lebarnya agar sesuai dengan teks setiap item. Di sinilah kedudukan sauh dapat membantu kami.

mari kita mulakan dengan kod berikut:

Untuk mengelakkan menambah elemen tambahan, saya lebih suka menggunakan unsur-unsur pseudo pada UL. Ia harus benar -benar diposisikan, dan kami akan bergantung kepada dua sifat untuk mengaktifkan kedudukan sauh.

<nav><ul>
<li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Home</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Projects</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Blog</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact</a></li>
  </ul></nav>

Kami menggunakan atribut nama utama untuk menentukan titik utama. Apabila item menu berlegar atau mempunyai kelas aktif, ia menjadi elemen utama. Jika item lain melayang, kita juga perlu mengeluarkan titik utama dari item aktif (jadi, pemilih terakhir dalam kod). Dalam erti kata lain, hanya satu titik utama yang ditakrifkan pada satu masa.

Kemudian kami menggunakan atribut kedudukan-anchor untuk menghubungkan elemen pseudo ke titik utama. Perhatikan bagaimana kedua -duanya menggunakan notasi yang sama -li. Ini sama dengan, sebagai contoh, bagaimana kita menentukan @keyframes dengan nama tertentu dan kemudian menggunakannya dalam harta animasi. Ingat bahawa anda perlu menggunakan sintaks

, yang bermaksud bahawa nama itu mesti selalu bermula dengan dua sengkang (-).

Pseudo-element diletakkan dengan betul, tetapi tidak ada yang dilihat kerana kita tidak menentukan apa-apa dimensi! Mari tambahkan kod berikut:

Atribut ketinggian

adalah mudah, tetapi sauh () adalah ahli baru. Inilah yang Juan Diego menggambarkannya di Almanak:

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

ul li a {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
  text-decoration: none;
  font-weight: 900;
  line-height: 1.5;
  padding-inline: .2em;
  display: block;
}

Fungsi

CSS Anchor () mengambil satu sisi elemen jangkar dan mengasingkannya ke dalam kedudukannya

. Ia hanya boleh digunakan untuk sifat -sifat sebaris (seperti atas, bawah, bawah, kiri, kanan, dan lain -lain), dan biasanya digunakan untuk meletakkan unsur -unsur yang benar -benar diposisikan berbanding dengan titik utama.

mari kita periksa halaman MDN juga:

Anchor () Fungsi CSS boleh digunakan dalam nilai atribut tertanam elemen kedudukan sauh, mengembalikan nilai panjang berbanding dengan kedudukan kelebihan elemen jangkar yang berkaitan.

Biasanya, kita menggunakan kiri: 0 untuk meletakkan elemen mutlak di pinggir kiri blok yang mengandungi (iaitu, nenek moyang terdekat dengan kedudukan: relatif). Kiri: Anchor (kiri) akan melakukan perkara yang sama, tetapi ia akan mengambil kira elemen utama yang berkaitan dan bukannya mengandungi blok.

itu sahaja - kami sudah selesai! Tuding item menu dalam demo di bawah untuk melihat bagaimana slaid pseudo-elemen di antara mereka.

Setiap kali anda melayang tetikus anda ke atas item menu, ia menjadi sauh baru untuk pseudo-element (UL: sebelum). Ini juga bermakna bahawa nilai sauh (...) akan berubah, mengakibatkan kesan gelongsor! Jangan lupa menggunakan peralihan atau kita akan mengalami perubahan secara tiba -tiba.

kita juga boleh menulis kod seperti ini:

<nav><ul>
<li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Home</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Projects</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Blog</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact</a></li>
  </ul></nav>

Dengan kata lain, bukannya menggunakan sifat fizikal seperti kiri, kanan, dan bawah, kita boleh bergantung pada singkatan inset, dan bukannya menentukan kedudukan-anchor, kita boleh memasukkan nama sauh dalam fungsi sauh (). Kami telah mengulangi nama yang sama tiga kali di sini, yang mungkin bukan pilihan terbaik, tetapi dalam beberapa kes anda mungkin mahu elemen anda untuk mempertimbangkan beberapa sauh, di mana sintaks ini akan masuk akal.

menggabungkan dua kesan

Sekarang, kami menggabungkan kedua -dua kesan, tidak sah , halusinasi adalah sempurna!

Sila ambil perhatian nilai peralihan, di mana kelewatan itu penting:

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

ul li a {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
  text-decoration: none;
  font-weight: 900;
  line-height: 1.5;
  padding-inline: .2em;
  display: block;
}

Kami mempunyai satu siri tiga animasi-mengurangkan ketinggian kecerunan, luncurkan unsur-unsur pseudo, dan meningkatkan ketinggian kecerunan-jadi kita perlu menetapkan kelewatan di antara mereka untuk meletakkan semuanya bersama-sama. Inilah sebabnya untuk sapu unsur-unsur pseudo, kita mempunyai kelewatan yang sama dengan tempoh animasi (peralihan: .2.2s), sementara bagi bahagian pertumbuhan, kelewatan sama dengan tempoh dua kali (peralihan: .2.4s).

kesan lantunan? Mengapa tidak? !

Mari kita cuba animasi aneh yang lain di mana rektum yang diserlahkan menjadi ubah bentuk ke dalam bulatan kecil, melompat ke item seterusnya, dan kemudian ubah bentuk kembali ke segi empat tepat lagi!

Saya tidak akan menerangkan contoh ini terlalu banyak, kerana ini adalah kerja rumah anda untuk menganalisis kod! Saya akan memberikan beberapa petua supaya anda dapat membongkar apa yang sedang berlaku.

Seperti kesan sebelumnya, kami menggabungkan dua animasi. Untuk yang pertama, saya akan menggunakan unsur-unsur pseudo setiap item menu, saya akan mengubah saiz dan radius sempadan untuk mensimulasikan ubah bentuk. Untuk animasi kedua, saya akan membuat bulatan kecil menggunakan UL Pseudo-Element, yang saya bergerak di antara item menu.

Ini adalah versi lain dari demo, warna yang berbeza dan peralihan yang lebih perlahan untuk memvisualisasikan setiap animasi:

Bahagian yang rumit adalah kesan lompat, saya menggunakan padu-padu yang pelik (), tetapi saya mempunyai artikel terperinci yang menerangkan teknik ini dalam artikel CSS-Tricks saya "Animasi CSS Advanced Menggunakan Cubic-BeBer ()".

Kesimpulan

Saya harap anda menikmati percubaan kecil ini menggunakan fungsi kedudukan utama. Kami hanya melihat tiga sifat/nilai, tetapi itu cukup untuk membuat anda bersedia untuk menggunakan ciri baru ini. Atribut-atribut anchor dan kedudukan-anchor adalah bahagian wajib yang menghubungkan elemen (biasanya dipanggil elemen "sasaran" dalam konteks ini) ke elemen lain (kita panggil elemen "anchor" dalam konteks ini). Dari sana, anda boleh menggunakan fungsi sauh () untuk mengawal kedudukan.

Berkaitan:

Atas ialah kandungan terperinci Navigasi menu mewah menggunakan kedudukan utama. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!