UserDeveloper

Z Menu Maker


Description


Visual menu maker. You can create any menu from a simple drop-down menu to mega menu. All styles, position parameters of your choice. Limitless customization.

Menu Maker Page

Introduction

Menu maker - is an application that helps you create a menu, what you wish. You can do the usual drop down menu. Can make a mega menu with any of your content. Select any layout (top, left, right, bottom). Make sticky menu, fixed menu. Customize everything - styles, elements, content with convenient drag & drop editor.

Requirements

Requires only Web Server, as application uses ajax requests. Everything else is already on and ready to work.

Getting Started

Start your Web server and open index.html... that's all

Start Page

Start Page

The main part of ​​the screen takes a block with the menu. You can change the background color of the block on the dark, click on the circle in the lower left corner.

Control Buttons

Control Buttons
At the top of the program.

When you press the Save button, menu saved to a zip. It includes a html file, file styles, font-awesome, jquery, project file.

You can load previously saved menu by pressing the Load. The zip file is a file with the menu project.json, it contains all the user settings.

Button Skin - open popup list with predefined skins.

Button Structure - this drop-down list with predefined menu structures.

Button Help open the documentation you are now reading.

Button Settings open popup with app settings (Enable hints, enable dark skin)

Style Settings

Style Settings Block with style settings allows you to configure all components of menu styles.

The list of default components:
1. General
2. Menu
3. Menu Item
4. Sub
5. Sub Item
6. Content
7. Icons
8. Effects
9. Search

The list of possible parameters in components:
1. Typography:
  - font-family
  - font-size
  - text-decoration
  - font-weight: bold
  - font-style: italic
2. Colors:
  - color
  - background-color
3. Indents:
  - margin
  - padding
4. Radius: border-radius
5. Box Shadow: unlimited box-shadows
6. Text Shadow: unlimited text-shadows
7. Custom:
  - number
  - number with unit
  - select
  - radio
  - checkbox

Change Skin

To change the skin, press button Skins Button on the top menu. In opened popup select skin.
Skins Popup

Edit Menu

Select Item

You can select an item by simply clicking on it. When an item is selected, you will notice around the dotted line and round buttons for control.
Selected Item

Edit Item

Edit Item To open the edit window, you need to click on the round button below selection Edit Item, or on selection.
Item parameters:
1. Active - makes the element active. Styles for this element are set in the right box in the tab Menu Item or Sub Item
2. Right - makes the element aligned to the right side of the menu
3. Text - text inside element
4. Link - set href value on element
5. Icon - opens a popup window and allows you to choose font-awesome icon
6. Caret - opens a popup window and allows you to choose font-awesome caret

Edit Image Element

Edit Image Element To open the edit window, you need to click on the round button below selection Edit Element, or on selection.
Image parameters:
1. Active - makes the element active. Styles for this element are set in the right box in the tab Menu Item or Sub Item
2. Right - makes the element aligned to the right side of the menu
3. Link - set href value on element
4. Src - image src
5. Title - image title
6. Alt - image alt

Edit Search Bar

Edit Search Bar To open the edit window, you need to click on the round button below selection Редактирование элемента, or on selection.
Search bar parameters:
1. Right - makes the element aligned to the right side of the menu
2. Icon - opens a popup window and allows you to choose font-awesome icon

Edit Submenu

To set up a submenu, you need to select one of the elements of the desired sub-menu and click on the circular icon at the bottom of selection Edit Submenu.
Edit Submenu

Submenu parameters:
1. Right Align - the sub-menu to the right edge of the parent (default left)
2. Left Side - submenu is opened to the left side of the parent sub (default right)
3. Full Width - submenu is set to the full width of the parent
4. Width - fixed width in pixels of submenu

Move Item

Moving elements are drag & drop. You just need to hold down the left mouse button on the element and pull.
1) Move Item
2) Move Item
3) Move Item

Add Item

Add Item You need to select an item, next to which you want to add new item and click on the New button, which is located in the lower right corner of the selection Add Item. Then a popup menu appears.

Options to add an element:
1. Item - adding item next to the selected
2. Image - adding a menu item with image
3. Search - adding search bar
4. Sub Menu - adding submenu
5. Sub Content - adding content submenu

