ONLINEGRAPHICPROOFING.COM

remote soft proofing - www.onlinegraphicproofing.com

Menu


Now that you've added the elements for your pop-up menu, let's customize the appearance by switching to the Appearance tab of the Show


Pop-Up Menu dialog. Notice that the following functionality is exposed in this screen: Menu Type: Select an option from this menu to set your pop-up menu as either a vertical or horizontal menu. We'll keep ours as a vertical menu. Font: Enter the font family to which you want to set the text labels in your pop-up menu. I'll choose the Arial, Helvetica, Sans-serif option. Size: Enter the size (in pixels) you want to assign to the text labels in this text box. I'll stick with the default value of 12. Style: If you want to Bold or Italicize the text labels in your pop-up menu, click these icons. I'll leave my text unaltered. Alignment: Click one of these three icons to set the alignment of the text labels as they appear in their cells. I'll leave the Left Align icon selected. Up state: You can customize the text color and up state color of the cells in which the text labels are contained by selecting a color from these two color pickers. Again, I'll leave mine at their default values, but feel free to customize yours. Over state: You can customize the text color and over state color of the text label cells as they will appear when the user's mouse rolls over them by selecting a color from these two color pickers. Again, feel free to customize these colors as you see fit. I'll change the text color to black and the cell color to a bright blue. When you finish making changes to this screen, it might resemble mine, shown in Figure 10.25. Figure 10.25. Configure the appearance of the pop-up menu on the Appearance tab. [View full size image]   Now that you've made changes that will affect the appearance of the pop-up menu, let's switch to the Advanced tab. You can use this tab to set the dimensions, padding, and spacing of the cells in which the text labels are contained. Specifically, the functionality exposed by this screen includes: Cell width and Cell height: Use these text boxes to adjust the width and height of the cells that contain your text labels. By default, the Automatic option is preselected for the menu options next to the width and height fields. Choosing this option causes the menu dimensions to change according to the size of the largest text label in the cells. If you want to set your own width or height, select the Pixels option from the menu and then manually enter a pixel value in the width or height text box. I'll select the Pixel option for the Cell Width text box and enter a width of 100 pixels. Cell spacing and Cell padding: Use the Cell Padding text box to enter the padding to be assigned between the text labels and the borders. Furthermore, you can set the spacing between cells by entering a value in the Cell Spacing text box. The default values are 3 for Cell Padding and 0 for Cell Spacing. I'll leave mine as they are, but feel free to modify yours. Text indent: Use this text box to specify, in pixels, how far text in from the left a menu item is indented within its cell. Menu delay: Enter a value in this text box to set the length of time between when the user moves the pointer over the triggering image or link and when the menu appears. Values are in milliseconds, so the default setting, 1000, equals 1 second. I'll set mine to 300. This value equates to a third of a second. Pop-up borders: Show borders: Enabling this box ensures that a border will appear around the elements in the pop-up menu. Disabling this option disables the Border Width, Border Color, Shadow, and Highlight options. Border width: Sets the width in pixels for the border around elements in the pop-up menu. I'll stay with the default value of 1. Border color: Use this color picker to set the color of the border surrounding the elements. I'll select a white color for my pop-up menu borders.