Description: This tutorial describes an easy way to add the menu to your website without hand coding using WebMatrx and CSS Menu Suite.

1. Open html document and select place on the html page where you want a menu to be inserted.

 

2. Run suitable module. In this tutorial we'll create horizontal menu.

 

3. Choose from one of the following:

  • New
  • Open
  • Presets - Presets is used for this tutorial.

 

4. Select the desired preset. You can change this design or apply a different preset to your menu later if necessary. Click the Apply button.

 

5.Change default menu structure using the Add, Delete, and Move buttons or just change Item text. In the Item tab panel you need to add the information for the following:

  • Text field - Text that will show on the menu button
  • Link field - Page the button is linked to. Use the Link Browse button, or enter the URL. You can use:
    • Absolute links which use the full URL such as http://www.cssmenutools.com/horizontal-menu-advancer.html
    • Site root-relative links such as /horizontal-menu-advancer.html
    • Document-relative links such as horizontal-menu-advancer.html
  • Target field is an optional parameter specifying a frame or browser window where the URL will be opened.
  • Title field - The Tool Tip that shows when the mouse is hovered over the menu item.

 

You will see the changes you make to the menu in the Preview window. When you have finished adding items to the menu, click Save & Close.
Images used in presets are located outside the site folder. You will receive the Images Location warning message.

Select the folder inside your site where you wish to store the images. Click OK.

Horizontal CSS menu successfully added. Save your html document and open your html page in a browser.