CSS Foundation

Introduction

NodeFire menus are Pure CSS based and will operate without JavaScript. Core CSS functionality and styling rules are applied to specific class names. These class names are attached to the strucural elements of your HTML lists or divs which define the content of a menu.

Sub menus are accessible without JavaScript in all supported browsers except IE6 (IE6 main menus always work, however subs are only activated once the JavaScript API loads). Most old legacy type browsers like IE5.5-down, Netscape, old-Opera, will display the main menu, but will not include sub menu support. For this reason, we recommend applying links to your main items (the small percentage of old browser users will still have access this way). Overall, browser support with NodeFire is as high and uniform as possible and should not be of much concern for most sites.

Required CSS

Two CSS files are required by the menu widget, the first acts as the core code and is responsible for stucture set-up, providing a default layout, and activating subs through the CSS hover pseudo class. The second file is a skin which may be applied to style the menu, this file is simple to customize and will adjust the look of the menu to fit your web site.

The skin styles may be optional when converting an existing pure CSS styled menu, however you must use the NodeFire core CSS code.

File 1: The core code is below, this file is referenced as 'menu_core.css' in the example menus. This file should not be edited, any changes will likely break some aspect of the menu widget. The core CSS code or a reference to the file should be placed in the head of your document before the skin file.

File 2: The second file is the skin which may be edited to alter the look of the menu to suit your needs. The customizable CSS rules are commented and basically self explanitory. The file should be placed in the head of your document after the core CSS. The file below is the simple menu skin ('menu_simple.css') which is applied to many of the example menus in the documentation.

The skin file above includes a basic set of rules which will fulfill the design requirements of most users. However, you can add additional rules as needed by your menu.

Menu Widget Class Names

The menu widget class names identify both Pure CSS and scripted structural elements of your menu content. The following class names may be applied to virtually any type of HTML structure to create and style a pure CSS based menu widget for the NodeFire API.

  • 'nfMain' - The root main menu node (typically... <UL> and <DL>).
  • 'nfSubC' - Sub menu container nodes (typically... <UL>, <DL>, and <DIV>). Typically this class is only applied to a DIV when wrapping subs with extra content such as rounded corners or drop shadows
  • 'nfSubS' - The sub root structural node, similar to 'nfMain' (typically... <UL> and <DL>). When using plain subs that are not wrapped in other content this class will be defined along side the 'nfSubC' on the same tag.
  • 'nfItem' - Menu item nodes (typically... <LI>, <DT>, <DD>, and <DIV>). Items must be the direct child descendant of 'nfSubS' tags. This classes tags act as iether a container for links or directly includes titles and other content.
  • 'nfLink' - Menu item link nodes (typically... <A> and <DIV>) This class must be a descendant of an item ('nfItem'), however is DOES NOT have to be a direct child descendant. Links may be wrapped in other content to create rounded corner or tab style effects. The link ('nfLink') typically recivies the actual skin styling while the item ('nfItem') simply contains it.
  • 'nfParent' - Items ('nfItem') with child subs. This class name may optionally be applied directly to your HTML structure items ('nfItem') which contain child subs, otherwise they are automatically applied when activating a new menu object through the API. Manually applying the class names will allow parent styling to be present in both pure CSS and scripted modes.
  • 'nfParentLink' - Links ('nfItem') with child subs. This class name may optionally be applied directly to your HTML structure links ('nfLink') which contain child subs, otherwise they are automatically applied when activating a new menu object through the API. Manually applying the class names will allow parent styling to be present in both pure CSS and scripted modes.
  • 'nfJSHover' - Applied to items ('nfitem') by the menu widget when hovered.
  • 'nfJSActive' - Applied to items ('nfitem') with child subs by the menu widget when the items sub is made visible.
  • 'nfJSFocus' - Applied to items ('nfitem') by the menu widget when focused on by a keyboard or click event.
  • 'nfJSBreadcrumb' - Applied to items ('nfitem') by the menu widget when using the breadcrumb API features.
 

Below is a simple example showing how a typical HTML structure may use the NodeFire class names to define a menu.

Two additional class names are used as a global switch between pure CSS and the scripted menu.

  • 'nfPure' - Apply to the 'nfMain' or optionally 'nfSubC' nodes. This class tells the menu how to behave in pure CSS mode and also defines the structure as a menu object when the widget is activated by script. Nested menu objects may be defined by applying the 'nfPure' class to sub containers ('nfSubC') or additional nested main menus ('nfMain').
  • 'nfScripted' - This class name replaces the 'nfPure' class for a menu object when it's activated using the API.
 

You can optionally create skin style rules using the 'nfScripted' and 'nfPure' class names. This is usefull if your menu requires a different look for users who have JavaScript and see the API version, vs. users who only see the pure CSS menu.

Menu Layouts

By default the core CSS includes layout styles for a horizontal main menu with vertical subs. Alternate layouts are provided in the downloads css/layouts folder, the following options are included.

  • 'menu_verticalMain.css' - Vertical main menu with vertical subs. By default the width of the main items are set to 'auto' and will stretch to fit your container. You may optionally specify a fixed width on your root menu node or with the 'nfMain' class.
  • 'menu_horizontalMain_HorizontalSubs.css' - Horizontal main menu with horizontal subs. Includes an option in the layout CSS file to go vertical with the 2nd level subs. By default subs are postitioned relative to the parent items container vs. the item itself.
  • 'menu_hoverTree.css' - Vertical main with fixed height expandable 1st level 'tree style' subs. The second level subs are standard drop down style. This menu style layout works best with a uniform fixed height defined on all the 1st level sub containers. If animating the sub expansion you must wrap each 1st level container in a DIV or similar container with no border or padding styles applied to it. A working example with animated expansion effects is profiled below.