5. Menu Editor

The SiteWizard Menu Editor allows you to manage your navigation menu on your website. If your wesbite features two or three editable menus, you can edit all of them from this panel. 

Figure 5 - The Sitewizard Menu Editor

The Menu Editor consists of a number of a main box containing your menu list, and a number of buttons. 

5.1 Adding New Items to your Menu

Adding a CMS Page to the Menu

To add a CMS page to your menu, click the button at the top on the left labelled 'Add a CMS Page to the Menu'.

Figure 5.1.1 - Click the button to 'Add a CMS Page to the Menu'

In the box which appears beneath the button, you can add your page to the menu.

  1. Click the downwards arrow on the 'Choose Page' drop down box, and select the page you wish to add.
  2. In the second drop-down box, choose whether you wish your link to open in the same or a new window. The same window is advised for links to other pages on the same website.
  3. Click on the 'ADD' button, and the page will be inserted at the bottom of the menu list below.
  4. Repeat this process again for any more pages you wish to add.
  5. Save your changes by clicking the 'Save Changes' button at the bottom of the panel.

Figure 5.1.2 - Select a page to add to your menu and then click the 'Add' button
Please Note: Before you add a page to your menu, make sure you have named the page and given it an alternate filename in the Page Name Editor (See Section 4.1 Naming & Renaming Pages). Until you have renamed your page from the default page name, you will be unable to add it to the menu.

Adding a File to the Menu

You can add a link to a file from your file library to your site navigation menu - for example a PDF file or a Microsoft Word document. The link will cause the user's computer to either download the file or open it, depending on the file type and the user's settings. 

To add a file link to your menu, click the button at the top in the centre labelled 'Add a File to the Menu'.

Figure 5.2.1 - Click the button to 'Add a CMS Page to the Menu'

In the box which appears beneath the button, you can add your file to the menu.

  1. In the first box, entitled 'Menu Item', type the text you wish to appear on the menu link item.
  2. In the 'Choose File' drop-down box, select the file to link from your file library.
  3. In the third drop-down box, select whether you wish the file to open in a new window or the same window. A new window is advised for a downloadable file. 
  4. Click on the 'ADD' button, and the page will be inserted at the bottom of the menu list below.
  5. Repeat this process again for any more pages you wish to add.
  6. Save your changes by clicking the 'Save Changes' button at the bottom of the panel.

Figure 5.2.2 - Type in your menu link text, and select your file from the drop-down box. 
Please Note: Before you can add a file to your menu, you need to first upload the file to your file library (See Section 6.2 Uploading Images and Files). 

Adding a Custom Link to the Menu

You can add a link to your navigation menu which points to any URL you wish, for example a page on a separate website. 

To add a custom link to your menu, click the button at the top on the right of the Menu Editor panel labelled 'Add a Custom Item to the Menu'.

Figure 5.2.1 - Click the button to 'Add a Custom Item to the Menu'

In the box which appears beneath the button, you can add your custom link to the menu.

  1. In the first box, entitled 'Menu Item', type the text you wish to appear on the menu item link.
  2. In the next box, entitled 'Link', type the URL of the web page you wish to link to. Don't forget to include http:// before the www. in your URL, for example: http://www.sitewizard.co.uk
  3. In the third column there are two boxes. The first box is for a custom input - this is sometimes used to add extra information to a link, but it is an advanced feature - most users do not need to worry about it. 
  4. Beneath the custom box is a drop down to open the link in a new window or the same. If you are linking to a different wesbite, it is a good idea to open in a new window. 
  5. Click on the 'ADD' button, and the page will be inserted at the bottom of the menu list below.
  6. Repeat this process again for any more pages you wish to add.
  7. Save your changes by clicking the 'Save Changes' button at the bottom of the panel.

Figure 5.3.2 - Add a custom link to a menu, for example to another website of yours.

Adding a Link to an Anchor on a Page

An anchor is an invisible marker on a web page. A link which points to an anchor will jump to the specific anchor point on the linked page. Anchors are often used in navigation menus to link to specific sections on long pages. 

Please Note: Before you add an Anchor link onto your menu, you need to create the Anchor point on your web page. See section 3.8 Inserting an Anchor on a Page for how to do this. 

Adding a link to an anchor on a page is similar to adding a custom link, described above. Instead of inserting a full web address, you'll need to link to your CMS page with the anchor reference included. 

  1. In the first box, entitled 'Menu Item', type the text you wish to appear on the menu item link.
  2. In the next box, entitled 'Link', type the alternate file name of the page containing your anchor. On the end of this, type a # (hash) symbol followed by the name of your anchor. For example, if you have an anchor called 'domestic' on your 'services.htm' page, your link would be 'services.htm#domestic'.
  3. In the third column there are two boxes. The first box is for a custom input - this is sometimes used to add extra information to a link, but it is an advanced feature - most users do not need to worry about it. 
  4. Beneath the custom box is a drop down to open the link in a new window or the same. If you are linking to an anchor within your site, the same window is advised. 
  5. Click on the 'ADD' button, and the page will be inserted at the bottom of the menu list below.
  6. Repeat this process again for any more pages you wish to add.
  7. Save your changes by clicking the 'Save Changes' button at the bottom of the panel.

