BerandaComputers and TechnologyMenu Dropdown dengan Ringkasan Detail

Menu Dropdown dengan Ringkasan Detail

Saya menambahkan menu dropdown ke Datasette 0.51 – lihat # 1064 .

Saya menerapkannya menggunakan HTML

elemen. HTMLnya terlihat seperti ini:

    detail   kelas =" menu navigasi  ">         ringkasan  >     svg   aria-labelledby =" nav-menu-svg-title  " peran =" img  "          isi =" currentColor  " guratan =" currentColor "  xmlns =" http://www.w3.org/2000/svg  "          viewBox =" 0 0 16 16  " lebar =" 16 "  tinggi =" 16  ">                 judul   id =" nav-menu-svg-title  ">  Menu   judul>                 jalur   aturan isi ="  evenodd  " d =" M1 2.75A.75.75 0 011.75 2h12.5a.75.75 0 110 1.5H1.75A 0,75.75 0 011 2.75zm0 5A.75.75 0 011.75 7h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 7.75zM1.75 12a.75.75 0 100 1.5h12.5a.75.75 0 100-1.5H1.75z  ">      jalur  >          svg  >      ringkasan  >         div   kelas =" nav-menu-inner  ">             ul  >                 li  >     a   href =" /  ">  Item satu     a  >      li  >                 li  >     a   href =" /  ">  Item dua     a  >      li  >                 li  >     a   href =" /  ">  Item ketiga     a  >      li  >              ul  >          div  >      detail  >  

Lihat pojok kanan atas https://latest-with-plugins.datasette.io/ untuk demo.

Ini menampilkan ikon SVG yang, ketika diklik, akan meluas untuk menampilkan menu. Ikon SVG menggunakan aria-labelledby="nav-menu-svg-title" role="img" dan elemen untuk aksesibilitas.

Saya menata menu menggunakan varian dari CSS berikut:

  detail .  menu navigasi  >   ringkasan  {      gaya daftar : tidak ada;      tampilan : sebaris;      posisi : relatif;      kursor : penunjuk; }  detail .  nav- menu  >   ringkasan  ::  - webkit -detail-penanda  {      tampilan : tidak ada; }  detail .  nav- menu-dalam  {      posisi : mutlak;      atas :  2  rem  ;      kiri :  10  px  ;      lebar :  180  px  ;      indeks-z :  1000 ;      batas :  1  px   hitam pekat; } .  nav-menu-inner  Sebuah {      tampilan : blok; } 

list-style: none; menyembunyikan panah pengungkapan default dari sebagian besar browser. :: - webkit-details-marker {display: none} menangani sisanya.

Elemen ringkasan menggunakan posisi: relatif; dan detail .nav-menu-inner menggunakan posisi: absolut – ini memposisikan menu dropdown terbuka di tempat yang tepat.

Klik di luar kotak untuk menutup menu

Hal di atas tidak menggunakan JavaScript sama sekali, tetapi memiliki satu kelemahan: biasanya ada menu untuk menghapusnya jika Anda mengklik di luar menu, tetapi di sini Anda perlu mengklik lagi ikon yang tepat untuk menyembunyikannya.

Saya menyelesaikannya dengan JavaScript berikut, jalankan di bagian bawah halaman:

dokumen .  tubuh.  addEventListener  ('klik' ,   (  ev  )  =>   {      / Tutup semua elemen detail terbuka yang di luar klik ini /       var   target  =  ev  . target;       var   detailsClickedWithin  = batal;      sementara   (  target   &&   target  .   tagName != 'DETAIL'  )   {          target  =  target  .   parentNode  ;      }       jika   (  target   &&   target  .   tagName  ==  'DETAIL'  )   {          detailsClickedWithin  =  target  ;      }      Himpunan.dari(dokumen .   getElementsByTagName   (  'detail'  )  )  .  Saring(          (  detail  )  =>   detail  .  Buka &&  detail != detailsClickedWithin      )  . untuk setiap (  detail  =>   detail  . Buka =  salah  )   ;  }  )  ;  

Dibuat 2020-10-31T20: 12: 10-07: 00 · Edit

Read More

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments