📜 ⬆️ ⬇️

A small script to create the main menu (analog desktop mainmenu)

Prehistory:


At the moment, I am developing a small service for developing diagrams. Last night I was designing the interface, and I thought that it would be nice to have something on the site like the main menu of desktop applications. Suddenly, the programmer's chakra opened up and my hands filled my programmer enthusiasm to my fingertips. The result of this enthusiasm is the main menu script that I want to present to you.

Script description:


The script is written in pure javascript. A menu item is a li list item wrapped in a tag; any item inside the item can be. Each submenu is a separate unnumbered list. The basic elements (which we see in the unopened state) are tags with the float: left and block display modes set.


The menu item is created like this:

Menu = new menuObject();

The base item is added as follows:

base1 = Menu.addParentMenu(' ');

The menu item is added like this:

base1.addElem(' ',SomeFunction); //SomeFunction onclick .
The dom element itself is stored in the element property.
')
You can set some special properties of an element by saving it into a variable:

elem1 = base1.addElem(' ',SomeFunction);
elem1.element.id = "MenuE1";


Or a simple coupling:

base1.addElem(' ',SomeFunction).element.id = "MenuE1";

The separator is added as follows:

base1.addBreak();

Naturally, the display can be changed via css.

An archive with example, library, and css.
An example of use.

Laid out the corrected version


I adjusted compatibility with ie6, slightly corrected the structure (but the lists are simply stored in the body, this is done for compatibility with ie6), and a bit improved look. Also added comments to the code. Example there

Source: https://habr.com/ru/post/52874/


All Articles