Figure 5.3.3 - To link to an anchor, add a # (hash) symbol followed by the anchor name to your page file name.

5.2 Changing Position of an Item on the Menu

If you'd like to change the order of the items in your menu, you can use the Move Up and Move Down buttons on the right hands side of the Menu Editor panel. 

  1. In the Menu List box, click on the link you wish to move.
  2. Click either the Move Up or Move Down button to move your menu item up by one place.
  3. Continue clicking until the menu item is in the position you would like it.
  4. Repeat these steps until your menu is in the order you want
  5. Save your changes by clicking the 'Save Changes' button at the bottom of the panel.

Figure 5.2.1 - Click the 'Move Up' or 'Move Down' buttons to change the position of menu items.

5.3 Adding and Removing Sub-Levels of your Menu

The SiteWizard menu system allows you to add sub-menus to your navigation system. Sub-menus are useful if you have many pages or sections, as your menu can be divided into categories. For example, you might have a top-level menu item of 'Services', with a sub-menu featuring links to sections for 'Domestic Services', 'Commercial Services' and 'Industrial Services'. 

To add a sub-menu item to your menu:

  1. Ensure you have a top-level menu item created as a category link, under which which your sub-menu will be situated.
  2. Add a new menu item for the link you wish to be a sub-menu. Position it unerneath the top-level menu item in your Menu List.
  3. Click on your link to ensure it is still selected, and click on the + Sub Menu button. You will see that an arrow symbol (>) has been added to the front of the item in the Menu List box.
  4. To revert the link to be a top-level menu item again, just click on the - Sub Menu button and the symbol is removed.
  5. Repeat this process for as many sub-levels as you wish. 
  6. Save your changes by clicking the 'Save Changes' button at the bottom of the panel.

Figure 5.3.1 - Click the '+ Sub Level' button to convert the selected item to a sub-menu of the category item above.

On your website, your sub-menus may be styled to display in one of a few ways: they might always be visible beneath their top-level cetegory items, they may be visible when the category is hovered over with the mouse, or they may be visible when the category is clicked on - this will depend on the design of your site. 

Please Note: Sub-menus may not have been styled on your website, particularly if you did not need them when the site was first built. If you try to add a sub-menu and it does not look correct on your website, give SiteWizard a call on 01622 200 045 to organise your sub-menus to be styled. 

5.4 Modifying an Item in the Menu

If you have added a menu item you wish to change it, the SiteWizard Menu Editor allows you to edit both the page name as it appears on the menu and the URL the menu item links to.

  1. Click on the menu item you wish to modify and click the Modify button on the right hand side.
  2. A pop-up box will appear containing your menu text, which prompts you to modify the text. If you want to change the wording of your menu item, edit this text, and click OK.
  3. A second pop-up box will appear that prompts you to modify the URL your menu item points to. If you wish to change this, edit the URL and then click OK.
  4. A third pop-up asks you to specify whether the link opens in the same or a new window. SW means same window, and NW means new window. Modify this if you wish, then click OK. 
  5. A fourth pop-up contains the custom field, should you require it. This is for advanced users, most people do not need to worry about this box, so just click OK. 
  6. A confirmation pop-up then appears, to check you are happy with your menu modifications. If you are happy, click OK.
  7. The menu item should now have been modified to your new specification. Save your changes by clicking the 'Save Changes' button at the bottom of the panel.
Please Note: Some Internet browsers may require you to give permission for the 'modify' popup to display. In particular, Internet Explorer 7 may cause an issue. If you computer displays a message asking you to 'Allow Scripted Windows' or something similar, click to allow them. If you still have problems, give SiteWizard Technical Support a call on 01622 200 045 and they will be happy to help you. 

5.5 Deleting an item from the Menu

If you no longer need an item which appears in your menu, you can delete the item. 

  1. Select the item you wish to remove.
  2. Click the Delete Item button on the right hand site and the item will be removed from the Menu List box.
  3. Save your changes by clicking the 'Save Changes' button at the bottom of the panel.

5.6 Using Multiple Menus

Some SiteWizard websites contain two or three navigation menus for different parts of your website. If your website contains this features, you can switch between your multiple menus using the links at the top.

Each menu can be edited indepentantly exactly as described in the sections above. 

Figure 5.6.1 - Select which of your multiple menus you wish to edit 
using the links at the top of the Menu Editor panel
^ Back To TopGo to next section >