NlsMenu Pro
addobject.com
Customizing Menu Style
NlsMenu Professional - Advanced Javascript Drop Down Menu Control
   

NlsMenu look and feel is configurable from external stylesheet (css file). Picture below show you the configurable menu elements.

1. Core menu style rules

  • .nlsmenu, the menu container style.

  • .nlsiconcell, menu items icon style.
  • .nlssubmenucell, submenu pointer icon style.
  • .nlsitem, menu items text style.
  • .nlsitemcontainer, menu item container style.

  • .nlsitemdisable, menu items text style when disabled.

  • .nlsiconcellover, menu items icon style when mouse move over the item.
  • .nlssubmenucellover, submenu pointer icon style when mouse move over the item.
  • .nlsitemover, menu items text style when mouse move over the item.
  • .nlsitemcontainerover, menu item container style when mouse move over the item.


2. Menu selection style rules

Specify this style rules only when you enable menu selection path.

  • .nlsiconcellsel, selected menu item icon style.
  • .nlssubmenucellsel, selected menu item submenu pointer icon style.
  • .nlsitemcontainersel, selected menu item container style.
  • .nlsitemsel, selected menu item text.


3. Menu shadow rules

Specify this style rules only when you enable menu shadow.

  • .horzshadow, horizontal menu shadow.
  • .vertshadow, vertical menu shadow.
  • .cornshadow, style of junction of menu shadow.


4. Menu borders style rules

Specify this style rules only when you use advanced menu borders for your menu.

  • .mtopleft, top left border menu style.
  • .mtop, top border of menu style.
  • .mtopright, top right border of menu style.
  • .mbottomleft, bottom left border of menu style.
  • .mbottom, bottom border of menu style.
  • .mbottomright, bottom right border of menu style.
  • .mright, right border of menu style.
  • .mleft, left border of menu style.


5. Menu separator style rules

Specify this style rules only when you use separator in your menu.

  • .nlsseparator, separator style
  • .nlsseparatorcontanier, separator container style


6. Using Style Prefix

By using style prefix you can define different style for different menubar/submenu.

  • Create a duplicate of the stylesheet and add a prefix to all style rules. For example .horz_nlsmenu, .vert_nlsmenuitem
  • Then set the prefix to the menu's stlprf property .

            var mbar = menuMgr.createMenubar("menubar");
            mbar.stlprf="horz_";
          

Note that you can see the style prefix is used in almost all the examples provided in the NlsMenu package.