Getting Started
- Step 1
- Step 2
- Step 3
Configuration
- LiveMenu parameters
- LiveMenu callbacks
About LiveMenu
- Features
- License

Getting started

It is assumed that you have downloaded a zip-archive of LiveMenu source files and extracted them to an approptiate place on your computer or on your hosting provider's disk.

Step 1: Include links to liveMenu.min.js (or liveMenu.js) and base.css in the <head> section of your page and initialize the menu

Your code should look like this:


                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                <html>
                <head>
                    ...
                    <!-- Include liveMenu core -->
                    <script type="text/javascript" src="/path/to/liveMenu.min.js"></script>
                    <script type="text/javascript">
                        //Initialize the menu, 'myMenu' is the id of the UL element, which is considered to be the menu 
                        //layout (see step 2)
                        liveMenu.initOnLoad('myMenu');
                    </script>
                    <!--Include the base stylesheet, which is necessary for liveMenu to work properly-->
                    <link rel="stylesheet" type="text/css" href="base.css" />

                    ...
                </head>
                ...
                </html>

Alternatively, instead of using "liveMenu.initOnLoad('myMenu')" you can initialize the menu in your window.onload handler or by using different means provided by different javascript libraries to run javascript code before the document (or window) is loaded. For example:


                <script type="javascript">
                    window.onload = function () {
                        myLiveMenu = new liveMenu.Menu('myMenu');
                    }
                    //Or, for example, if you use jquery library:
                    $(document).ready = function () {
                        myLiveMenu = new liveMenu.Menu('myMenu');
                    }
                </script>

Back to the contents

Step 2: Create menu layout

The menu layout is an ordinary multi-level UL node, where you can create submenus by adding nested UL nodes, however there are some important points:

The UL node of the main menu should have ID attribute set to the value that was set during the menu initialization. See Step1.
The UL node of the main menu should have 2 css classes:
- 'lm-menu' - specifies that it is a main menu
- 'lm-horizontal' or 'lm-vertical' - specifies whether it is horizontal or vertical menu
The UL nodes of the submenus should have 3 css classes:
- 'lm-submenu' - specifies that it is a submenu
- 'lm-horizontal' or 'lm-vertical' - specifies whether it is horizontal or vertical submenu
- 'lm-down', 'lm-right', 'lm-up' or 'lm-left' - specifies the position of the submenu, relative the its opener menu item

For example:


                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                <html>
                    <head>
                        <link rel="stylesheet" type="text/css" href="liveMenu/base.css" />
                        <script type="text/javascript" src="liveMenu/liveMenu.min.js"></script>
                        <script type="text/javascript">
                            liveMenu.initOnLoad('myMenu');
                        </script>
                    </head>
                    <body>
                        <div>
                            <ul id="myMenu" class="lm-horizontal lm-menu">
                                <li><a href="#">Menu item1</a></li>
                                <li><a href="#">Menu item2</a>
                                <ul class="lm-vertical lm-down lm-submenu">
                                    <li><a href="#">Submenu item1</a></li>
                                    <li><a href="#">Submenu item2</a></li>
                                    <li><a href="#">Submenu item3</a></li>
                                </ul>
                                </li>
                                <li><a href="#">Menu item3</a></li>
                            </ul>
                        </div>
                    </body>
                </html>

Back to the contents

Step 3: Customize look and feel of the menu

After creating the layout and initialising the menu, it might look like this:

Now it is up to you to change look and feel of the menu. You can do it in the following ways:

Creating your stylesheet for the menu. Notice that you should do it on top of the basic stylesheet(base.css). So, don't forget to include 'base.css' file on your pages before your stylesheet. Also, you may include 'base.css' right into your .css file using CSS @import rule:
```
                    @import url(base.css);
                    /* Place your style settings here */
                
```
Changing HTML code of the menu
Configuring LiveMenu. The second parameter of the LiveMenu constructor is a place where you can configure the menu by setting different parameters and callback functions. For example, you may set the 'effect' parameter to 'slide':
```
                    liveMenu.initOnLoad('myMenu', { effect: 'slide' });
                
```
For the full list of available parameters and callbacks, see Configuration section.

