2022-01-23 17:03:03 +07:00
<!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 > < < b > details< / b > < i > role< / i > =< u > "list"< / u > > < / code > as a wrapper and < code > < < b > summary< / b > > < / code > and < code > < < b > ul< / b > > < / code > as direct childs.< / p >
2022-02-27 17:21:13 +07:00
< p > For style consistency with the form elements, dropdowns are styled like a < a href = "forms.html" > < code > < < b > select< / b > > < / code > < / a > by default.< / p >
2022-01-23 17:03:03 +07:00
< article aria-label = "Dropdown style" >
< details role = "list" >
< summary aria-haspopup = "listbox" > Dropdown< / summary >
< ul role = "listbox" >
< li > < a href = "#" > Mauris vehicula velit< / a > < / li >
< li > < a href = "#" > Nunc dignissim sapien< / a > < / li >
< li > < a href = "#" > Aenean egestas quam< / a > < / li >
< / ul >
< / details >
< select required >
< option value = "" disabled selected > Select< / option >
< / select >
< footer class = "code" >
< pre > < code > < em > < !-- Dropdown --> < / em >
< < b > details< / b > < i > role< / i > =< u > "list"< / u > >
< < b > summary< / b > < i > aria-haspopup< / i > =< u > "listbox"< / u > > Dropdown< /< b > summary< / b > >
< < b > ul< / b > < i > role< / i > =< u > "listbox"< / u > >
< < b > li< / b > > < < b > a< / b > > Mauris vehicula velit< /< b > a< / b > > < /< b > li< / b > >
< < b > li< / b > > < < b > a< / b > > Nunc dignissim sapien< /< b > a< / b > > < /< b > li< / b > >
< < b > li< / b > > < < b > a< / b > > Aenean egestas quam< /< b > a< / b > > < /< b > li< / b > >
< /< b > ul< / b > >
< /< b > details< / b > >
< em > < !-- Select --> < / em >
< < b > select< / b > < / u > >
< < b > option< / b > < i > value< / i > =< u > ""< / u > < i > disabled selected< / i > > Select< /< b > option< / b > >
< < b > option< / b > > …< /< b > option< / b > >
< /< b > select< / b > >
< / code > < / pre >
< / footer >
< / article >
< p > < code > < i > role< / i > =< u > "button"< / u > < / code > on the < code > < < b > summary< / b > > < / code > element can be used to turn the dropdown into a button.< / p >
< article aria-label = "Dropdown style" >
< details role = "list" >
< summary aria-haspopup = "listbox" role = "button" > Dropdown as a button 1< / summary >
< ul role = "listbox" >
< li > < a href = "#" > Mauris vehicula velit< / a > < / li >
< li > < a href = "#" > Nunc dignissim sapien< / a > < / li >
< li > < a href = "#" > Aenean egestas quam< / 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 = "#" > Mauris vehicula velit< / a > < / li >
< li > < a href = "#" > Nunc dignissim sapien< / a > < / li >
< li > < a href = "#" > Aenean egestas quam< / 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 = "#" > Mauris vehicula velit< / a > < / li >
< li > < a href = "#" > Nunc dignissim sapien< / a > < / li >
< li > < a href = "#" > Aenean egestas quam< / a > < / li >
< / ul >
< / details >
< footer class = "code" >
< pre > < code > < em > < !-- Primary --> < / em >
< < b > details< / b > < i > role< / i > =< u > "list"< / u > >
< < b > summary< / b > < i > aria-haspopup< / i > =< u > "listbox"< / u > < i > role< / i > =< u > "button"< / u > >
Dropdown as a button 1
< /< b > summary< / b > >
< < b > ul< / b > < i > role< / i > =< u > "listbox"< / u > >
< em > …< / em >
< /< b > ul< / b > >
< /< b > details< / b > >
< em > < !-- Secondary --> < / em >
< < b > details< / b > < i > role< / i > =< u > "list"< / u > >
< < b > summary< / b > < i > aria-haspopup< / i > =< u > "listbox"< / u > < i > role< / i > =< u > "button"< / u > < i > class< / i > =< u > "secondary"< / u > >
Dropdown as a button 2
< /< b > summary< / b > >
< < b > ul< / b > < i > role< / i > =< u > "listbox"< / u > >
< em > …< / em >
< /< b > ul< / b > >
< /< b > details< / b > >
< em > < !-- Contrast --> < / em >
< < b > details< / b > < i > role< / i > =< u > "list"< / u > >
< < b > summary< / b > < i > aria-haspopup< / i > =< u > "listbox"< / u > < i > role< / i > =< u > "button"< / u > < i > class< / i > =< u > "contrast"< / u > >
Dropdown as a button 3
< /< b > summary< / b > >
< < b > ul< / b > < i > role< / i > =< u > "listbox"< / u > >
< em > …< / em >
< /< b > ul< / b > >
< /< b > details< / b > >
< / code > < / pre >
< / footer >
< / article >
2022-01-23 17:40:56 +07:00
< p > Dropdowns can be used as custom selects with < code > < < b > input< / b > < i > type< / i > =< u > "radio"< / u > > < / code > or < code > < < b > input< / b > < i > type< / i > =< u > "checkbox"< / u > > < / code > < / p >
2022-01-23 17:03:03 +07:00
< article aria-label = "Dropdown style" >
< 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 > < !-- With radio buttons --> < / em >
< < b > details< / b > < i > role< / i > =< u > "list"< / u > >
< < b > summary< / b > < i > aria-haspopup< / i > =< u > "listbox"< / u > > Dropdown< /< b > summary< / b > >
< < b > ul< / b > < i > role< / i > =< u > "listbox"< / u > >
< < b > li< / b > >
< < b > label< / b > < i > for< / i > =< u > "small"< / u > >
< < 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 > >
Small
< /< b > label< / b > >
< /< b > li< / b > >
< < b > li< / b > >
< < b > label< / b > < i > for< / i > =< u > "medium"< / u > >
< < 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 > >
Medium
< /< b > label< / b > >
< /< b > li< / b > >
< < b > li< / b > >
< < b > label< / b > < i > for< / i > =< u > "large"< / u > >
< < 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 > >
Large
< /< b > label< / b > >
< /< b > li< / b > >
< /< b > ul< / b > >
< /< b > details< / b > >
< em > < !-- With checkboxes --> < / em >
< < b > details< / b > < i > role< / i > =< u > "list"< / u > >
< < b > summary< / b > < i > aria-haspopup< / i > =< u > "listbox"< / u > > Dropdown< /< b > summary< / b > >
< < b > ul< / b > < i > role< / i > =< u > "listbox"< / u > >
< < b > li< / b > >
< < b > label< / b > >
< < b > input< / b > < i > type< / i > =< u > "checkbox"< / u > >
Banana
< /< b > label< / b > >
< /< b > li< / b > >
< < b > li< / b > >
< < b > label< / b > >
< < b > input< / b > < i > type< / i > =< u > "checkbox"< / u > >
Watermelon
< /< b > label< / b > >
< /< b > li< / b > >
< < b > li< / b > >
< < b > label< / b > >
< < b > input< / b > < i > type< / i > =< u > "checkbox"< / u > >
Apple
< /< b > label< / b > >
< /< b > li< / b > >
< /< b > ul< / b > >
< /< b > details< / b > >
< / footer >
< / article >
< / section >
${require('./_footer.html')}
< / div >
< / main >
< script src = "js/commons.min.js" > < / script >
< / body >
< / html >
