-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample_customized.html
90 lines (77 loc) · 2.46 KB
/
example_customized.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<!--
jdmenubar Example with customizable style
Copyright (c) Joel Midstjärna
-->
<html>
<!--------------------------------------------------------------------------->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes">
<meta charset="utf-8"/>
<head>
<title id="main-title">Javascript Desktop Menu Bar Example</title>
<link rel="stylesheet" href="jdmenubar.css" type="text/css">
<script src="jdmenubar.js"></script>
<style>
:root {
--jdmenu-bg-color: rgb(0,250,250);
--jdmenu-border-color: rgb(0,200,200);
--jdmenu-focus-color: rgb(0,235,235);
--jdmenu-shortcut-color:rgb(0,100,100); /* Also for disabled items */
--jdmenu-font-size: 25px;
--jdmenu-font-family: "Comic Sans MS", "Comic Sans", cursive;
--jdmenu-font-color: rgb(0,0,0);
}
body {
padding: 0 0 0 0;
margin: 0 0 0 0;
}
</style>
<script>
window.onload = function() {
const menuItems = [
{ text : "File", subMenuItems : [
{ text : "New", handler : newClicked, shortcut : "Ctrl+N", icon : "✏"},
{ text : "Open" },
{ text : "Open Recent", subMenuItems : [
{ text : "File1.txt"},
{ text : "File2.txt"},
{ separator : true},
{ text : "Or even older" , subMenuItems : [
{ text : "File3.txt"},
{ text : "File4.txt"},
]}
]},
{ separator : true},
{ text : "Save", shortcut : "Ctrl+S", icon : "💾", enabled : false },
{ text : "Save As...", shortcut : "Ctrl+Shift+S" }
]},
{ text : "Edit", subMenuItems : [
{ text : "Cut", icon : "✂️" },
{ text : "Copy", icon : "📄" },
{ text : "Paste", icon : "📋"},
]},
{ text : "Help", subMenuItems : [
{ text : "More", icon : "☃", subMenuItems : [
{ text : "This" },
{ text : "And that" },
]},
{ text : "About", handler : aboutClicked},
]},
]
menubar = new MenuBar(document.getElementById("menu-bar"), menuItems);
}
function newClicked() {
alert("Clicked new");
}
function aboutClicked() {
alert("About new");
}
</script>
</head>
<!--------------------------------------------------------------------------->
<body>
<div id="menu-bar"></div>
<br>
Click on the menu bar above
</body>
</html>