Skip to content

Commit ec7dcba

Browse files
davidsgrogandavidsgrogan
committed
updated menu example
1 parent 0174c90 commit ec7dcba

1 file changed

Lines changed: 110 additions & 0 deletions

File tree

‎ex2.html‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<meta charset="UTF-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<title>Menu Elements Test Page</title>
6+
7+
<style>
8+
body {
9+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
10+
}
11+
12+
menuitem {
13+
justify-content: space-between;
14+
padding: 6px 10px;
15+
cursor: default;
16+
user-select: none;
17+
border-radius: 4px;
18+
white-space: nowrap;
19+
}
20+
21+
</style>
22+
23+
<h1>Menu Element Test Page</h1>
24+
25+
<menubar>
26+
<!-- File Menu -->
27+
<submenu>
28+
<menuitem>File</menuitem>
29+
<menulist>
30+
<menuitem>New</menuitem>
31+
<!-- This item triggers a nested submenu (Level 2) -->
32+
<submenu>
33+
<menuitem>Open Recent</menuitem>
34+
<menulist>
35+
<menuitem>Document1.txt</menuitem>
36+
<menuitem>Report.docx</menuitem>
37+
<menuitem>Spreadsheet.xlsx</menuitem>
38+
<hr>
39+
<menuitem>Clear List</menuitem>
40+
</menulist>
41+
</submenu>
42+
<hr>
43+
<menuitem>Save</menuitem>
44+
<menuitem>Save As...</menuitem>
45+
<menuitem disabled>Print</menuitem>
46+
<hr>
47+
<menuitem>Exit</menuitem>
48+
</menulist>
49+
</submenu>
50+
51+
<!-- Edit Menu -->
52+
<submenu>
53+
<menuitem>Edit</menuitem>
54+
<menulist>
55+
<menuitem>Undo</menuitem>
56+
<menuitem>Redo</menuitem>
57+
<hr>
58+
<menuitem>Cut</menuitem>
59+
<menuitem>Copy</menuitem>
60+
<menuitem>Paste</menuitem>
61+
</menulist>
62+
</submenu>
63+
64+
<!-- View Menu -->
65+
<submenu>
66+
<menuitem>View</menuitem>
67+
<menulist>
68+
<!-- This item triggers a nested submenu (Level 2) -->
69+
<submenu>
70+
<menuitem>Zoom</menuitem>
71+
<menulist>
72+
<fieldset checkable="single">
73+
<menuitem>50%</menuitem>
74+
<menuitem>75%</menuitem>
75+
<menuitem defaultchecked>100%</menuitem>
76+
<menuitem>150%</menuitem>
77+
<menuitem>200%</menuitem>
78+
</fieldset>
79+
</menulist>
80+
</submenu>
81+
<menuitem>Full Screen</menuitem>
82+
<hr>
83+
<fieldset checkable="multiple">
84+
<menuitem defaultchecked>Show Ruler</menuitem>
85+
<menuitem>Show Outline</menuitem>
86+
<menuitem defaultchecked disabled>Show Comments</menuitem>
87+
</fieldset>
88+
</menulist>
89+
</submenu>
90+
91+
<!-- Help Menu -->
92+
<submenu>
93+
<menuitem>Help</menuitem>
94+
<menulist>
95+
<menuitem>About</menuitem>
96+
<menuitem>Check for Updates...</menuitem>
97+
</menulist>
98+
</submenu>
99+
</menubar>
100+
101+
<p>This is the main content of the application. The menu above should be fully interactive.</p>
102+
103+
<script>
104+
const supported = 'HTMLMenuListElement' in window;
105+
if (!supported) {
106+
document.querySelector('h1').textContent = 'Menu elements are not supported by this browser!!';
107+
}
108+
</script>
109+
</body>
110+
</html>

0 commit comments

Comments
 (0)