JS Menu Generator 1.3


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.


The HTML file must contain:
<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.


In a HTML file where a menu should be created:

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=...>.



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.


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.


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'.







This manual is generated by JS Menu Generator.

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