What is This?

The Keyboard Driven Menu System is a small Javascript program which can be inserted into any webpage that you create, and it does the following:

• Automatically creates a menu based on HTML headers
• Easily allows you to add HTML links to the menus
• Each menu item gets a user-defined or automatically generated keyboard shortcut allowing for quick navigation through the menu
• One line "HTML based command" to easily add a table of contents based on HTML headers
• Despite focusing on navigation by keyboard, it also allows the mouse to be used on both the table of contents and menus
• Use the menu system to copy text to the clipboard (to create pre-defined prompts for AI)

To see a 75 second video highlighting most of the features, click here!

Who Should Use It?

The menu system was designed "keyboard first" meaning it's most appropriate for use by power-users, but it's also simple enough to use for those who aren't computer experts.

In short, learning to navigate the menus is very easy, but setting up the menus requires basic knowledge of HTML and CSS. For those who are less knowledgeable about HTML or CSS, the 42 minute video and supplementary files explain in detail how to set up the program to your liking.

Those who are familiar with HTML and CSS will find it very easy to customize. There are settings at the top of the Javascript file, but changing the Javascript file is not necessary. If you wish to make the Javascript changes, it is not difficult and easy to do. The 42 minute video details how to do it.

When Should It Be Used?

Of course you can put it into any HTML webpage, but it's most appropriate for webpages which require easy navigation between headers like notes or documentation. It makes life much easier on a laptop or desktop. As for cell phones, the menus might not fully work (yet?), but it won't interfere with the ability to read the content.

Try It Out!

I've set up three examples for you to try it out -- all of which come right from the videos!

As you utilize the menus, don't forget that you can press Escape to go back up the menus.

• Example 1
• Utilized and shown in the long video, this is an example showing the basic navigation capabilities of the Keyboard Driven Menu System
• The main focus of this example is to show the navigation capabilities of the program
• Star Trek, Star Wars, and Battlestar Galactica are shamelessly made fun of
• Example 2
• Utilized and shown in the long video and similar to Example 1, this is an example showing how the shortcuts can be customized
• The main focus of this example is to show off the customized shortcuts
• Example 3
• Utilized and shown in the long video, this is an example of using the menu system for AI Prompting
• The main focus of this example is to show how text information can be copied to the clipboard after navigating through the menu system
• The examples are mostly non-sensical, but shows how information can be categorized and how the information is copied into the operating system clipboard

Videos!

If you prefer videos, I've made two of them.

The Short Video is 75 seconds and fast paced. It shows most of the capabilities of the program.

The Long Video is a slower-paced 42 minutes, but it goes deep into how the program behaves and how to customize the program. For brave newbies, people familiar with HTML, or bored web programming experts, the video explains how to set up the HTML and CSS. At the end of the video, a few minutes are dedicated to customizing options within the JavaScript. This video is a must for newbies, but can also be informative for experts.

(For those who have seen the long video: Yes, the term "Thagomizer" is a real word.)

Written Explanation

If you prefer to see a written explanation of everything, this is the section for you.

Demo Details (Demo-Details.html) demonstrates not only the features of the program, but describes the ins and outs of how to use the program too. It's best if you open up this file in both your webbrowser and in a text editor at the same time and go through them both side by side.

Demo Details is best utilized either by web programming experts or by those who have seen the long video.

For newbies who are unfamiliar with HTML syntax, I've also written a basic HTML Guide that focuses on the HTML used in Demo Details. Like Demo Details, it is best to open up the HTML Guide in a webbrowser and a text editor at the same time and display them side by side.

Versions to Download

There are four different versions you can download. The code is identical except for Demo-Variables.css which determines the difference between light mode and dark mode. You may also download the two different version with an without the videos:

• Zip File, Dark Mode, With Videos, Approximately 122MB: All HTML files (Demo Details and HTML Explained), CSS files, and the Javascript file is included
• Zip File, Light Mode, With Videos, Approximately 122MB: Same as the dark mode files except for one minor tweak in Demo-Variables.css which enables light mode; How this is done is explained in the long video
• Zip File, Dark Mode, Without Videos, Approximately 30kB: Same as above, but the video files are not included and the video links won't work
• Zip File, Light Mode, Without Videos, Approximately 30kB: Same as above, but the video files are not included and the video links won't work

Note: There is an extra file included named Demo-German.js which is the same as Demo.js except it includes the German umlaut characters as possible characters to use; This is included because it was mentioned in the long video, but Demo-German.js is never actively used in the versions I provide.

Where Can I Find You?

My website is www.jbuisson.com. You should be able to find these files there.