After adding the item open the edit window so that you can immediately enter their parameters.

Remove Item

To delete a selected item, press the button, which is located in the upper right corner of the selection Remove Item
Then you need to confirm your action in a popup window
Confirmation Window

Add Icon

Add Icon

For each menu item you can add an icon from the set font-awesome. Simply select from the list and click OK. Also you can search by name icons.

Edit Content

Select Row

To select row you can simply click on it.Selection row looks like the selection of the menu item.
Select Row

Edit Row

To open the edit window, you need to click on the round button below selection Edit Row, or on selection.

Edit Row
In the picture you can see 3 columns, each about the size of 4 cells. The maximum total size of the columns in a row - 12.

Edit Column

To open the edit window, just click on the column.
Edit Column

Add Column

When there is space in a row, on the right there is a button to add.
Add Column

After clicking on it opens a window for selecting the element to add. A total of 3 items of your choice:
1. HTML - write any content in a convenient WYSIWYG editor
2. Image - insert an image that will completely fill your column
3. Video/Maps - insert YouTube, Vimeo, Google Maps, etc...
Add Column

WYSIWYG editor example:
Add Column

Move Column

Moving columns carried drag & drop. You just need to hold down the left mouse button on the column and pull.
1) Move Column

2) Move Column

3) Move Column

Remove Column

When you over to a column there is a red round icon in the upper right corner Удаление колонки. By clicking on it, you can delete the column.

Edit Sub Content

Editing sub content is carried out as well as editing the submenu.

Move Row

Moving row is carried out as well as the movement of menu item.

Add Row

Adding row is also carried out as adding a menu item.

Remove Row

Deleting a row is carried out as well as the addition of a menu item.

The list of default components

Below is a complete list of components styles menu.

General

Name Option Value Description
Typography
Family Select The name of the font that will be used in all menus
Size Number + Unit Default font size menu
Italic Checkbox[true] Make all of the text in the menu italic
Bold Checkbox[true] Make all of the text on the menu in bold
Main
Width Radio[Auto, 100%] Stretch the entire width of the menu, or install an automatic width detection
Position Checkbox[fixed] Fixed menu position
Layout Select Menu layout - left, top, right, bottom
Color Color Default color of the menu text
Sub Width Number + Unit Default width of the submenu
Transitions
Duration Number Time of all transitions in the menu in ms

Responsive

Name Option Value Description
Main
Type Select Type of view menu on mobile devices
Start Size Number + Unit The width of the screen in which the activated mobile view menu
Left Indent Number + Unit Left offset in a submenu in a mobile view

Menu

Name Option Value Description
Colors
Background Color The background color of the menu
Indents
Margin Number + Unit Menu margin
Padding Number + Unit Menu padding
Radius
Radius Number + Unit Menu border radius
Box Shadow
Unit Unit Offset X, Y units
Inset Checkbox[true] Shadow inset
X Number X offset
Y Number Y offset
Blur Number Blur
Spread Number Spread
Color Color Color

Menu Item

Name Option Value Description
Main
Height Number + Unit Menu items height
Interval Number + Unit Spacing between items
Typography
Size Number + Unit Font size of menu items
Decoration Checkbox Text decoration in menu items
Italic Checkbox[true] Italic text in the menu items
Bold Checkbox[true] Bold text in the menu items
[hover] Size Number + Unit Font size of menu items on mouse over
[hover] Decoration Checkbox Text decoration in menu items on mouse over
[hover] Italic Checkbox[true] Italic text in the menu items on mouse over
[hover] Bold Checkbox[true] Bold text in the menu items on mouse over
[active] Size Number + Unit Font size of active menu items
[active] Decoration Checkbox Text decoration in active menu items
[active] Italic Checkbox[true] Italic text in active menu items
[active] Bold Checkbox[true] Bold text in active menu items
Colors
Font Color Menu items font color
Background Color Menu items background color
[hover] Font Color Menu items font color on mouse over
[hover] Background Color Menu items background color on mouse over
[active] Font Color Active menu items font color
[active] Background Color Active menu items background color
Box Shadow
Box Shadow Menu items box shadow
[hover] Box Shadow Menu items box shadow on mouse over
[active] Box Shadow Active menu items box shadow
Text Shadow
Text Shadow Menu items text shadow
[hover] Text Shadow Menu items text shadow on mouse over
[active] Text Shadow Active menu items text shadow
Indents
Padding Number + Unit Menu items padding
Icon Indents
Margin Number + Unit Menu items icon margin
Caret Indents
Margin Number + Unit Menu items caret margin
Radius
Radius Number + Unit Menu items border radius
[hover] Radius Number + Unit Menu items border radius on mouse over
[active] Radius Number + Unit Active menu items border radius

