SmartMenus

Weaver Xtreme Plus supports an entirely new menu system – SmartMenus. SmartMenus is a relatively mature JavaScript solution to displaying responsive menus. The main advantages of SmartMenus include:

• Sub-menus will be adjusted to fit within the browser window – no more having submenus disappear off the right side.
• Menus too tall to fit in the browse will get a scroll arrow.
• The transition effects are improved. It is easier to open sub-menus
• The accordion menu (used for Mobile menus and the accordion extra menu) is different. Some people may prefer its linking style vs. the default Weaver Xtreme accordion menus.
• Max-width support for sub-menus – the text will automatically wrap after the max-width.

A full reference to SmartMenus is found at: http://www.smartmenus.org/. Weaver Xtreme Plus includes options, that with with appropriate additional styling, can create amazing custom menus.

One of the advanced customization options available for Smart Menus in Weaver Xtreme Plus is the ability to specify the set of JavaScript options supported by SmartMenus. These options are explained on the SmartMenus Docs page. As an aid, you can copy/paste the following set of default options into one of the SmartMenu JavaScript Initialization boxes on the SmartMenus tab for the Xtreme Plus option page. These are default values used by Weaver Xtreme Plus. Copy/Paste this code fragment exactly as presented here, including the opening and closing {}’s. You may use only the needed subset – e.g., just the mainMenuSubOffsetX, etc.

{
isPopup:            false,  // is this a popup menu or a permanent menu bar
mainMenuSubOffsetX: 0,      // pixels offset from default position
mainMenuSubOffsetY: 0,      // pixels offset from default position
subMenusSubOffsetX: 0,      // pixels offset from default position
subMenusSubOffsetY: 0,      // pixels offset from default position
subMenusMinWidth:   '1em',  // min-width for the sub menus (any CSS unit)
subMenusMaxWidth:   '25em', // max-width for the sub menus (any CSS unit)
subIndicators:      true,   // create sub menu indicators - creates a SPAN and inserts it in the A
subIndicatorsPos:   'prepend',  // position of the SPAN relative to the menu item content 
			    	//   ('prepend', 'append')
subIndicatorsText:  '',     // [optionally] add text in the SPAN (e.g. '+')
scrollStep:         50,     // pixels step when scrolling long sub menus that do not fit in the 
			    //   viewport height
scrollInterval:     30,     // interval between each scrolling step
scrollAccelerate:   true,   // accelerate scrolling or use a fixed step
showTimeout:        250,    // timeout before showing the sub menus
hideTimeout:        500,    // timeout before hiding the sub menus
showDuration:       0,      // duration for show animation - set to 0 for no animation - 
			    //    matters only if showFunction:null
showFunction:       null,   // custom function to use when showing a sub menu (the default is
			    //    the jQuery 'show')
hideDuration:       0,      // duration for hide animation - set to 0 for no animation - 
			    //   matters only if hideFunction:null
hideFunction:       function($ul, complete) { $ul.fadeOut(200, complete); }, // custom function
			    //    when hiding a sub menu
collapsibleShowDuration: 0, // duration for show animation for collapsible sub menus
collapsibleShowFunction: function($ul, complete) { $ul.slideDown(200, complete); }, // showing a 
			    //    collapsible sub menu
collapsibleHideDuration: 0, // duration for hide animation for collapsible sub menus
collapsibleHideFunction: function($ul, complete) { $ul.slideUp(200, complete); }, // hiding a 
			    //    collapsible sub menu
showOnClick:        false,  // show the first-level sub menus onclick instead of onmouseover
hideOnClick:        true,   // hide the sub menus on click/tap anywhere on the page
keepInViewport:     true,   // reposition the sub menus if needed to make sure they always appear
			    //     inside the viewport
keepHighlighted:    true,   // (adds the 'highlighted' class to the A's of all ancestor items of
			    //     the current sub menu)
markCurrentItem:    false,  // automatically add the 'current' class to the A element of the 
			    //     item linking the current URL
markCurrentTree:    true,   // add the 'current' class also to the A elements of all ancestor 
			    //     items of the current item
rightToLeftSubMenus: false, // right to left display of the sub menus (check the CSS for the
			    //     sub indicators' position)
bottomToTopSubMenus: false, // bottom to top display of the sub menus
overlapControlsInIE: true   // make sure sub menus appear on top of special OS controls in IE
}

Minimal Example – Submenu widths and offsets

Using the above options requires really advanced understanding of JavaScript, and how the SmartMenus script works. The documentation on the SmartMenus site will be useful for building advanced menus.

However, almost anyone can use just a few of the above options to create useful designs. The default values used by Weaver Xtreme are {subIndicatorsText:'',subMenusMinWidth:'1em',subMenusMaxWidth:'25em'}. The first value, subIndicatorsText:'', is required for Weaver Xtreme’s options to work correctly. You should always include that value. The menus width values set the minimum and maximum width for submenus. You might prefer a larger value for the minimum width, for example.

There are 4 other values that can be easily used to tweak the layout your submenus. these are:

mainMenuSubOffsetX:0,mainMenuSubOffsetY:0,subMenusSubOffsetX:0,subMenusSubOffsetY:0

The default 0 values give the default Weaver Xtreme menu layout. By tweaking these, you can get your submenus to shift their relative position, and get interesting overlaps. Feel free to experiment.

So, if you want to play with these basics – submenu width and offsets, paste this snippet into the SmartMenu JavaScript Initialization box on the SmartMenus Xtreme Plus options tab, and adjust.

{
subIndicatorsText:'',subMenusMinWidth:'1em',subMenusMaxWidth:'25em',
mainMenuSubOffsetX:0,mainMenuSubOffsetY:0,subMenusSubOffsetX:0,subMenusSubOffsetY:0
}