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
[edit | edit source]Explore Structure of Navigation Menu
[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.
Create your first Navigation Menu
[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