Sub

Name Option Value Description
Offset
Offset Size Number + Unit Submenu offset size
Arrow Size Number + Unit Submenu arrow size
Arrow Offset Number + Unit Submenu arrow offset
Arrow Color Color Submenu arrow color
Colors
Background Color Submenu background color
[hover] Background Color Submenu background color on mouse over
Box Shadow
Box Shadow Box Shadow Submenu box shadow
[hover] Box Shadow Box Shadow Submenu box shadow on mouse over
Indents
Padding Number + Unit Submenu padding
Radius
Radius Number + Unit Submenu border radius
[hover] Radius Number + Unit Submenu border radius on mouse over

Sub Item

Name Option Value Description
Main
Height Number + Unit Submenu items height
Interval Number + Unit Spacing between submenu items
Icon Size Number + Unit Submenu items icons font size
Typography
Size Number + Unit Submenu items font size
Decoration Checkbox Submenu items text decoration
Italic Checkbox[true] Submenu items italic style
Bold Checkbox[true] Submenu items font bold weight
[hover] Size Number + Unit Submenu items font size on mouse over
[hover] Decoration Checkbox Submenu items text decoration on mouse over
[hover] Italic Checkbox[true] Submenu items italic style on mouse over
[hover] Bold Checkbox[true] Submenu items font bold weight on mouse over
[active] Size Number + Unit Submenu active items font size
[active] Decoration Checkbox Submenu active items text decoration
[active] Italic Checkbox[true] Submenu active items italic style
[active] Bold Checkbox[true] Submenu active items font bold weight
Colors
Font Color Submenu items font color
Background Color Submenu items background color
[hover] Font Color Submenu items font color on mouse over
[hover] Background Color Submenu items background color on mouse over
[active] Font Color Submenu active items font color
[active] Background Color Submenu active items background color
Box Shadow
Box Shadow Box Shadow Submenu items box shadow
[hover] Box Shadow Box Shadow Submenu items box shadow on mouse over
[active] Box Shadow Box Shadow Submenu active items box shadow
Text Shadow
Text Shadow Text Shadow Submenu items text shadow
[hover] Text Shadow Text Shadow Submenu items text shadow on mouse over
[active] Text Shadow Text Shadow Submenu active items text shadow
Indents
Padding Number + Unit Submenu items padding
Radius
Radius Number + Unit Submenu items border radius
[hover] Radius Number + Unit Submenu items border radius on mouse over
[active] Radius Number + Unit Submenu active items border radius

Content

Name Option Value Description
Video/Maps
Aspect Ratio Select Video or maps aspect ratio (16:9, 16:10, 4:3) for responsive
Grid
Padding Number + Unit Columns padding
Styled Grid
Color Color Styled columns font color
Background Color Styled columns background color
Radius Number + Unit Styled columns border radius
Margin Number + Unit Styled columns margin
Padding Number + Unit Styled columns padding

Icons

Name Option Value Description
Icons
Position Checkbox[true] Icons in main menu over item text
Size Number + Unit Icons in main menu font size
Offset Left Number + Unit Icons in main menu left offset
Offset Right Number + Unit Icons in main menu right offset
Offset Top Number + Unit Icons in main menu top offset
Offset Bot Number + Unit Icons in main menu bottom offset
Carets
Size Number + Unit Carets in main menu font size
Offset Left Number + Unit Carets in main menu left offset
Offset Right Number + Unit Carets in main menu right offset
Sub Icons
Size Number + Unit Icons in sub menu font size
Offset Left Number + Unit Icons in sub menu left offset
Offset Right Number + Unit Icons in sub menu right offset
Sub Carets
Size Number + Unit Carets in sub menu font size
Offset Left Number + Unit Carets in sub menu left offset
Offset Right Number + Unit Carets in sub menu right offset

