davejansen/system.css
1
0
Fork 0
mirror of https://github.com/sakofchit/system.css.git synced 2026-05-05 06:01:22 +09:00
Code Issues Activity

Rework dropdown menus as <details>/<summary>

Browse Source 
the hidden checkbox approach is brittle and not accessible (wrapping the entire checkbox and menu inside a `<label>`, not easy to add `:focus` style, etc)
This commit is contained in:
Patrick H. Lauke
2022-08-12 20:45:08 +01:00
parent 29ff21628e
commit 20ecb5e17b
2 changed files with 18 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
docs/index.html.ejs
View File

@@ -190,14 +190,12 @@
<%- example(`
<label class="dropdown">
<details class="dropdown">
<div class="dd-toggle">
<summary class="dd-toggle">
File
</div>
<input type="checkbox" class="dd-input" id="test">
</summary>
<ul class="dd-menu">
<li>Action</li>
<li>Another action</li>
@@ -208,15 +206,13 @@
</li>
</ul>
</label>
</details>
<label class="dropdown">
<details class="dropdown">
<div class="dd-toggle">
<summary class="dd-toggle">
Edit
</div>
<input type="checkbox" class="dd-input" id="test">
</summary>
<ul class="dd-menu">
<li>Woah</li>
@@ -229,15 +225,13 @@
</li>
</ul>
</label>
</details>
<label class="dropdown">
<details class="dropdown">
<div class="dd-toggle">
<summary class="dd-toggle">
View
</div>
<input type="checkbox" class="dd-input" id="test">
</summary>
<ul class="dd-menu">
<li>Action</li>
@@ -249,15 +243,13 @@
</li>
</ul>
</label>
</details>
<label class="dropdown">
<details class="dropdown">
<div class="dd-toggle">
<summary class="dd-toggle">
Special
</div>
<input type="checkbox" class="dd-input" id="test">
</summary>
<ul class="dd-menu">
<li>You probably</li>
@@ -266,7 +258,7 @@
<li>Idea</li>
</ul>
</label>
</details>
`)%>
</div>