Editable Dropdown Menu
The Editable Dropdown Menu allows you to create an easy to use, pure CSS dropdown menu which can have sub menus and sub menu items added by the user, as well as having the text they display edited. There is a default CSS file included. You can modify it to apply your own colors, or even adjust it completely since each element has it’s own class specified.
There are also two hook function you can use so you can do stuff like run an AJAX script to update a database when there are items added or changed.
You can also specify your own items, and declare them editable or not, and those will be static.
There is admitedly a lot of room for growth in this script. In fact, that’s why I’m sharing it now. There are so many ways it can grow that it’ll probably branch off in multiple ways and I’ll probably maintain multiple versions of this as well.
Here are the available functions and their uses:
// Creates the a new menu (UL element), which you need to supply in other calls. // The return value from this you'll add to your document somewhere to display the menu. // @param class (string) - The class name to give the root of the menu. Default: "dropdown" // @param addable (boolean) - Whether an "Add New Sub-Menu" appears or not. Default: false // @return Returns an HTML UL element (the root of the menu). createMenu(class, addable) // Adds a submenu to the specified menu. // @param menu (HTML UL element) - The root menu (created with createMenu). Required. // @param title (string) - The title for the new submenu. Default: "Click to edit...". // @param not_editable (boolean) - If the element is not editable (can't change title). Default: false. // @param not_addable (boolean) - If the element can't have submenu items added. Default: false. addSubMenu(menu, title, not_editable, not_addable) // Adds a submenu item to the last submenu. // @param menu (HTML UL element) - The root menu (created by createMenu). Required. // @param title (string) - The title of the new submenu item. Default: "Click to edit...". // @param not_editable (boolean) - If the title can't be edited. Default: false. addSubItem(menu, title, not_editable) // Called when something is edited. // Doesn't do anything by default. This is a hook for you to add actions to the menu. // You can look at the className of the node to determine if it's a submenu or submenu item. // You shouldn't manually call this. // @param node (HTML LI element) - The element that was changed. // @param text (string) - The text the node was changed to. // @param changed (boolean) - Whether the text was changed or not. doSomethingEdited(node, text, changed) // Called when something was added. // Doesn't do anything by default. This is a hook for you to add actions to the menu. // You can look at the className of the node to determine if it's a submenu or submenu item. // You shouldn't manually call this. // @param node (HTML LI element) - The element that was changed. // @param text (string) - The text the node was changed to. doSomethingAdded(node, text)
There are a few more functions, but you shouldn’t have to use them directly. If you are interested in them, check out the comments in the source file.
The structure of the generated menu is:
<ul class="menuroot">
<li class="submenu">Sub-Menu
<ul>
<li class="subitem">Sub-Menu Item</li>
</ul>
</li>
</ul>
To use the menu you call createMenu(). Then, you add that element to the document whereever you want (using appendChild() on the appropriate element). Then, you can manually call addSubMenu() and addSubItem() as wanted, though they are optional.
And that’s pretty much all there is to know. The source is well commented so you can take a look at it if you are interested in the inner workings. You can also comment and ask for questions or help, or suggest branches or extra features.
Enjoy!
Live Example: Editable Dropdown Menu Example
Source Code: Editable Dropdown Menu Source
Tags: dropdown, editable, javascript, menu, source
