Skip to content

Commit

Permalink
Updated readme
Browse files Browse the repository at this point in the history
  • Loading branch information
midstar committed Nov 27, 2021
1 parent 987b274 commit 82c6475
Showing 1 changed file with 34 additions and 1 deletion.
35 changes: 34 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,39 @@ following lines in your HTML code:
<script src="https://cdn.jsdelivr.net/gh/midstar/jdmenubar/jdmenubar.min.js"></script>
```

# Usage

This library consists of the MenuBar object and a css for the design.

The MenuBar object requires the HTML object (typically a DIV element)
and an array of so called menuItem's. The menuItem's represents each
element in the menu and its properties.

Each menuItem object may have following properties:

| Property name | Mandatory | Description |
|---------------|-----------|-----------------------------------------------------------------------------------------------------|
| text | Yes | The "title" of the menuItem. |
| id | No | Identity of item. Only needed if getItemWithId() method will be used for update. |
| handler | No | Function (callback) to execute when menuItem is selected. |
| subMenuItems | No | An array of menuItem's for a sub menu. Cannot be combined with handler property. |
| icon | No | Left side symbol. Can be text symbol or IMG element. Not allowed for first level of menuItem's. |
| shortcut | No | Right side text describing the short cut for this action. Not allowed for first level of menuItem's |

A special type of menuItem is the separator which can only be used in a
sub menu and not in the "top menu". The separator shall only have one
property, separator, which shall be to true.

The list of menuItems might be updated after the menu bar has been
generated, but to make the changes have effect the update() method
in the MenuBar object needs to be called.

To simplify update of individual menuItems each menuItem can be
given an identity (with the id property) and be fetched and updated
with the getItemWithId() method.

# How to customize the look-and-feel

Checkout example_customized.html
The jdmenubar.css style sheet includes a number of variables to
customize colors and sizes. See the customized example
[source](https://github.com/midstar/jdmenubar/blob/main/example_customized.html).

0 comments on commit 82c6475

Please sign in to comment.