Keyboard Driven Menu System

Note: It's best to open up the Demo Details in a webbrowser and a text editor at the same time and display them side by side.

Current functionality:

- This Keyboard Driven Menu System is designed to be entirely driven by a keyboard

- Some mouse abilities have been added since the original design, though

- The current menu shows which keys are active
- If you have the table of contents is turned on, you can mouse click on one of the headers and it will bring you to that section of the document without activating the Keyboard Driven Menu System
- Menus Choices can be clicked on by a mouse

To turn on and off the table of contents, search for `id="tableOfContents"` in the HTML and read the instructions.

Always Active Keys:

- `Escape` This key goes backwards through the menu
- `F1` Toggles the window to show where you are in the menu
- `Home` Goes to the very top of the page

- If the table of contents is turned on, `Home` brings you to the top of the page where table of contentsi is located
- if the table of contents is not turned on, `Home` brings you to the top of the mage where main menu is located

- `End` Goes to the very end of the page
- `Down Arrow` Scrolls down a line or three
- `Up Arrow` Scrolls up a line or three

# Basic Navigation

## Headers, Links, and Clipboard Entries

Open Link 1 Open Link 2 Clipboard Copy 1 Clipboard Copy 2 No link nor clipboard defined 1 No link nor clipboard defined 2

There are three basic types of menu items which the menu program reacts to:

- Headers
- Links
- Clipboard Entries

These are the basics:

- Headers are defined using the normal HTML headers with header tags like `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`
- Links and clipboards are menu items and are defined with `<menu>` tags
- Each type can either have a shortcut defined or not have a shortcut defined (as shown above); If no shortcut is defined, one will be assigned
- Headers are always automatically placed before links and clipboards when the menu is generated

### Header 1

### Header 2

## Multiple Shortcuts, Placement Of Menus

Link 1 Link 2 Clipboard 1 Clipboard 2 Shortcut with capital letter Shortcut as number

All elements of the menu (sub-menu headers, links, and clipboard entries) are placed just below the header of this section but above text. For instance, the menu definition for Duck Duck Go is written below this paragraph in HTML, but is displayed above this paragraph so that all menu elements are shown together.

Duck Duck Go

A shortcut cannot be defined twice within a single head. If a shortcut is defined twice, then an unused shortcut will be assigned.

By default, the English language version of this program is defaulted to have 62 possible shortcuts in this order:

- Small Alphabetic Letters: abcdefghijklmnopqrstuvwxyz
- Single Digit Numbers: 0123456789
- Large Alphabetic Letters: ABCDEFGHIJKLMNOPQRSTUVWXYZ

You can define which shortcuts are available and what order they will appear in by changing the JavaScript settings at the top of the JavaScript code. The order of the defined shortcuts matter because when shortcuts are automatically assigned, it picks the next available item in the list. By default, it assigns small letters first, single digit numbers next, and large letters last. In the German version, the Umlauts are after the large letters.

Emojis representing the six different variations can also be customized at the top of the JavaScript code.

### Header with Shortcut "r"

### Another Header with Shortcut "r"

## Missing Headers

If you're missing headers (for instance, if you jump from h2 to h6 like this example), the program will automatically make artificial headers, alerting you to the fact that you have missing headers

###### Header 6 is Defined But We're Missing H3, H4, and H5 Headers

List of Colors Ways of Travel

# Advanced Navigation

## Opening a Link in a New Tab vs This Tab

Google Google Google

## Defining Link and Clipboard with One Menu Command

Clipboard and Link 1 Clipboard and Link 2

I don't know why anyone would want to do this, but yes, it is possible to do both at the same time.

## Buried Headers

This program treats a header as a first class citizen. That means no matter how much you try to bury the header under other tags, the program will still put it in the menu. The menu doesn't care about the other tags. In this example, our header is buried in a series of bullet points, yet the program still reacts to the header as if it were placed outside of the bullet points (i.e., if you activate the shortcut by pressing the proper letter on the keyboard, the program will jump to that header).

Obviously, you should avoid doing this, but I provide this example to show you how the program works.

- Blah Blah Normal Text
- Blah Blah More Normal Text

- ### Here's our buried header

- Blah Blah Yet More Normal Text

## Opening Local Files On the Hard Drive

These menu links won't work unless you save this html file on your hard drive and create the appropriate files, but it is possible to open local files via the menu. Examples with the exact syntax are provided for your reference.

RegularTextFile.txt Regular Text File.txt RegularTextFile.txt in Linux Regular Text File.txt in Linux RegularTextFile.txt Regular Text File.txt

# Clipboard Examples (Prompt Examples)

## Sample Prompts

Translation EN-DE Python Programming Langauge

## Lengthy Clipboard Copy Examples

Lengthy Clipboard, One Paragraph Lengthy Clipboard, Three Paragraphs, Windows Version Lengthy Clipboard, Three Paragraphs, Linux Version

As shown in the Section "Properly Using HTML Syntax With The Clipboard", HTML is not paragraph friendly. You have to "code" enter marks with the multi-paragraph clipboards. The encoded forms look something like `&#13;&#10;`

Techanically, Linux uses one byte with a value of 10 (`&#10;`) while Windows uses two bytes with a value of 13 and 10 in that order (`&#13;&#10;`), but it doesn't matter which version you use because both operating systems accept each other's enter marks, although some programs get a little fussy if you use the wrong enter mark or mix the enter marks. (Text editors usually tell you that you're using the wrong one or are using them mixed.)

# Properly Using HTML Syntax With The Clipboard

This section shows how to properly utilize the HTML syntax within the clipboard. Technically, I'm showing you how to use "escape characters" in HTML, if you need to search for the term on the internet.

## Enter Marks Within Paragraphs

Three Paragraphs, Windows Version Three Paragraphs, Linux Version

As shown in the Section "Lengthy Clipboard Copy Examples", HTML is not paragraph friendly. You have to "code" enter marks with the multi-paragraph clipboards. The encoded forms look something like `&#13;&#10;`

Techanically, Linux uses one byte with a value of 10 (`&#10;`) while Windows uses two bytes with a value of 13 and 10 in that order (`&#13;&#10;`), but it doesn't matter which version you use because both operating systems accept each other's enter marks, although some programs get a little fussy if you use the wrong enter mark or mix the enter marks. (Text editors usually tell you that you're using the wrong one or are using them mixed.)

## The Ampersand

J & K J & K

## Less Than and Greater Than Signs

2 + 2 = 4 2 + 2 < 8 2 + 2 < 8 2 + 2 > 3 2 + 2 > 3

## Single Quotes and Double Quotes

They are coming to dinner. They are "coming" to dinner. They're "coming" to dinner. They're coming to dinner. They are coming to dinner. They are "coming" to dinner. They're "coming" to dinner. They're coming to dinner.
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum

Font and Style Test

Everything from here and below is for testing. If you change the styles, you can get a good idea of how it will look by coming here.

# Header 1

## Header 2

### Header 3

#### Header 4

##### Header 5

###### Header 6

Link to Google
Link to Bing

Standard Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Text as code: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`

Notice Test
Error Test