Dropdown Menu

How to

1. Set the Menu Type
2. Create a Standard Menu instead of a Dropdown
• Understand Depth for Dropdowns
3. Customise the Menu
   
4. Understand Default Menu Styles
   
• Set Styles on Menu Bar
• Set Styles for Buttons and Rollovers on Menu Bar
• Set Dropdown / Sub Menu Styles
5. Change the Menu's Drop Direction
   
   • Top of Page - Dropdown Menu
     
   • Vertical Menus - Left or Right of Screen
     
   • Bottom of Page Menu - Drop Up
6. Disable Top Level Links
7. Separate Menu Buttons
8. Set Adjustments for Specific Browsers (Macintosh compatibility)

Setting the Menu Type

To create a dropdown type menu you will need to select 'Javascript (Default)' when setting the initial menu options. See Menu for more information on creating a menu.

The 'Root ID' field may be left blank - doing this will select the first page listed in your Page Manager (unless that page's menu status has been set to 'disabled'). See Menu/Creating a Menu for more information on the Root ID field.

If you have created a menu previously and wish to change it to a dropdown type menu at a later time, in the Menu Manager you will first need to select the radio button next to the ID number for that menu before clicking on 'Edit Type' from the Manager Options Menu. Click Save once the Javascript option has been selected.

Creating a Standard Menu instead of a Dropdown

If you wish for your 'Javascript' menu to be a Standard type instead of a Dropdown, when setting the menu type to 'Javascript' you will need to enter a 'Depth' of zero (0) as shown in the image below.

Other Depth Options:

Removing the depth value and clicking 'Save' will allow the sub menus to appear once more. Also, if you have multiple levels of sub pages within your website and only wish to display the first of these levels in the dropdown menu, enter a depth of one (1). Additional sub pages will then remain hidden from the menu.

Customising the Menu

The next step in creating a Dropdown Menu is determining a look and feel for it. To do this, in the Menu Manager select the radio button next to the ID number of the object you are editing. Next select 'Customise Look' from the Manager Options Menu. When customising a Javascript type menu, you will be presented (in a new window) with a screen similar to the one shown in the image below. The Javascript menu options are split into three main sections:

• Menu Bar Settings
• Drop Down Menu Styles
  
• Browser Specific Adjustments

Unlike the HTML (simple) menu options, here you are given the option to view changes whilst they are being made. Once clicking apply, refresh the screen where your menu appears to the user to view these changes. This does over-write any previous settings that have been saved and is therefore one method of saving your menu. The 'Apply' button is primarily used to check changes to your menu while editing continues.

Selecting the 'Save' button will also apply any changes, and also close the settings screen. When next viewing your menu on a page or Masterpage the changes should be apparent.

After customising any of the settings on this screen you must click 'Save' or 'Apply' on this screen before they may be seen live on your website. Clicking 'Cancel' will nullify any changes that have been set since the last save.

Menu Styles

A Javascript menu with no styles applied will adopt the default style that is currently governing the page, Masterpage or individual section where the menu is placed for viewing. Any styles placed on the menu itself via these settings will over-ride most adopted styles.

If you are having difficulty over-riding or setting a style specifically for the menu, you may need to look closer at these adopted attributes.

To add styles specific to the Javascript menu, select the appropriate 'Edit' button in the settings screen (as seen above). As explained in Applying Styles To Menu's on the Menu page of this manual, editing these styles is much the same as the method used in the Style Manager. In the Menu Styles options, click 'Edit' next to the Style you wish to change. This will load the style options screen. See Style Manager if you need more information on the style editor.

Menu Bar Settings

The Menu Bar is the 'container' that holds all the menu buttons together as a block - enabling you to assign a single style over the entire menu and help it to stand out above all other elements on your webpage. You might want to add a border around the menu bar, some padding, a background colour/image or even set the height of the menu bar. This is where you would do it.

In most sites a horizontal menu bar will stretch across the entire width of the screen or section and a background colour associated with it which extends the entire width. This is especially useful when you are not sure how many menu buttons are available for a given page, or will be available in the future, but wish for them to be evenly spaced across the width. You will need to set the width in the Menu Bar style to 100%

Buttons and Rollovers on Menu Bar

The 'Buttons on the Main Menu Bar' and 'Buttons on the Main Menu Bar Rollover' sections govern how each button within the menu appears. Styles set in the rollover section appear when a user's mouse cursor is hovered above a button. If no style is set in either of these sections, they will once again adopt a style from the menu bar or page/section surrounding it.

Dropdown / Sub Menu Styles

When a sub menu exists without styles, it will generally emerge onto the page with a transparent background. If the default text colour for the sub menu is the same as the background of the surrounding webpage you will need to be carefull the sub links do not simply disappear. To do this it is recommended that most if not all of this type of menu have at least a background colour set in the dropdown styles. This can be done by selecting the 'Edit' button next to 'Sub Menu Style' and 'Sub Menu Button'.

Changing the Menu's Drop Direction

This type of menu is quite versatile by the way each of the sub menus appears to users. No matter which section of your webpage the menu is positioned, one of the following options should suit. To change the direction your menu appears, select the radio button next to the appropriate menu style.

Dropdown Menu - Top of Page

This is the default type selected when a Javascript menu is created. It is ideal for menus positioned horizontally across the top of a webpage. Sub menus will appear listed vertically below their Top Level Link.

Vertical Menu for Left Side of Screen - or - Vertical Menu for Right Side of Screen

The Vertical menu is simply that - one menu item listed below the previous in a vertical fashion. Sub menus will also appear vertically, but instead of directly below their Top Level Link, they will appear to the left or right side of the Main Menu Bar. You as the creator of the menu must choose which side the sub menu is to appear.

For sub menus to pop out on the right hand side of the Main Menu Bar, select 'Vertical Menu for Left Side of Screen'.
For sub menus to pop out on the left hand side of the Main Menu Bar, instead choose 'Vertical Menu for Right Side of Screen'.

Bottom of Page Menu

Much like the default 'Dropdown' type, this menu type is displayed horizontally across a webpage. Any sub menus however will appear above the main menu bar. Sub menus with more than one link will be presented with the same top to bottom order as before.

If you need to change the order of links in your menu, please refer to the Page Manager. The order by which page titles appear in the Page Manager is the same as they will appear in all menus you create via the Menu Manager.

Disable Top Level Links

Top Level Links are actual pages within the Page Manager. For some websites though, there is no actual content required for these pages. They are merely a placeholder, holding together a group of sub pages. The problem may then arise that you do not wish users to click on the link that would take them to that Top Level page. To prevent users going to this 'blank' page select the tickbox next to 'Disable links for buttons with Sub-menus'.

Once ticked, all Top Level Links with sub pages will be affected. Main Pages without sub pages will remain as active links for the user to click on.

Separating Menu Buttons

Separating menu buttons from each other can help your website's audience to determine where one link ends and the next begins. There are a couple of methods here that you can use to do this.

The first and by far easiest is to select one of the default symbols from the dropdown list next to 'Place between Menu Buttons'. Quite simply these symbols are:

   a blank space
:: two colons
|  a single vertical line
-  a dash

The second method adds complexity to the symbol's selection. Clicking the 'Edit' button for this section allows you to not only change the colour of the desired symbol, but if the blank space has been chosen, an image may also be set into the style. Three examples showing the various methods used to seperate buttons are shown below.

The first example was constructed using the vertical line (|) selected from the dropdown list. Once selcted, colour, font and style were set by clicking on the 'Edit' button in this section. The same type of result is achievable using either the double colon (::) or dash (-) choice.

For the second example, an image was used between the menu buttons. To create this: The background colour and an image gradient were initially added to the Menu Bar. In the 'Place between Menu Buttons' section, the blank space was chosen from the dropdown list. Clicking 'Edit' next to 'Place between Menu Buttons', another background image was then set. That image is shown below. In this example, the 'position' of both the Menu Bar's gradient image and the separating image has been set to 'TOP' in order to propperly align the gradients. The Menu Bar's 'Repeat' has been set to 'Repeat' while the image between the buttons is set to 'No-Repeat'. As the final step while setting your style, enter the width of the separating image.

The last example does not actually use the 'Place between Menu Buttons' feature. Instead a border has been applied when creating the style of the 'Buttons on the Main Menu Bar'.

Whichever method you choose, remember that it is a personal preference - you may need to use a bit of trial and error in order to best identify the right sollution for your website.

Set Adjustments for Specific Browsers (Macintosh compatibility)

When creating any webpage it is recommended that you check the visual layout in as many different Internet browsers that are available to you. While every aspect of this system has been made with multiple browsers in mind, upgrades to individual browsers do occur regularly and may affect the layout of content on some webpages. With this in mind regular updates do take place on the Aplinx system to ensure browser compatibility. Despite our best efforts though, menus may not show up correctly on IE5.5 on Mac machines. Understanding this, the final section of the Javascript menu settings may be used.

When viewing a Javascript type menu in these browsers, the position of the dropdown section - or the sub menus - may be tweeked by entering positive or negative numbers into the Browser Specific Adjustments section. Entering negative numbers should move the sub menu up or left. Positive numbers will reposition lower on the page or further to the left.