mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-24 10:26:13 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions
picocss/docs/src/dropdowns.html
larryhynes d8f1782731 dropdowns.html: childs -> children
2022-05-22 09:59:31 +07:00

379 lines
17 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en">
<head>
${require('./_head.html')
title="Dropdowns"
description="Dropdown menus and custom selects without JavaScript."
canonical="dropdowns.html"
}
</head>
<body>
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="dropdowns-link"}
<div role="document">
<section id="dropdown">
<hgroup>
<h1>Dropdowns</h1>
<h2>Dropdown menus and custom selects without JavaScript.</h2>
</hgroup>
<p>Dropdowns are built with <code>&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;</code> as a wrapper and <code>&lt;<b>summary</b>&gt;</code> and <code>&lt;<b>ul</b>&gt;</code> as direct children.</p>
<p>For style consistency with the form elements, dropdowns are styled like a <a href="forms.html">&lt;select&gt;</a> by default.</p>
<article aria-label="Dropdowns as Selects">
<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>
<select required>
<option value="" disabled selected>Select</option>
<option>Option</option>
<option>Another option</option>
<option>Something else here</option>
</select>
<footer class="code">
<pre><code><em>&lt;!-- Dropdown --&gt;</em>
&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;
<em>&lt;!-- Select --&gt;</em>
&lt;<b>select</b></u>&gt;
&lt;<b>option</b> <i>value</i>=<u>""</u> <i>disabled selected</i>&gt;Select&lt;/<b>option</b>&gt;
&lt;<b>option</b>&gt;…&lt;/<b>option</b>&gt;
&lt;/<b>select</b>&gt;
</code></pre>
</footer>
</article>
<p><code>&lt;<b>summary</b> <i>role</i>=<u>"button"</u>&gt;</code> transforms the dropdown into a button.</p>
<article aria-label="Dropdowns as Buttons">
<details role="list">
<summary aria-haspopup="listbox" role="button">Dropdown as a button 1</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>
<details role="list">
<summary aria-haspopup="listbox" role="button" class="secondary">Dropdown as a button 2</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>
<details role="list">
<summary aria-haspopup="listbox" role="button" class="contrast">Dropdown as a button 3</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>
<footer class="code">
<pre><code><em>&lt;!-- Primary --&gt;</em>
&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 as a button 1
&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;
<em>&lt;!-- Secondary --&gt;</em>
&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> <i>class</i>=<u>"secondary"</u>&gt;
Dropdown as a button 2
&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;
<em>&lt;!-- Contrast --&gt;</em>
&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> <i>class</i>=<u>"contrast"</u>&gt;
Dropdown as a button 3
&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;
</code></pre>
</footer>
</article>
<p>Dropdowns can be used as custom selects with <code>&lt;<b>input</b> <i>type</i>=<u>"radio"</u>&gt;</code> or <code>&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;</code></p>
<article aria-label="Dropdowns with radio buttons or checkboxes">
<details role="list">
<summary aria-haspopup="listbox">Select single element</summary>
<ul role="listbox">
<li>
<label for="small">
<input type="radio" id="small" name="size" value="small" />
Small
</label>
</li>
<li>
<label for="medium">
<input type="radio" id="medium" name="size" value="medium" />
Medium
</label>
</li>
<li>
<label for="large">
<input type="radio" id="large" name="size" value="large" />
Large
</label>
</li>
</ul>
</details>
<details role="list">
<summary aria-haspopup="listbox">Select multiple elements</summary>
<ul role="listbox">
<li>
<label>
<input type="checkbox" />
Banana
</label>
</li>
<li>
<label>
<input type="checkbox" />
Watermelon
</label>
</li>
<li>
<label>
<input type="checkbox" />
Apple
</label>
</li>
</ul>
</details>
<footer class="code">
<pre><code><em>&lt;!-- With radio buttons --&gt;</em>
&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>label</b> <i>for</i>=<u>"small"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"small"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"small"</u>&gt;
Small
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"medium"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"medium"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"medium"</u>&gt;
Medium
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"large"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"large"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"large"</u>&gt;
Large
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
<em>&lt;!-- With checkboxes --&gt;</em>
&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>label</b>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;
Banana
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label</b>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;
Watermelon
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label</b>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;
Apple
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
</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>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;
&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>You can also use <code>&lt;<b>li</b> <i>role</i>=<u>"list"</u>&gt;</code> as a nested wrapper to render a list as a dropdown.</p>
<p>ℹ️&nbsp;This syntax is experimental. In this version, the dropdown menu is triggered on hover.</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 role="list" dir="rtl">
<a href="#" onclick="event.preventDefault()" aria-haspopup="listbox">Dropdown</a>
<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>
</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> <i>role</i>=<u>"list"</u> <i>dir</i>=<u>"rtl"</u>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>a</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>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>nav</b>&gt;</code></pre>
</footer>
</article>
</section>
${require('./_footer.html')}
</div>
</main>
<script src="js/commons.min.js"></script>
</body>
</html>
Reference in a new issue View git blame Copy permalink