Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 288bf24

Browse files
muanmuan
committed
Remove lists since a menu is a list
and add some CSS for blocks
1 parent 3dd182d commit 288bf24

File tree

1 file changed

+31
-20
lines changed

1 file changed

+31
-20
lines changed

‎examples/index.html

Lines changed: 31 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,49 +3,60 @@
33
<head>
44
<meta charset="utf-8">
55
<title>details-menu demo</title>
6+
<style>
7+
details-menu {
8+
background: white;
9+
border: 1px solid;
10+
display: block;
11+
padding: 4px;
12+
width: 200px;
13+
}
14+
button, label[tabindex] {
15+
font-family: inherit;
16+
font-size: inherit;
17+
display: block;
18+
background: none;
19+
border: 0;
20+
width: 100%;
21+
text-align: left;
22+
padding: 0;
23+
}
24+
</style>
625
</head>
726
<body>
827
<details>
928
<summary>Best robot: <span data-menu-button>Unknown</span></summary>
1029
<details-menu>
11-
<ul>
12-
<li><button type="button" role="menuitem" data-menu-button-text>Hubot</button></li>
13-
<li><button type="button" role="menuitem" data-menu-button-text>Bender</button></li>
14-
<li><button type="button" role="menuitem" data-menu-button-text>BB-8</button></li>
15-
</ul>
30+
<button type="button" role="menuitem" data-menu-button-text>Hubot</button>
31+
<button type="button" role="menuitem" data-menu-button-text>Bender</button>
32+
<button type="button" role="menuitem" data-menu-button-text>BB-8</button>
1633
</details-menu>
1734
</details>
1835

1936
<details>
2037
<summary>Best robot: <span data-menu-button>Unknown</span></summary>
2138
<details-menu>
22-
<ul>
23-
<li><label tabindex="0" role="menuitemradio" data-menu-button-text><input type="radio" name="robot"> Hubot</label></li>
24-
<li><label tabindex="0" role="menuitemradio" data-menu-button-text><input type="radio" name="robot"> Bender</label></li>
25-
<li><label tabindex="0" role="menuitemradio" data-menu-button-text><input type="radio" name="robot"> BB-8</label></li>
26-
</ul>
39+
<label tabindex="0" role="menuitemradio" data-menu-button-text><input type="radio" name="robot"> Hubot</label>
40+
<label tabindex="0" role="menuitemradio" data-menu-button-text><input type="radio" name="robot"> Bender</label>
41+
<label tabindex="0" role="menuitemradio" data-menu-button-text><input type="radio" name="robot"> BB-8</label>
2742
</details-menu>
2843
</details>
2944

3045
<details>
3146
<summary>Favorite robots</summary>
3247
<details-menu>
33-
<ul>
34-
<li><label tabindex="0" role="menuitemcheckbox"><input type="checkbox" name="robot"> Hubot</label></li>
35-
<li><label tabindex="0" role="menuitemcheckbox"><input type="checkbox" name="robot"> Bender</label></li>
36-
<li><label tabindex="0" role="menuitemcheckbox"><input type="checkbox" name="robot"> BB-8</label></li>
37-
</ul>
48+
<label tabindex="0" role="menuitemcheckbox"><input type="checkbox" name="robot"> Hubot</label>
49+
<label tabindex="0" role="menuitemcheckbox"><input type="checkbox" name="robot"> Bender</label>
50+
<label tabindex="0" role="menuitemcheckbox"><input type="checkbox" name="robot"> BB-8</label>
3851
</details-menu>
3952
</details>
4053

4154
<details>
4255
<summary data-menu-button>Favorite robots</summary>
4356
<details-menu>
44-
<ul>
45-
<li><button type="submit" name="robot" value="Hubot" role="menuitemradio" data-menu-button-text>Hubot</button></li>
46-
<li><button type="submit" name="robot" value="Bender" role="menuitemradio" data-menu-button-text>Bender</button></li>
47-
<li><button type="submit" name="robot" value="BB-8" role="menuitemradio" data-menu-button-text>BB-8</button></li>
48-
</ul>
57+
<button type="submit" name="robot" value="Hubot" role="menuitemradio" data-menu-button-text>Hubot</button>
58+
<button type="submit" name="robot" value="Bender" role="menuitemradio" data-menu-button-text>Bender</button>
59+
<button type="submit" name="robot" value="BB-8" role="menuitemradio" data-menu-button-text>BB-8</button>
4960
</details-menu>
5061
</details>
5162

0 commit comments

Comments
 (0)