mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-25 10:46:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

style(dropdowns)

Browse source
This commit is contained in:
Lucas Larroche 2022-03-06 09:37:03 +07:00
parent 667c94951a
commit 9a0db7ab7f
22 changed files with 300 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

26
docs/dropdowns.html
View file

@ -98,15 +98,37 @@
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
</code></pre></footer></article><p>Dropdowns can be used inside a <a href="navs.html">&lt;nav&gt;</a> with a nested <code>&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;</code></p><article aria-label="Dropdowns inside a nav"><nav><ul><li><strong>Brand</strong></li></ul><ul><li><a href="#" onclick="event.preventDefault()">Link</a></li><li><a href="#" onclick="event.preventDefault()">Link</a></li><li><details role="list" dir="rtl"><summary aria-haspopup="listbox" role="button">Dropdown</summary><ul role="listbox"><li><a href="#" onclick="event.preventDefault()">Action</a></li><li><a href="#" onclick="event.preventDefault()">Another action</a></li><li><a href="#" onclick="event.preventDefault()">Something else here</a></li></ul></details></li></ul></nav><footer class="code"><pre><code>&lt;<b>nav</b>&gt;
</code></pre></footer></article><p>Dropdowns can be used inside a <a href="navs.html">&lt;nav&gt;</a> with a nested <code>&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;</code></p><p>Example with a dropdown as a link:</p><article aria-label="Dropdowns inside a nav"><nav><ul><li><strong>Brand</strong></li></ul><ul><li><a href="#" onclick="event.preventDefault()">Link</a></li><li><details role="list" dir="rtl"><summary aria-haspopup="listbox" role="link">Dropdown</summary><ul role="listbox"><li><a href="#" onclick="event.preventDefault()">Action</a></li><li><a href="#" onclick="event.preventDefault()">Another action</a></li><li><a href="#" onclick="event.preventDefault()">Something else here</a></li></ul></details></li></ul></nav><footer class="code"><pre><code>&lt;<b>nav</b>&gt;
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>strong</b>&gt;Brand&lt;/<b>strong</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>details</b> <i>role</i>=<u>"list"</u> <i>dir</i>=<u>"rtl"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"link"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>nav</b>&gt;</code></pre></footer></article><p>Example with a default dropdown and a dropdown as a button:</p><article aria-label="Dropdowns inside a nav"><nav><ul><li><details role="list"><summary aria-haspopup="listbox">Dropdown</summary><ul role="listbox"><li><a href="#" onclick="event.preventDefault()">Action</a></li><li><a href="#" onclick="event.preventDefault()">Another action</a></li><li><a href="#" onclick="event.preventDefault()">Something else here</a></li></ul></details></li><li><details role="list"><summary aria-haspopup="listbox" role="button">Dropdown</summary><ul role="listbox"><li><a href="#" onclick="event.preventDefault()">Action</a></li><li><a href="#" onclick="event.preventDefault()">Another action</a></li><li><a href="#" onclick="event.preventDefault()">Something else here</a></li></ul></details></li></ul></nav><footer class="code"><pre><code>&lt;<b>nav</b>&gt;
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;