Overview

JS Menu Generator is a vanilla javascript that adds a dynamic menu to content of a hosting html file when it is open in web browser.

Only a signle script with no dependency is required.

It can work either online or locally.

It was developed as a simple and quick way to create a documentation file with a context menu that can work equally as a web and a local resource preserving all the power of HTML at the same time.

Tested on Chrome and IE.

Requirements

The HTML file must contain:

Element Description

<div class='header'> Not parsed.

<div class='content'> It is parsed to build the menu.
Every header tag H1, H2,... is considered as the beginning of an item which continues until another header is reached.
Headers with higher numbers become descendants of the latest header with a lower number.

<div class='footer'> Not parsed.

Element	Description
<div class='header'>	Not parsed.
<div class='content'>	It is parsed to build the menu. Every header tag H1, H2,... is considered as the beginning of an item which continues until another header is reached. Headers with higher numbers become descendants of the latest header with a lower number.
<div class='footer'>	Not parsed.

Usage

In a HTML file where a menu should be created:

insert SCRIPT tag with menu_generator.js into the very end of HTML body;
add style menu_generator.css;

To tune the appearance, edit menu_generator.css.

Internal Links

The document can have internal links. It is recommended using <span id=...> instead of <a name=...>.

Example

shiftHeaderAndFooterToContentView

By default header and footer DIV's retain their initial positions. They can be moved to the content view by setting attribute shiftHeaderAndFooterToContentView in the SCRIPT tag or property --shift-header-and-footer-to-content-view in key :root in menu_generator.css to a non-zero.

doNotHideHeaderAndFooter

By default the content view is resized and scrolled in such a way that the header and the footer appear out of the screen. It can be changed by setting attribute doNotHideHeaderAndFooter in the SCRIPT tag or property --do-not-hide-header-and-footer in key :root in menu_generator.css to a non-zero.

Utilities

Find item in menu

When scrolling the content, to select the currently visible item in the menu, click on its header in the content view.

Check internal links

To check a containing html file for broken internal links, open it in browser with anchor '#_checkInternalLinks'.

Files

Project

License

Example

This manual is generated by JS Menu Generator.

Investigate the source code of this very page for further clarifications.