dropdownmenu.js's Introduction

DropDownMenu.js

A javascript library for create drop down menu in your app.

Features

Create Drop Down Menu
Nestable(No Limit)

Screenshot

install

script

<script src="path/to/dist/index.min.js"></script> <script src="https://unpkg.com/html-dropdown-menu/dist/index.min.js"><script>

CSS

<link rel="stylesheet" href="path/to/dist/style.css"> <link rel="stylesheet" href="https://unpkg.com/html-dropdown-menu/dist/dropdown.css">

How To Use

createDropDownMenu(appendTo,content)

appendTo : HTMLElement

The Menu will be appended to the element.

content Array<DropDownMenuList>

[
    DropdownListCategory1,
    DropdownListCategory2,
    DropdownListCategory3,
    ...
]

DropDownMenuList

{
    name:string,
    content: Array<DropDownMenuListLabel>
}

DropDownMenuListlabel

{
    text:string;
    onclick?:Function;
    children?: Array<DropDownMenuListLabel>
}

If the menu label has any children,onclick will be not executed.

Example Menu Content

[
    {
        name: "File",
        content: [
            {
                text: "New Instance",
                onclick:()=>window.open("url")
            },
            {
                text: "Open File",
                onclick:()=>...;
            },
            {
                text: "New Folder",
                onclick:()=>...;
            },
            {
                text: "Recent Opened",
                children: [
                    {
                        text: "path/to/file",
                        onclick:()=>...;
                    }
                ]
            }
        ]
    }
]

Recommend Projects