WebApps with LocalStorage and AppCache/Navigation Menu
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
editExplore Structure of Navigation Menu
editA 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.
Create your first Navigation Menu
edit- Use the JSONEditor4Menu[2] to create you own menu.
Using Icons for AppLSACs
edit- Explore the integration of Icons[3] in your navigation menu.
See also
editReferences
edit- ↑ 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