Creating a website menu with your own Icons

Introduction

In this tutorial we're going to insert a menu in your website using your own Icons. Which will result in a menu that is similar to the one below (except with your own images of course).

Applying the menu – Inserting the Icons

1. Create a new HTML page
   Create a new or open an existing HTML page.
2. Applying the extension
   Choose the  icon from the DMXzone Object bar or from the Insert/DMXzone menu to apply the extension.
   
   
   DMXzone Object bar
   
   
   
   Location if you have your object bar divided in tabs
   
   
   DMXzone Insert Menu
   
   After selecting the extension icon, the Fish Eye Menu appears.
   
   

3. Setting the General Options - Name
   The name field is created by default to identify the menu, we don't change the name as you don't need to. 
4. Setting the Icons Options – Import a complete folder
   One of the easiest way to create a menu is to select a complete folder of images, press the Import a whole folder button to add multiple images. Make sure you select a folder that is located in your site.
   
   
   
   
5. Setting the Icons Options – Inserting images one by one
   You can also insert the icon's one by one, we choose this option during this tutorial, just to show you how it works. We press the Add new icon button to add new menu items
   
   
   
   Select the <new image> line in the object box.
   
   
   
   Press the Browse… button next to the Image field to select your image.
   
   
   
   
   
   
   
   Notice the nice preview that displays the image and its file size on  the left side of the object field.
   
   
   
   
6. Setting the Icons options - Link
   Make sure you select an image in the object box and select the page that you want to refer to in the Link field.
   
   
   
   
7. Setting the Icons options – Title
   Enter the name that is to be displayed above or below the button in the Title field.
   
   
   
   The Title will be displayed above the button when the button is zoomed in.
   
   
   
   
   
   
8. Setting the Icons options – Deleting Images
   You can delete image from the menu with the Remove the current icon button.
   
   
   
   You can also remove all images in one click by selecting the Clear Icons List icon.
   
   
   
   
9. Rearranging the menu
   Use the Move row up and Move row down buttons to arrange the order of your menu items.
   
   
   
   
10. Final steps
    Repeat the steps above to insert more images, press Ok, save your files, upload them to your server (including the script library) and the result should be similar to the image below.