WebApps with LocalStorage and AppCache/Navigation Menu
Jump to navigation
Jump to search
![](//upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Menu_desktop.png/220px-Menu_desktop.png)
Desktop View of Hamburger Menu
![](//upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Menu_mobile.png/220px-Menu_mobile.png)
Mobile View of Hamburger Menu with opened navigation menu
![](//upload.wikimedia.org/wikipedia/commons/thumb/4/40/Menu_mobile_home.png/220px-Menu_mobile_home.png)
Mobile View of Hamburger Menu with closed navigation menu and visible page "Home"
![](//upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Folder_open_alt_font_awesome.svg/220px-Folder_open_alt_font_awesome.svg.png)
Load Icon from Wiki Commons
![](http://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Menu_desktop.png/220px-Menu_desktop.png)
![](http://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Menu_mobile.png/220px-Menu_mobile.png)
![](http://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Menu_mobile_home.png/220px-Menu_mobile_home.png)
![](http://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Folder_open_alt_font_awesome.svg/220px-Folder_open_alt_font_awesome.svg.png)
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