Back to the contents

Configuration

LiveMenu parameters

Name	Description	Default Value
mainMenuClassName	CSS class name of UL elements, which are considered to be main menus	'lm-menu'
submenuClassName	CSS class name of UL elements, which are considered to be submenus	'lm-submenu'
containerClassName	CSS class name of a submenu container (created dynamically by the script)	'lm-container'
horizontalClassName verticalClassName	CSS class names of horizontal and vertical submenus	'lm-horizontal' 'lm-vertical'
right left up down	CSS class names, which determine position of a submenu	'lm-right' 'lm-left' 'lm-up' 'lm-down'
showDelay	A delay in showing the submenus (in milliseconds)	80
hideDelay	A delay in hiding the submenus (in milliseconds)	400
showOn	An event type at which a submenu should be shown. Can be 'mouseenter' or 'click'	'mouseenter'
effect	An effect that is used when showing or hiding a submenu. Can be 'plain' (no effect), 'slide', 'fade' or 'smooth'	'plain'
mode	Defines the way the submenus are being hidden: simultaneously or consecutively (one by one). Can be 'simultaneous' or 'consecutive'.	'simultaneous'
* The following configuration options make sense only if the 'effect' option is not set to 'plain':
duration	The duration of the opening or closing of a submenu (in milliseconds)	400
maxHidingSubmenus	The maximum number of simultaneously hiding sibling submenus. Makes sense only if the 'consecutive' mode is used, but regardless of the mode, '0' value make the submenus hide without effects.	3
transition	A transition algorithm. Can be 'linear' or 'sinoidal'.	sinoidal

Back to the contents

LiveMenu callbacks

Name	Description
beforeShow	This callback function is triggered before the submenu starts showing
afterShow	This callback function is triggered after the submenu has hidden
beforeHide	This callback is triggered before the submenu starts hiding
afterHide	This callback function is triggered after the submenu has hidden

All the callbacks are triggered in the context of the submenu object. So, the variable 'this' inside the scope of the callbacks is the reference to the submenu object. A common use of these callbacks is to highlight the submenu opener item when it is opened. For example:


                liveMenu.initOnLoad('myMenu', {
                    beforeShow: function () {
                        this.opener.style.background = 'red';
                    },
                    beforeHide: function () {
                        this.opener.style.background = 'white';
                    }
                });

Back to the contents

About LiveMenu

LiveMenu is a free (open source) multilevel drop-down like menu script, which allows you to create dynamic javascript web menus only with basic knowledge of html and css. It is highly-customizable, easy to use and supports a number of effects. For example, using this script you can create horizontal drop-down slide menus, vertical drop-right fade menus, horizontal drop-up smooth menus etc. See Examples to see it in action

Back to the contents

Main features

Cross-browser compatibility including Firefox 2.0+, Internet Explorer 6+, Opera 9+, Safary 3+, Google Chrome 3+, Konqueror 4+ and others.
Highly-customizable - a lot of configurational options, possibility to change look and feel of a menu, etc.
Multiple menus on the same page support
Multi-level menus support without restrictions
Menu orientation flexibility - Both menus and submenus can be vertical or horizontal. Submenus can be opened to the left or right, below or above parent menus
Any HTML code can be used within menu items
Search engine friendly - builds on top of plain unodered list (UL) elements
Supports visual effects: slide, fade, smooth (slide+fade)
Independent and lightweight - It doesn't require any other libraries, nevertheless the size of the main script is only 18 Kb.
Friendly to other scripts and css styles

Back to the contents

LiveMenu license

You may use LiveMenu under the terms of MIT License:

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

Back to the contents

LiveMenu - free DHTML javascript menu

Table of contents

Getting started

Step 1: Include links to liveMenu.min.js (or liveMenu.js) and base.css in the <head> section of your page and initialize the menu

Step 2: Create menu layout

Step 3: Customize look and feel of the menu

Configuration

LiveMenu parameters

LiveMenu callbacks

About LiveMenu

Main features

LiveMenu license