Dynamic menu


Adjustment of the dynamic menu (configured by the administrator of the site through the browser).

General description


dynamically generated menu of arbitrary depth can be integrated in the site design. It is edited by the administrator through the browser in a special “Menu editor” module.


You can see current state of the main menu tree
(in XML-format) following the address
http://name of_your_site/Login/menu.xml
(for example, http://rudemo.fuzzle-cms.ru/Login/menu.xml ).


If you need to place more than one menu (for example, upper and lower), you can do this by binding each of them with one of the branches of the main tree.



Integration of the dynamic menu in the site design


To integrate a menu in the site design, you have to pass the following steps:
Step 1. To load the design-file template (.fla) with symbols of menu items, highlighted upon mouse pointing.
Step 2. To load AS3 XmlMenu class menu collector (horizontal two-level menu).
Step 3. In fla-template in the first frame

 (3 Kb)

hookup the menu and indicate its location

var menu:XmlMenu = new XmlMenu("/Login/menu.xml");
menu.x=50;
menu.y=960;
addChild(menu);

If on the site there are more than one menu, you can connect to the branch of the main tree as follows:
var menu:XmlMenu = new XmlMenu("/Login/menu.xml?rootId=ХХХ");
//ХХХ – node id (is determined by the current state of 
//the main menu tree)

Step 4. To compile fla-design (with that, as-file of the XmlMenu menu collector and fla-file of the design should be in the same folder).


***

In the result, the following menu will be integrated in the site:
 (2 Kb)


Attention! In the Fuzzle 2.0 or below, menu (including displayed subitems) should not intersect with the xmServiceLoader page loader. Otherwise the loader will intercept mouse movements.


Menu design adjustment


  • Change of color and size of menu fonts
    To change menu fonts (color, size, etc.) edit symbols menu_mc (main items) and link_mc (subitems).
 (2 Kb)


  • Change of background and menu item indents
    Indents between menu elements are determined automatically, according to the sizes of symbols menu_mc and link_mc. If needed, you can enlarge the indents by extending the sizes of appropriate symbols, adding a rectangle with background in them. In the template such rectangle (symbol bg) have main items, but not subitems.


  • Popup menu creation
    To create a popup menu you are enough to add in the menu code the second parameter equal to true
    var menu:XmlMenu = new XmlMenu("/Login/menu.xml", true);


  • Menu of other configuration (vertical, linear)
    If you need to create a dynamic menu of other configuration, you have to rewrite AS3 class of the menu collector.

 

For designer