Effects

Name Option Value Description
Main
Show Select Show menu effect
Show Duration Number + Unit Show menu duration
Hide Select Hide menu effect
Hide Duration Number + Unit Hide menu duration

Search

Name Option Value Description
Main
Full Width Checkbox[true] Drop down serach bar on full menu width
Width Number + Unit Search bar width. Apply when Full Width option disabled
Height Number + Unit Search bar height
Left Offset Number + Unit Search bar left offset
Button
Color Color Search button font color
Background Color Color Search button background color
Input
Color Color Search input font color
Background Color Color Search input background color

App Settings

To open App Settings, press button App Settings Button located in the top right corner of the app.
App Settings Button
You can hide Hints and change app skin to black.

Save / load

To save a menu, simply press the button Save Button, then a pop-up window with the configuration of certain parameters:
Save Popup

Parameters:
1. Postfix - unique postfix for the class of your menu. For example, if you specify a postfix of "-1", your menu will have a class "zetta-menu-1". This will allow you to use multiple menus in the same page.
2. Sticky - makes your menu sticky when you scroll the page
3. Show On - show sub menu methods (hover, click, toggle)

After you click OK, the browser prompts you to save the file ZettaMenu.zip.
The structure of zip:

ZettaMenu.zip/
├── assets/
│   ├── css/
│   │   ├── font-awesome.min
│   │   └── zetta.menu.css
│   │
│   ├── fonts/
│   │   ├── fontawesome-webfont.eot
│   │   ├── fontawesome-webfont.svg
│   │   ├── fontawesome-webfont.ttf
│   │   └── fontawesome-webfont.woff
│   │
│   └── js/
│       ├── jquery.min.js
│       └── zetta.menu.jquery.js
│
├── index.html
└── zm-project.json

Note the file zm-project.json. It contains all the settings saved menu. You can load it in the program, press the button Load Button, or drag the file to the program window.

Z Menu Maker


Description


Visual menu maker. You can create any menu from a simple drop-down menu to mega menu. All styles, position parameters of your choice. Limitless customization.

Menu Maker Page

Files Structure

app/
├── contents/
├── skins/
├── structures/
├── styles/
│
├── params.json
├── skeleton.html
└── zetta.menu.jquery.js

Styles

You can add your own modules to style menu. Module is specified in app/params.json:
"styles": [
  "general",
  "menu",
  ...,
  "mystyles"
]
Then you need to create a folder app/styles/mystyles/. Contents of the folder should be as follows:
1. params.json - module parameters
2. style.less - styles
3. [optional] responsive.less - responsive styles

Params

Structure of app/styles/mystyles/params.json:
{
  "name": "stylesName",
  "ext": "#2BB1F0",
  "responsive": true,
  "list": {
  ...
  }
}
1. name - module name
2. ext - color of ext postfix
3. responsive - optional. If responsive = true, folder must contain responsive.less
4. list - contain all module options (color, font, indents,... etc)

List structure

