Concepts

The main specific concepts that you need to be familiar with when using MX CSS Menus are:

• Menu types

• Menu layouts

• CSS skins

Menu types

Depending on the source for the menu items information, there are two main types of CSS menus that you can create with MX CSS Menus, the second type being divided in two categories:

1. Non database-driven CSS menus - the menu items information (label, tooltip, page it links to, target window) is manually entered by the developer in a tree-like interface. There are buttons that help specifying the level and order of each menu item.

2. Database-driven CSS menus - the menu items information (label, tooltip, order, parent menu item etc.) is retrieved from a database table that should have a certain structure. The URL information for the menu items can be stored in two different ways in the database table:

3. • Menu items links are retrieved from the database - there is a table column that stores the URL links to which menu items point. These links can be site-relative or external. The site external links should be completely given (including the protocol part: "http://", "ftp://" etc.).

   • Menu items links are built with an URL parameter that retrieves its values from the database - there is a table column that stores the values of an URL parameter. All menu items point to the same site page and pass the same URL parameter, but with different values (so another page content would be loaded).

You can create non database-driven menus with the CSS Menu Wizard and database-driven menus with the Database-driven CSS Menu Wizard or Database-driven CSS Menu server behavior.

Note: Non database-driven menus are sometimes referred as "static" menus (because their items information is entered manually), and database-driven menus are sometimes referred as "dynamic" menus (because their items information is retrieved from a database).

Menu layouts

A menu layout specifies how the menu items are placed, and not the way they look like. Regardless of the menu type and skin, there are four available menu layouts: Vertical, Horizontal, Tab, and Expandable. The first two layouts can have any number of menu levels (you can select this number from a list or enter it yourself), while the last two can have at most two levels.

Check out the four layouts in the images below, where the viorange skin is applied:

1. Vertical layout:
   
   
                           

2. • The menu items from the first level are positioned vertically (one below the other).

   • The menu items from the second, third, etc. levels are displayed one below each other, on the right of the parent item box.
     Note: The Vertical menu layout can have as many levels as you need.

2. Horizontal layout:
   
   
                          

3. • The menu items from the first level are positioned horizontally (one next to the other).

   • The menu items from the second, third, etc. levels are displayed one below each other.
     Note: The Horizontal menu layout can have as many levels as you need.

3. Tab layout:
   
   
                         

4. • The menu items from the first level are positioned horizontally (one next to the other).

   • The menu items from the second level are also displayed horizontally.
     Note: The tab menu layout can have at most two levels.

4. Expandable layout:
   
   
                         

5. • The menu items from the first level are positioned vertically (one below the other).

   • The menu items from the second level are also displayed vertically, and they only show when their parent item is clicked (not hovered, as with the other three layouts). If there are other first-level items below the one that is expanded, they are pushed down (the menu occupies a higher surface).
     Note: The expandable menu layout can have at most two levels.

You can use the Horizontal or the Tab layout when you want to display the site menu on top of the page (sometimes bottom), and you can use the Vertical or the Expandable layout when you want to display the site menu on the left (sometimes right).

CSS skins

First of all, what is a skin when talking about web development? Skins are custom graphical appearances that can be applied to certain websites in order to suit the various preferences of various users. Applying a skin changes a website's look and feel. The aesthetical aspect is visibly improved and elements position can be changed -- all these to please the visitor's eye a little more.

CSS stands for Cascading Style Sheets, which is a simple descriptive language that allows you to add and edit the web pages style (e.g. fonts, colors, spacing, borders). A CSS skin is a skin created using this descriptive language.

When creating menus for your sites with MX CSS Menus, there are 23 available skins from which you can choose. The skins are made entirely in .css files, and creating a new skin to best fit your site is not at all complicated.

Click here to check out all the provided skins in the product.