PopUpMenuWorksLinks to documentation:
Popup Menus Syntax
FAQ / Help
Code Generator
New Features List
Multi Drop Assembly File. http://www.connecticutwebsite.com/developers/ Make sure you've got all the js files and reference pop_style.css in the default.htm template:
This is the main jist of it in one place to facilitate the next conversion job.
Descriptions: (at the site, see Popup Menus Syntax for additional elaboration on the below controls)
ItemStyle() var ItemStyleName = new ItemStyle( Length, Spacing, 'Popout Indicator', Indicator Position, Padding, 'Out Background', 'Over Background', 'Out Font Class', 'Over Font Class', 'Out Border Class', 'Over Border Class', Out Opacity, Over Opacity, 'Link Cursor', 'Default Cursor');
startMenu() startMenu( 'Menuname', Orientation, Left Offset, Top Offset, Menu Breadth, Default ItemStyle, 'Parent Frame', Show onclick);
addItem() addItem( 'Item HTML', 'URL / Menuname / Command', 'Item Type', Custom ItemStyle, Length, Spacing.....);
'horizontal Bar' style: menu items that use this ItemStyle are 40px wide, have 10px gaps between them, no popout indicator (the ">" in some menus) or popout indicator position, 0px padding of the text within items, #336699 background colour, a hover colour of #6699CC, 'highText' is the stylesheet class used for the menu text both normally and when highlighted, no border styles, 'null' means fully opaque items (set them to numbers between 0 and 100 to enable semitranslucency), and the 'hand'/'default' cursors are used for linked/submenu items.
var hBar = new ItemStyle(0, 1, '', 0, 0, '#333366', '#666699', 'highText', 'highText', '', '', null, null, 'hand', 'default');
The 'sub Menu' items: these have popout indicators of "Greater Than" signs ">" 15px from their right edge, and CSS borders. Text class also changes on mouseover.
var subM = new ItemStyle(20, 0, '', -15, 3, '#333366', '#666699', 'lowText', 'highText', 'itemBorder', 'itemBorder', null, null, 'hand', 'default');
'subBlank' is similar, but has an 'off' border the same colour as its background so it appears borderless when dim, and 1px spacing between items to show the hover border.
var subBlank = new ItemStyle(22, 1, '>', -15, 3, '#CCCCDD', '#6699CC', 'lowText', 'highText', 'itemBorderBlank', 'itemBorder', null, null, 'hand', 'default');
The purplish 'button' style also has 1px spacing to show up the fancy border, and it has different colours/text and less padding. They also have translucency set -- these items are 80% opaque when dim and 95% when highlighted. It uses the 'crosshair' cursor for items.
var button = new ItemStyle(22, 1, '>', -15, 2, '10#006633', '10#CC6600', 'buttonText', 'buttonHover', 'buttonBorder', 'buttonBorderOver', 80, 95, 'crosshair', 'default');
The usual syntax is left/right then top/bottom then height, width is controlled further in (89).
There is also a "home" button, which is presently set to 0 width.
In menu.xsl is where to go to effect placement of the home page links:
startMenu('root', false, 190, 90, 20, hBar, '', false);
addItem('Home', '', 'sm:', null, 0).onclick='top.location.href=""';
addItem('', '', 'sm:', null, 89).onclick='top.location.href=""';
Sets the relative offset of the first drop-box in subsubmenu.xsl:
startMenu('', true, 10, 21, 100, subM, '', false);
addItem('', '', 'sm:', null, 20).onclick='top.location.href=""';
Sets the relative offset of the 2nd drop-box in subsubmenu.xsl:
StartMenu('', true, 101, 7, 100, subM, '', false);
addItem('', '', 'sm:', null, 20).onclick='top.location.href=""';
** Also advanced features such as Positioning: **
Centre the menu by setting its "Left" position as half the window width minus half the menu width, so it straddles the page centreline:
Scroll the menu with the page by setting its "Top" position to the window scroll position:
Position the menu relative to an anchor in the page, positioned 20px below it.
The script will attempt to reposition menus the fall outside the visible window/frame area. It will only do this to menus that are positioned relative to their parent menus, so if you wish to disable this behaviour, simply specify your menu position as a string 'in quotes'.
In the pop_extras.js there is a menu extension that can scroll menus larger than the current window size, you can add it to your menu if you want that behaviour.
|
| |
|
