/
menu_icons_only.html
130 lines (120 loc) · 9.79 KB
/
menu_icons_only.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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic Hamburger Navigation Menu Demo</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<nav class="site-nav" currentpage="home">
<h1 class="logo">WebApp <span>Navigation</span></h1>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
<ul class="open desktop">
<li><a href="#!" onclick="app.nav.page('home')"><img class="menu-icon" src="img/icons-svg/home-white.svg"><div class="nav-text site-nav--icon">Home</div></a></li>
<li><a href="#!" onclick="app.nav.page('news')"><img class="menu-icon" src="img/icons-svg/info-white.svg"><div class="nav-text site-nav--icon">News</div></a></li>
<li><a href="#!" onclick="app.nav.page('about')"><img class="menu-icon" src="img/icons-svg/info-white.svg"><div class="nav-text site-nav--icon">About</div></a></li>
<li><a href="#!" onclick="app.nav.page('download')"><img class="menu-icon" src="img/icons-svg/arrow-d-white.svg"><div class="nav-text site-nav--icon">Download</div></a></li>
<li><a href="#!" onclick="app.nav.evt.show_message('My message to you!')"><img class="menu-icon" src="img/icons-svg/gear-white.svg"><div class="nav-text site-nav--icon">Script-Call</div></a></li>
<li><a href="use_icons.html" id="menu_link"><img class="menu-icon" src="img/icons-svg/action-white.svg"><div class="nav-text site-nav--icon">Link</div></a></li>
</ul>
</nav>
</div>
<div class="area" data-role="page-container" id="page-container" currentpage="home">
<div class="pages-app" data-role="page" id="home">
<h2>Home</h2>
Please try to <b>change width</b> of the browser window to see what happens with the hamburger menu - with a narrow width the hamburger menu icon will appear on the right top.
The menu bar in the Desktop Mode does not show icons. Only in the mobile mode (small width of window on mobile devices) logos are visible in the menu items. You have options for the top menu bar shown below.
<ul>
<li>
<a href="menu_text_only.html"><b>Menu Bar in Desktop Mode:</b> Text only </a>
</li>
<li>
<a href="menu_icons_text.html"><b>Menu Bar in Desktop Mode:</b> Icons and Text </a>
</li>
<li>
<a href="menu_icons_only.html"><b>Menu Bar in Desktop Mode:</b> Icons only </a>
</li>
</ul>
Create you own WebApp with <a href="https://niehausbert.gitlab.io/jsoneditor4menu" target="_blank">JSONEditor4Menu</a>.
See also <a href="use_icons.html">general info about the integration of icons</a> in WebApps.
<hr>
<center>
<b>GitHub Repository:</b> <a href="https://github.com/niebert/hamburger_menu_app" target="_blank">Hamburger Menu App</a>
</center>
</div>
<div class="pages-app" data-role="page" id="news">
<h2>News</h2>
This is News page with page content.
With an Open Source JSON Editor originally developed by Jeremy Dorn a Navigation Menu Creator is developed. A first alpha-version is used to created this demo.
In the future you can create your own hamburger menu with <a href="https://niebert.github.io/hamburger-menu-creator" target="_blank">JSONEditor4Menu</a> which is an Offline <a href="https://en.wikiversity.org/wiki/WebApps_with_LocalStorage_and_AppCache" target="_blank">AppLSAC</a>.
<ul>
<li>
Link to the <a href="#!" onclick="app.nav.page('contact')">contact page</a> in the text.
</li>
<li>
Link to the <a href="#!" onclick="app.nav.page('about')">About page</a> in the text.
</li>
<li>
The Javascript code for the page navigation is defined in <kbd><a href="https://github.com/niebert/hamburger_menu_app/blob/master/js/menu.js" target="_blank">js/menu.js</a></kbd>
</li>
</ul>
</div>
<div class="pages-app" data-role="page" id="about">
<h2>About</h2>
This Hamburger Menu was created with a first alpha version of <a href="https://niebert.github.io/hamburger-menu-creator" target="_blank">JSONEditor4Menu</a>.
The Hamburger Menu is an <a href="https://en.wikiversity.org/wiki/WebApps_with_LocalStorage_and_AppCache" target="_blank">AppLSAC</a> and this first prototype can be download this example as <a href="https://github.com/niebert/hamburger_menu_app/archive/master.zip" target="_blank">ZIP file</a> from <a href="https://github.com/niebert/hamburger_menu_app" target="_blank"><kbd>hamburger_menu_app</kbd> GitHub repository</a>.
</div>
<div class="pages-app" data-role="page" id="download">
<h2>Download</h2>
This is a Download page with resources used in this demo:
<ul>
<li>
<a href="https://www.github.com/niebert/jsoneditor_app" target="_blank"><b>JSON-Editor App</b> </a> The <a href="https://github.com/json-editor/json-editor" target="_blank">underlying JSON-Editor</a> was used for this repository <a href="https://www.github.com/niebert/jsoneditor_app" target="_blank">jsoneditor_app on GitHub</a>.
Editor layout for input is configured by a JSON Schema W to generate tailored JSON
</li>
<li>
<b><a href="https://en.wikipedia.org/wiki/Template:Graph:Chart" target="_blank">Template for Graphs:</a></b> The syntax for the output is defined by the <a href="https://en.wikipedia.org/wiki/Template:Graph:Chart" target="_blank">Wikipedia/Wikiversity Template - Graph:Chart</a>. The Handlebars4Code template generates the Wiki-Graph output with the library <a href="https://gitlab.com/niehausbert/handlebars4code#readme" target="_blank">Handlebars4Code</a>. The output of CSV2WikiChart WebApp uses the JSON in the JSON Editor to populate the <a href="tpl/template4json_tpl.js" target="_blank">Handlebars4Code-Template <tt>tpl/template4json_tpl.js</tt></a> (see also <a href="https://niehausbert.gitlab.io/handlebars4code" target="_blank">Handelbars4Code Demo</a>).
</li>
<li>
<b><a href="https://www.github.com/niebert/hamburger_menu_app" target="_blank">App Menu:</a></b> The menu was created with the <a href="https://niehausbert.gitlab.io/jsoneditor4menu/" target="_blank">JSONEditor4Menu</a> as a web-based interface to create a <a href="https://www.github.com/niebert/hamburger_menu_app" target="_blank">Hamburger Menu App</a>.
Editor layout for input is configured by a JSON Schema W to generate tailored JSON
</li>
<li>
<b><a href="https://www.github.com/niebert/icons4menu" target="_blank">Icons:</a></b> The used icons for the menu are a icons from <a href="https://jquerymobile.com/download/">JQuery Mobile 1.4.5 Icons</a> and from <a href="https://commons.wikimedia.org/w/index.php?title=Special:Search&limit=50&offset=0&profile=default&search=Font+Awesome&advancedSearch-current={}&ns0=1&ns6=1&ns12=1&ns14=1&ns100=1&ns106=1" target="_blank">Based on WikiCommons Icons:</a></b> <a href="https://www.github.com/niebert/icons4menu" target="_blank">Icons for Menu:</a></b> The <a href="https://www.github.com/niebert/icons4menu" target="_blank">used icons for the menu</a> are a icons from <a href="https://jquerymobile.com/download/">JQuery Mobile 1.4.5 Icons</a> and from <a href="https://commons.wikimedia.org/w/index.php?title=Special:Search&limit=50&offset=0&profile=default&search=Font+Awesome&advancedSearch-current={}&ns0=1&ns6=1&ns12=1&ns14=1&ns100=1&ns106=1" target="_blank">WikiCommons</a>. For icons and licensing detail see <a href="img/README_Icons4Menu.html" target="_blank">README_Icons4Menu.html</a>.
</li>
<li>
the <a href="https://jquerymobile.com/download/">JQuery Mobile SVG-Icons</a> that are part of version 1.4.5.
</li>
<li>
exend used JQuery Mobile icons with more SVG icons e.g. <a href="https://commons.wikimedia.org/w/index.php?title=Special:Search&limit=500&offset=0&profile=default&search=FontAwesome.com&advancedSearch-current={}&ns0=1&ns6=1&ns12=1&ns14=1&ns100=1&ns106=1" target="_blank">SVG Font Awesome Icons</a>, that are provided as single SVG icons e.g. licensed under Creative Commons Attribution 4.0 International in Wiki Commons</a>.
</li>
<li>
see also <a href="https://www.github.com/niebert/icons4menu">Icons4Menu on GitHub</a>
</li>
<li>
you can also download this <a href="https://github.com/niebert/hamburger_menu_app/archive/master.zip" target="_blank"><kbd>hamburger_menu_app</kbd> example</a>. Please make a reference to the source of the icons you use in your Hamburger Menu e.g. in acknowledgements or the README of your Open Source WebApp.
</li>
</ul>
</div>
<div class="pages-app" data-role="page" id="contact">
<h2>Contact</h2>
This is a demo contact page. The Hamburger Menu uses JQuery to hide and show the selected pages in the menu. The page navigation is defined in <kbd><a href="https://github.com/niebert/hamburger_menu_app/blob/master/js/menu.js" target="_blank">js/menu.js</a></kbd>.
</div>
</div>
<script src="js/jquery-3.2.0.js"></script>
<script src="js/menu.js"></script>
<script type="text/javascript">
//--- show the start page ----
app.nav.page("home");
//--- Assign Toggle Menu Function ----
$('.menu-toggle').click(app.nav.menu.toggle);
</script>
</body>
</html>