WebApps with LocalStorage and AppCache/Navigation Menu
Jump to navigation
Jump to search
Desktop View of Hamburger Menu 
Mobile View of Hamburger Menu with opened navigation menu 
Mobile View of Hamburger Menu with closed navigation menu and visible page "Home" 
Load Icon from Wiki Commons 
This learning resource is about creating a menu for navigation. The menu will contain 3 types of menu items:
- (Page) is basically HTML content that is displayed when you click on the menu item (check Home, News, Contact as examples in hamburger_menu_app)
- (Script Call) triggers an event to execute a script defined in the AppLSAC. Click on [Script-Call] in the menu.
- (Link) Clicking on the menu item refers to other local HTML pages, that could perform a specific tasks and the user will leave the AppLSAC.
Learning Tasks[edit | edit source]
[edit | edit source]
A Navigation Menu Demo and GitHub-ZIP file[1] was created for this learning resource. The following learning task refers to hamburger_menu_app example:
- Explore on GitHub, which files are stored in the ZIP-file
- Download the GitHub-ZIP file for the Hamburger Menu App.
- create a folder with the name hamburger_menu_app/ and unzip the download ZIP file in that folder.
- play around with the page definition in index.html and the definitions of the scripts in js/menu.js.
[edit | edit source]
- Use the JSONEditor4Menu[2] to create you own menu.
Using Icons for AppLSACs[edit | edit source]
- Explore the integration of Icons[3] in your navigation menu.
See also[edit | edit source]
- Navigation Menu Demo
- GitHub-Repository hamburger_menu_app
- ZIP-file for this learning resource
- Graphical User Interface
- List of Icons for Navigation Menus
- Icons4Menu
- AppLSAC/Types
References[edit | edit source]
- ↑ GitHub Repository hamburger_menu_app (2019) E. Niehaus - created for this AppLSAC learning resource - Demo URL: https://niebert.github.io/hamburger_menu_app - ZIP - accessed 2019/08/14
- ↑ GitHub Repository JSONEditor4Menu (2019) E. Niehaus - created for this AppLSAC learning resource - Demo URL: https://niebert.github.io/hamburger-menu-creator - ZIP - accessed 2019/08/16
- ↑ GitHub Repository hamburger_menu_app (2019) E. Niehaus - created for this AppLSAC learning resource - Demo URL: https://niebert.github.io/icons4menu - ZIP - accessed 2019/09/15