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 thought it would be nice to have on the site something like the main menu of desktop applications. Suddenly, the programming chakra opened for me, and programmer enthusiasm filled my hands to my fingertips. The result of this enthusiasm is the main menu script that I want to introduce you.

    Script Description:


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


    Creating a menu item like this:

    Menu = new menuObject();

    The base element is added like this:

    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 in a variable:

    elem1 = base1.addElem('Текст элемента меню',SomeFunction);
    elem1.element.id = "MenuE1";


    Or a simple hitch:

    base1.addElem('Текст элемента меню',SomeFunction).element.id = "MenuE1";

    The separator is added like this:

    base1.addBreak();

    Naturally, the display can be changed via css.

    An archive with an example, library, and css.
    Usage example.

    I posted the corrected version


    I established 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 little bit of an airspace. Also added comments to the code. Example there

    Also popular now: