XCSS Menu Demo

As the designer, there are two files that need to be modified in order to use this menu on any given page, the template and an external style-sheet.

Many of the styles will need to be cascaded, but it is not appropriate to cascade all of them... only the ones that need to be different between the various menu orientations and layouts. In the event that there will never be multiple menus on a single page, much of the cascade can be dropped from the style-sheet (but this is not recommended).

The main style elements (see an example style-sheet for more detailed optional and required styles):


Arbitrarily named (you can use any name you prefer when you are creating your style-sheet) container class, used to cascade most of the menu styles. Whatever names you use for the menu containers, please remember to carry that name through the cascade.

.hnav .xcsstitle

Optional. If the section title is desired to be displayed with a menu, this class will need to be styled accordingly. If the section title is not required, this class should be styled to hide it.

.hnav a.navarrow, .hnav a.subarrow

Optional. If an indicator is desired for dropdowns and fly-outs, the .navarrow and .subarrow classes must be defined.

.hnav .button

Required. This class is the basis for the top level of menu links, and is required to make the menus work.

#button{1, 2, 3,... n}

Optional. These IDs are used to uniquely identify each button level menu item, so that they can be customized and positioned individually. This would allow the menu to be displayed in very custom layouts, including along arcs, scattered in a random manner, displayed out of order, etc.

.hnav .parent:hover div.dropdown

Required for the first layer of dropdown or fly-out menu items. This style should be cascaded from the container in order to allow multiple menus with different layouts on the same page.


Optional. This class overrides the default .button look, allowing the current page to be clearly shown in the menu.


Required. The .dropdown class and itís contained elements are used to style the fly-outs. This style can be cascaded if the various menus require different styles to be applied to the .dropdown elements, otherwise it should not be cascaded.

.drop{1, 2, 3,... n} ul

Optional. This set of classes can be classed to apply different styles to each of the first level of dropdowns. This is useful for giving each dropdown a different width, for example, or different background images and colours. In the case of dynamically generated menus it may make sense for the designer to create more entries than initially needed in order to accommodate potential increase in the number of top level menu items.

.drop{1, 2, 3,... n} ul div ul

Optional. This set of class definitions will allow the designer to override the default behaviour of individual third-level menus (the "Pages" if the menu contains Sections, Categories, and Pages).


Required. Does not need to be cascaded as the .parent class does not include styles specific to any one menu. If it includes display styles they will be applied to the first level of dropdown/fly-out menus. This is a wrapper class for the dropdowns and fly-outs, as this menu (to simplify a lot of things) is designed with divs surrounding the nested unordered lists.