Hamburger Menu Application - Brown

This repository contains a hamburger_menu_app as an example of an webbased application (see AppLSAC). Navigation is implemented with Hamburger Menu and JQUery.

• The folder was used for building a ZIP for the demo,

• the ZIP file hamburger_menu_app.zip was generated with a test version of JSONEditor4Menu and this repository is a template ZIP for the generated ZIP file the user menu.

  Hamburger Menu App Demo: https://niebert.github.io/hamburger_menu_app

Test Version of JSONEditor4Menu

• JSONEditor4Menu uses the docs/tpl/javascript_tpl.js as template to generate the docs/js/menu.js for the hamburger_menu_app.
• JSONEditor4Menu uses the docs/tpl/css_tpl.js as template to generate the style sheet docs/css/style.css for the hamburger_menu_app.
• JSONEditor4Menu uses the docs/tpl/html_tpl.js as template to generate the style sheet docs/index.html for the hamburger_menu_app.

Code generation is performed with Handlebars4Code.

Icons4Menu

A generic repository for menu icons is maintained in the repository icons4menu. The script update_wget_icons.sh updates the script from the icons4menu and replaces the script wget_icons.sh. The script wget_icons.sh can be used to download an updated version of the icons. Please modify the script according to your needs, to download just a subset for your AppLSAC.

Change Log

• Version 3.1.0 Icons4Menu icons updated in folder /img - with sh update_wget_icons.sh and sh wget_icons.sh - see repository https://niebert.github.io/icons4menu for licencsing details for the icons.
• Version 3.0.0 Icons4Menu is used to display icons - see repository https://niebert.github.io/icons4menu for licencsing details for the icons.
• Version: 2.0.0 Font Awesome dependency removed - JQuery Icons used for icons in the menu. The folder img/ contains the folder with JQuery icons in PNG and SVG format that can be used directly in the HTML file by embedding them with IMG tags in HTML. This is a robost method to have the icons of choice available for the developers.
• Version 1.0.0: Was dependent on Font Awesome Icons - 4.7.0 used for icons in the Hamburger menu

See also

• Hamburger Menu Creator - Demo: Demo Hamburger Menu - Creator
• Hamburger Menu - Multi-Level without the need of Javascript - Demo: hamburger-menu-no-js

Acknowledgement

Special thanks to the following individual developers and teams of OpenSource JavaScript projects:

• JQuery is used for the theme and standard operations in the Document Object Model (DOM) of HTML-pages. The JQuery-Themeroller was used to create a JQuery theme for JSCC.
• Font Awesome Icons - 4.7.0 thanks to fontawesome.com for providing the free 4.7.0 version for local application for this WebApp. The fonts in version 4.7.0 are created by Font Awesome and licensed under SIL OFL 1.1. The javascript-code for injecting the icon into the DOM licensed under MIT License. The Documentation for Font Awesome - 4.7.0 licensed under CC BY 3.0. The Font-Awesome GitHub-repository can be used for forking and adapting the javascript code to individual requirements and constraints.
• HandleBars the code generation in Javascript was implemented
• JSON-Editor by Jeremy Dorn. The JSON Editor takes a JSON Schema and uses it to generate an HTML form. The JSON-Editor is partially used to edit JSON file of the JavascriptClassCreator Project JSCC. The JSON-Editor of Jeremy Dorn has full support for JSON Schema version 3 and 4 and can integrate with several popular CSS frameworks (bootstrap, foundation, and jQueryUI). This would lead to major code reduction of JSCC . Refactoring of JSCC would make more use of the JSON-Editor features. Check out an interactive demo (demo.html): http://jeremydorn.com/json-editor/
• Developer Mihai Bazon create UglifyJS, a great tool to handle and parse Javascript Code and minify the Javascript code (see Source Code of UglifyJS).
• The wrapper for UglifyJS is written Dan Wolff. His UglifyJS-Online example is used to minify/compress the exported Javascript code of generated JS Classes (For Online Example of the UglifyJS-Wrapper see source code on https://github.com/Skalman/UglifyJS-online for the Online-Version of the Wrapper.
• Developers of ACE Code Editor https://ace.c9.io (Javascript Editing uses the Editor in iFrames)
• FileSaver.js Developer Eli Grey provided the FileSaver.js that is used to store created JSCC files to the local filesystem. JSCC uses the same mechanism of browsers, that allows a Save as... in the context menu of a web pages or image. So not uncontrolled write access to your file system is implemented, because users have to select the locations in which the user whats to store the file (e.g. JSON, Javascript or HTML).
• JointJS JointJS is a JavaScript diagramming library. It can be used to create either static diagrams. JointJS is used in this project to create UML-diagrams, that are interactive diagramming in conjunction and application builder in Javascript.
• Inheritage for JavaScript with protoypes by Gavin Kistner
• 3 ways to define a JavaScript class by Stoyan Stefanov