"list": {
  "Name": {
    "type": ...,
    "added": true,
    "normal": {
      ...
    },
    "hover": {
      ...
    },
    "active": {
      ...
    },
    "focus": {
      ...
    }
}
1. Name - option name
2. type - option type
3. [optional] added
4. normal - normal state of current option
5. [optional] hover - hover state of current option
6. [optional] active - active state of current option
7. [optional] focus - focus state of current option

Option types

Predefined types:
Name Example Screenshot
colors params.json:
"Name": {
  "type": "colors",
  "normal": {
    "font": "lessFont",
    "background": "lessBackground"
  }
}
style.less / responsive.less:
.set(color, @lessFont);
.set(background, @lessBackground);
colors
typography params.json:
"Name": {
  "type": "typography",
  "normal": {
    "size": "lessFontSize",
    "decoration": "lessTextDecoration",
    "italic": "lessStyleItalic",
    "bold": "lessWeightBold"
  }
}
style.less / responsive.less:
.set(font-size, @lessFontSize);
.set(text-decoration, @lessTextDecoration);
.set(italic, @lessStyleItalic);
.set(bold, @lessWeightBold);
typography
indents params.json:
"Name": {
  "type": "indents",
  "normal": {
    "padding": "lessPadding",
    "margin": "lessMargin"
  }
}
style.less / responsive.less:
.set(padding, @lessPadding);
.set(margin, @lessMargin);
indents
radius params.json:
"Name": {
  "type": "radius",
  "normal": "lessRadius"
}
style.less / responsive.less:
.set(border-radius, @lessRadius);
radius
box-shadow params.json:
"Name": {
  "type": "box-shadow",
  "normal": "lessBoxShadow"
}
style.less / responsive.less:
.set(box-shadow, @lessBoxShadow);
box shadow
text-shadow params.json:
"Name": {
  "type": "text-shadow",
  "normal": "lessTextShadow"
}
style.less / responsive.less:
.set(text-shadow, @lessTextShadow);
text shadow
Custom types:
Name Example Screenshot
number params.json:
"Name": {
  "type": "custom",
  "normal": {
    "Label": {
      "type": "number",
      "less": "lessNumber",
      "hint": "Hint Text",
      "min": 0,
      "max": 100
    }
  }
}
custom number
number-unit params.json:
"Name": {
  "type": "custom",
  "normal": {
    "Label": {
      "type": "number-unit",
      "less": "lessNumberUnit",
      "hint": "Hint Text",
      "min": 0,
      "max": 100
    }
  }
}
custom number unit
color params.json:
"Name": {
  "type": "custom",
  "normal": {
    "Label": {
      "type": "color",
      "less": "lessColor",
      "hint": "Hint Text"
    }
  }
}
custom color
select params.json:
"Name": {
  "type": "custom",
  "normal": {
    "Label": {
      "type": "select",
      "less": "lessSelect",
      "hint": "Hint Text",
      "options": {
        "option 1": "option 1 value",
        "option 2": "option 2 value"
      }
    }
  }
}
custom select
radio params.json:
"Name": {
  "type": "custom",
  "normal": {
    "Label": {
      "type": "radio",
      "less": "lessRadio",
      "hint": "Hint Text",
      "options": {
        "radio 1": "radio 1 value",
        "radio 2": "radio 2 value"
      }
    }
  }
}
custom radio
checkbox params.json:
"Name": {
  "type": "custom",
  "normal": {
    "Label": {
      "type": "checkbox",
      "less": "lessCheckbox",
      "hint": "Hint Text",
      "options": {
        "check 1": "check 1 value",
        "check 2": "check 2 value"
      }
    }
  }
}
custom checkbox

Reserved less variables

Variable Description
@menu Menu class name
@menuWrap Menu wrapper class name
@mode Values - [edit, save]
@fixed GENERAL - fixed menu
@layout GENERAL - menu layout [top, left, right, bottom]
@subWidth GENERAL - default sub width
@generalTypographyFamily GENERAL font family
@generalTypographySize GENERAL font size
@generalTypographyItalic GENERAL style italic
@generalTypographyBold GENERAL font weight bold
@generalWidth GENERAL menu width
@generalColor GENERAL - font color
@transitionsDuration GENERAL - all menu transitions duration
@responsive RESPONSIVE - responsive type
@responsiveStart RESPONSIVE - responsive break point
@responsiveIndent RESPONSIVE - responsive sub menus indents
@menuBgColor MENU - background color
@menuPadding MENU - padding
@menuMargin MENU - margin
@menuRadius MENU - radius
@menuBoxShadow MENU - box shadow
@menuHoverBoxShadow MENU - hover box shadow
@menuItemHeight MENU ITEM - height
@menuItemInterval MENU ITEM - interval
@menuItemTypographySize MENU ITEM - font size
@menuItemTypographyDecoration MENU ITEM - text decoration
@menuItemTypographyItalic MENU ITEM - font style italic
@menuItemTypographyBold MENU ITEM - font weight bold
@menuItemHoverTypographySize MENU ITEM - hover font size
@menuItemHoverTypographyDecoration MENU ITEM - hover text decoration
@menuItemHoverTypographyItalic MENU ITEM - hover font style italic
@menuItemHoverTypographyBold MENU ITEM - hover font weight bold
@menuItemActiveTypographySize MENU ITEM - active font size
@menuItemActiveTypographyDecoration MENU ITEM - active text decoration
@menuItemActiveTypographyItalic MENU ITEM - active font style italic
@menuItemActiveTypographyBold MENU ITEM - active font weight bold
@menuItemFontColor MENU ITEM - font color
@menuItemBgColor MENU ITEM - background color
@menuItemHoverFontColor MENU ITEM - hover font color
@menuItemHoverBgColor MENU ITEM - hover background color
@menuItemActiveFontColor MENU ITEM - active font color
@menuItemActiveBgColor MENU ITEM - active background color
@menuItemBoxShadow MENU ITEM - box shadow
@menuItemHoverBoxShadow MENU ITEM - hover box shadow
@menuItemActiveBoxShadow MENU ITEM - active box shadow
@menuItemTextShadow MENU ITEM - text shadow
@menuItemHoverTextShadow MENU ITEM - hover text shadow
@menuItemActiveTextShadow MENU ITEM - active text shadow
@menuItemPadding MENU ITEM - padding
@menuItemIconMargin MENU ITEM - icon margin
@menuItemCaretMargin MENU ITEM - caret margin
@menuItemRadius MENU ITEM - radius
@menuItemHoverRadius MENU ITEM - hover radius
@menuItemActiveRadius MENU ITEM - active radius
@subOffset SUB - offset
@subArrowSize SUB - arrow size
@subArrowOffset SUB - arrow offset
@subArrowColor SUB - arrow color
@subBgColor SUB - background color
@subHoverBgColor SUB - hover background color
@subBoxShadow SUB - box shadow
@subHoverBoxShadow SUB - hover box shadow
@subPadding SUB - padding
@subRadius SUB - radius
@subHoverRadius SUB - hover radius
@subItemHeight SUB ITEM - height
@subItemInterval SUB ITEM - interval
@subItemIconSize SUB ITEM - icon size
@subItemTypographySize SUB ITEM - font size
@subItemTypographyDecoration SUB ITEM - text decoration
@subItemTypographyItalic SUB ITEM - font style italic
@subItemTypographyBold SUB ITEM - font weight bold
@subItemHoverTypographySize SUB ITEM - hover font size
@subItemHoverTypographyDecoration SUB ITEM - hover text decoration
@subItemHoverTypographyItalic SUB ITEM - hover font style italic
@subItemHoverTypographyBold SUB ITEM - hover font weight bold
@subItemActiveTypographySize SUB ITEM - active font size
@subItemActiveTypographyDecoration SUB ITEM - active text decoration
@subItemActiveTypographyItalic SUB ITEM - active font style italic
@subItemActiveTypographyBold SUB ITEM - active font weight bold
@subItemFontColor SUB ITEM - font color
@subItemBgColor SUB ITEM - background color
@subItemHoverFontColor SUB ITEM - hover font color
@subItemHoverBgColor SUB ITEM - hover background color
@subItemActiveFontColor SUB ITEM - active font color
@subItemActiveBgColor SUB ITEM - active background color
@subItemBoxShadow SUB ITEM - box shadow
@subItemHoverBoxShadow SUB ITEM - hover box shadow
@subItemActiveBoxShadow SUB ITEM - active box shadow
@subItemTextShadow SUB ITEM - text shadow
@subItemHoverTextShadow SUB ITEM - hover text shadow
@subItemActiveTextShadow SUB ITEM - active text shadow
@subItemPadding SUB ITEM - padding
@subItemRadius SUB ITEM - radius
@subItemHoverRadius SUB ITEM - hover radius
@subItemActiveRadius SUB ITEM - active radius
@videoAspectRatio CONTENT - video aspect ratio [16:9, 16:10, 4:3]
@gridColumnPadding CONTENT - grid column padding
@gridColumnMargin CONTENT - grid column margin
@gridStyledColor CONTENT - grid styled color
@gridStyledBgColor CONTENT - grid styled background color
@gridStyledRadius CONTENT - grid styled radius
@gridStyledMargin CONTENT - grid styled margin
@gridStyledPadding CONTENT - grid styled padding
@iconPositionTop ICONS - icon position top
@iconFontSize ICONS - icon font size
@iconOffsetLeft ICONS - icon offset left
@iconOffsetRight ICONS - icon offset right
@iconOffsetTop ICONS - icon offset top
@iconOffsetBottom ICONS - icon offset bottom
@caretFontSize ICONS - caret font size
@caretOffsetLeft ICONS - caret offset left
@caretOffsetRight ICONS - caret offset right
@subIconFontSize ICONS - sub icon font size
@subIconOffsetLeft ICONS - sub icon offset left
@subIconOffsetRight ICONS - sub icon offset right
@subCaretFontSize ICONS - sub caret font size
@subCaretOffsetLeft ICONS - sub caret offset left
@subCaretOffsetRight ICONS - sub caret offset right
@effectType EFFECTS - show type
@effectDuration EFFECTS - show duration
@effectHideType EFFECTS - hide type
@effectHideDuration EFFECTS - hide duration
@searchFullWidth SEARCH - bar full width
@searchWidth SEARCH - bar width search
@searchHeight SEARCH - bar height search
@searchLeftOffset SEARCH - bar left offset
@searchButtonFontColor SEARCH - button font color
@searchButtonBgColor SEARCH - button background color
@searchInputFontColor SEARCH - input font color
@searchInputBgColor SEARCH - input background color

Contents

You can create your own modules for the content. A configuration example of HTML:
{
  "name": "HTML",
  "icon": "fa fa-code",
  "template": "{{html}}",
  "description": "Description HTML",

  "fields": {
    "html": {
      "type": "textarea",
      "label": "Write any html code"
    }
  }
}

name

The name of your module. Can contain any text.

icon

Class name of font-awesome icon (fontawesome.io)

description

Write your module description using HTML.

template

Template result of your module. May be represented as text or as object:
text - can contain any text, html code, as well as references to variables fields. For example:
"template": "My name is {{name}}"
object - contains 2 elements, one of which will be used in the program, the other - after saving. Each element can contain any text, html code, as well as references to variables fields. For example:
"template": {
  "save": "My name is {{name}}",
  "edit": "Edit mode name is {{name}}"
}

fields

Object containing the various fields to configure your module. Each element may comprise the following elements:
1. type - field type. There are 2 types of [input, textarea]
2. label - label for the field
3. hint - field hint (shown on mouse over)
4. template - optional element that contains the template for the item. The text must necessarily contain {{value}}

Your own module

Create file with parameters app/contents/mymodule.json. Open file app/params.json and insert new field "mymodule":
"contents": [
  "html",
  "image",
  "iframe",
  "mymodule"
]

Example

1. Module parameters:
{
  "name": "My Module",
  "icon": "fa fa-cubes",
  "description": "My <b>module</b> description",
  "template": {
    "save": "Result: {{myName}}",
    "edit": "Result[edit mode]: {{myName}}"
  }

  "fields": {
    "myName": {
      "type": "input",
      "label": "Name",
      "hint": "field hint",
      "template": "my name is {{value}}"
    }
  }
}
2. My Module in list of modules
My Module in list

3. My Module edit window
My Module edit window

4. My Module in menu
My Module in menu

Skins

To create a new skin, you need to set the menu in the program and save the result. Then locate the file zm-project.json in the zip archive. From it you need to take the elements less and styles and create your new skin app/skins/myskin.json:
{
  "less": {
    "generalTypographyFamily": "\"Oswald\", sans-serif",
    ...
  },
  "styles": {
    "general": {
      "Typography": true,
      ...
    },
    ...
  }
}
Create skin preview image app/skins/myskin.png with size 100x100.

Open file app/params.json and insert new field "myskin":
"skins": [
  "none",
  "default",
  "myskin"
]

Structures

To create a new structure, you need to set the menu in the program and save the result. Then locate the file zm-project.json in the zip archive. From it you need to take the elements structure and create your new structure app/structures/mystructure.json:
[
  {
    "text": "Simple",
    "href": "#"
  },
  ...
]
Open file app/params.json and insert new field "mystructure":
"structures": [
  "default",
  "simple",
  "media",
  "mystrtucture"
]

Fonts

You can supplement a default list of google fonts, add a new field to a file app/params.json. For example, add a new font Monoton:
"fonts": {
  ...,

  "Monoton": {
    "family": "'Monoton', cursive",
    "import": "http://fonts.googleapis.com/css?family=Monoton"
  }
}