Horizontal Sliding Sub Menus

Horizontal Sliding Sub Menus - Save tons of real-estate with top navigation by packing links into customized scrollable sub menus. Supports custom background and main menu images, fonts, sub menu colors, scroll button colors, etc.

Class File Name: hssm.class, occcolor.class, occcord.class, ocfontc.class, ocgifix.class, navkey.class
Notice Tag: Horizontal Sliding Sub Menus, Copyright (c) 1998, OpenCube Inc.

Applet Tag Template

Template based on the above implementation of the applet

The Required Parameters:

Parameter 1, the notice tag, must be included in the applet tag in order for the applet to work. Most of the parameters will default to the value indicated in their parameter description below and may not be required depending on the applet implementation. Usually the easiest way to customize your applet is to cut and paste the applet tag used in the template and modify it to fit your web page.

Defining Colors:

This applet uses a simple RGB or Hexadecimal color definition scheme. On most systems (depending on the software being used to choose a color) its easier to define a color using RGB, however since most web pages define colors using a HEX value we have allowed for both methods of color definition. To define a color using RGB use commas to separate the values such as 255,255,255 (White). To define a color using a hexadecimal value use a pound sign ('#') followed by a 6 digit hex value in the rage of 000000 - FFFFFF (e.g. #FFFFFF is equal to the color White).

Color Definition with RGB: To define a color in one of the color parameters using RGB choose a value between 0 - 255 for the red, green, and blue components separated by commas and typed out in the correct r,g,b order. Below is a sample of how a color parameter using RGB should look, the example specifies several different sample colors for the "bgcolor" parameter.

WHITE: <param name="bgcolor" value="255,255,255">
GREEN: <param name="bgcolor" value="0,255,0">
BLACK: <param name="bgcolor" value="0,0,0">
YELLOW: <param name="bgcolor" value="255,255,0">
OFF WHITE: <param name="bgcolor" value="240,239,234">

The best way to choose the exact color you are looking for without having to guess the numbers is to access your systems Color Picker. Color Pickers usually allow you to drag the mouse over a rainbow type color grid to select a color, and show you the appropriate RGB values. In windows the Color Picker is accessible through MS Paint as well as a majority of the popular Imaging and HTML Authoring Software.

Defining Multiple attributes with One Parameter:

Parameters used to customize a specific image location or sub menu descriptions are indicated using a range, such as "imagefile0" - "imagefileN". To define a parameter for a specific image or message (available when noted as above), use "desc0" to define, in this case, the first main menu description, "desc1" would define the second main menu description, etc.

The Applet Coordinate System:

The origin of the applets coordinate system is located at the upper left corner of the applet. The x (horizontal) coordinate starts at the left border with 0 and go as far to the right as the applet is wide (defined with the width tag - see above). The y (vertical) coordinate starts at the top of the applet with 0 and go down as far as the applet is high.

The Applet Parameters

The Applet

Parameter 1
Attribute: Copyright notice.
param name="Notice"
value="Horizontal Sliding Sub Menus, Copyright (c) 1998, OpenCube Inc."
Note: This must be included for the applet to work.

Parameter 2
Attribute: Applet Background Color
param name = "bgcolor"
Value = R,G,B, Where R,G,B are the red, green, and blue components of the applets background color.
DEFAULT: White

Parameter 3
Attribute: Status bar text when the mouse is over the applet.
param name = "onsbtext"
Value = X, Where X is the message to be displayed in the status bar when the mouse is over the applet area.
DEFAULT: "OpenCube - Horizontal Image Switch Menu"

Parameter 4
Attribute: Status bar text when the mouse is not on applet.
param name = "offsbtext"
Value = X, Where X is the message to be displayed in the status bar when the mouse is not located over the applet area.
DEFAULT: "Java by OpenCube"

Optional Applet Background Image

Parameter 5
Attribute: Image File Locations and Names
param name = "bgimagefile"
Value = X. Where X is the relative location and name of the image file to be displayed in the applet area as the background image. This must be defined relative to the location of the HTML document which contains the applet or fully qualified.

Parameter 6
Attribute: Image x,y Positions Relative to Top Left Corner of Applet
param name = "bgimagexy"
Value = X,Y. Where X,Y is the horizontal and vertical location of the background image relative to the top left border of the applet. The x and y values must be separated by a comma.
DEFAULT: 0,0

The Images

Parameter 7
Attribute: Image File Locations and Names
param name = "imagefile0" - "imagefileN"
Value = X. Where X is the relative location and name of the image file to be displayed in the applet area as a main menu image. This must be defined relative to the location of the HTML document which contains the applet.

Parameter 8
Attribute: Image x,y Positions Relative to Top Left Corner of Applet
param name = "picxy0" - "picxyN"
Value = X,Y. Where X,Y is the horizontal and vertical location of image relative to the left margin of the applet. The x and y values must be separated by a comma.

The Highlighted Images

Note: The images defined as Highlight images appear as the mouse moves over a main menu image. The highlighted images are automatically placed directly over the main menu image to which they correspond and therefore in most scenarios should have the same dimensions as the main menu image to which they belong.

Parameter 9
Attribute: Image File Locations and Names
param name = "switchfile0" - "switchfileN"
Value = X. Where X is the relative location and name of the image file to be displayed in the applet area when the mouse is over a main menu image. This must be defined relative to the location of the HTML document which contains the applet. Note: The code base value has no effect on image file locations that are fully qualified, e.g. http://..., hence fully qualified URL's are also allowed.

The Associated Sub Menu Link Descriptions

Parameter 10
Attribute: Sub Menu Descriptions
param name = "desc0-0" - "descN-N"
Value = X, Where X is the message that corresponds to the index used to identify an image. (e.g to define a the first sub menu message for the first image use "desc0-0", to define the second sub menu message for the first image use "desc0-1", to define the second sub menu message for the third image use "desc2-1", etc.,etc.)

Parameter 11
Attribute: Font Style
param name = "font"
Value = Font Face, Style, Size, Each value must be separated by a comma and appear in the correct order (font face, style, and size) The Allowable Java font face values are Helvetica, TimesRoman, Courier, Dialog, or DialogInput. The allowable style options are plain, bold, bolditalic, or italic.
DEFAULT: Helvetica, plain, 12

Parameter 12
Attribute: Text Color
param name = "menutextcolor"
Value = R,G,B. Where R,G,B define the red, green, and blue components of the color as described above.
DEFAULT: Black

Parameter 13
Attribute: Left and Right Margins
param name = "lrmargin"
Value = X, Where X is the left and right margin to use for the menu message.

Parameter 14
Attribute: Center or Left Justify Text?
param name = "centertext"
Value = true or false, True = yes, Center Text - False = no, left justify text

Parameter 15
Attribute: Sub Menu Fit Size Of Text and Offsets
param name = "fittext"
Value = "true" or "false" A value of "true" makes the submenus only as big as the text and offsets that they contain, "false" makes each submenu as large as the largest submenu in its group of submenus.
DEFAULT:FALSE

The Associated Sub Menu Attributes

Parameter 16
Attribute: Default Sub Menu Display Width
param name = "showsubwidth"
Value = X, Where X is the default widths of the sub menu areas to be displayed between the navigation buttons. Setting this parameter will automatically override the showsubnum parameter option described below.
DEFAULT: 150

Parameter 17
Attribute: Specific Sub Menu Display Width
param name = "showsubwidth0" - "showsubwidthN"
Value = X, Where X is the specific width of the sub menu area indicated by the index number to be displayed between the navigation buttons.

Parameter 18
Attribute: Default Number of Sub Menus Visible
param name = "showsubnum"
Value = X, Where X is the the number of sub menu links visible. Note using this parameter overrides setting a specific sub menu width and can only be used if the fittext parameter is set to false. By setting a specific showsubnum value, sub menu links will fit evenly between the navigation buttons. To deactivate the showsubnum option omit the parameter from the applet tag or set its value to -1.
DEFAULT: Not Active

Parameter 19
Attribute: Specific Number of Sub Menus Visible
param name = "showsubnum0" - "showsubnumN"
Value = X, Where X is the the specific number of sub menu links visible for the given sub menu. For more information see this parameter associated default setting above.

Parameter 20
Attribute: Sub Menu X,Y Position Relative to Top Left Corner of its Associated Image
param name = "menuxy0" - "menuxyN"
Value = X,Y, Where x,y is the x and y offset from the top left corner of the image using the coordinate system described above. The x and y values must be separated by a comma.

Parameter 21
Attribute: Sub Menu Color
param name = "menucolor"
Value = R,G,B. Where R,G,B defines the red, green, and blue components of the pop up sub menu color.
DEFAULT: Yellow

Parameter 22
Attribute: Sub Menu Outline Color
param name = "menuoutlinecolor"
Value = R,G,B. Where R,G,B defines the red, green, and blue components of the pop up sub menus outline color.
DEFAULT: Black

Parameter 23
Attribute: Sub Menu Highlight Background Color
param name = "menuhlcolor"
Value = R,G,B. Where R,G,B defines the red, green, and blue components of the pop up sub menus highlighted background color.
DEFAULT: Red

Parameter 24
Attribute: Sub Menu Highlight Text Color
param name = "menuhltextcolor"
Value = R,G,B. Where R,G,B defines the red, green, and blue components of the pop up sub menus highlighted text color.
DEFAULT: Black

Parameter 25
Attribute: Save Sub Menu Positions
param name = "savesubpos"
Value = true or false, If true current sub menu scroll positions are saved when leaving and returning to a specific sub menu. When false sub menu positions always start at the beginning.
DEFAULT: true

Sub Menu Navigation Button Settings

Parameter 26
Attribute: Button Color
param name = "buttoncolor"
Value = R,G,B. Where R,G,B defines the red, green, and blue components of the left and right button colors.
DEFAULT: Gray

Parameter 27
Attribute: Arrow Color
param name = "arrowcolor"
Value = R,G,B. Where R,G,B defines the red, green, and blue components of the left and right arrow colors.
DEFAULT: Black

Parameter 28
Attribute: Arrow Highlight Color
param name = "arrowhlcolor"
Value = R,G,B. Where R,G,B defines the red, green, and blue components of the left and right arrow highlight colors.
DEFAULT: Yellow

Parameter 29
Attribute: Void Color (Hash marks in absence of sub menus)
param name = "voidcolor"
Value = R,G,B. Where R,G,B defines the red, green, and blue components of the void color. The void color is the color of the hash marks which appear at the end of the available sub menu area.
DEFAULT: Light Gray

Sub Menu Slide Animation Settings

Parameter 30
Attribute: Animation Jump Size
param name = "scrolljump"
Value = X, Where X is the number of pixels to jump with each animation frame. The higher the number the faster the scroll and consequently the choppier the effect. Use this parameter in conjunction with the delay time setting below to adjust the animation speed and effect.
DEFAULT: 2

Parameter 31
Attribute: Animation Delay Time
param name = "scrolldelay"
Value = X, Where X is the amount of time in milliseconds to delay each animation frame NOTE: Due to a bug in the different browsers VM's A value less than 5 will force the animation effect to run as fast as the CPU will allow for, values greater than 5 are appropriately timed and will use only a small percentage of the available CPU resources.
DEFAULT: 10

URL Links

Parameter 32
Attribute: Image URL Links
param name = "imagedesturl0" - "imagedesturlN"
value=X, where X is the link for the specific image. URL's can be defined relative to the HTML document containing the applet or fully qualified.

Parameter 33
Attribute: Specific Load Destination Image URL Where?
param name="imageloadwhere0" - "imageloadwhereN"
The "imageloadwhereN" tag specifies where the document specified in the "imagedesturlN" parameter should be loaded. The default is "_self". A value equal to the name (case sensitive) of a frame will load the document in that frame.

"_parent" show in the parent frame
"_top" show in the top-most frame
"_self" show in the current frame
"_blank" show in a new unnamed top-level window
"name" show in a new top-level window named name
"frame name" show in the frame named frame name

Note: When targeting a frame location with the name of the frame make certain that the case and names are typed identically. If the applet cannot find the frame the document will be loaded in a new window.

Parameter 34
Attribute: Sub Menu URL Links
param name = "desturl0-0" - "desturlN-N"
value=X, where X is the link for the specific sub menu message. (e.g. to define a link for the first images first sub menu message use "desturl0-0" for the second use "desturl0-1", etc, to define a url link for the third images second sub menu message us "desturl2-1", etc., etc.) URL's can be defined relative to the HTML document containing the applet or fully qualified.

Parameter 35
Attribute: Specifc Load Destination Sub Menu URL Where
param name="loadwhere0-0" - "loadwhereN-N"
The "loadwhereN-N" tag specifies where the document specified in the "desturlN-N" parameter should be loaded. The default is "_self". A value equal to the name (case sensitive) of a frame will load the document in that frame.

"_parent" show in the parent frame
"_top" show in the top-most frame
"_self" show in the current frame
"_blank" show in a new unnamed top-level window
"name" show in a new top-level window named name
"frame name" show in the frame named frame name

Parameter 36
Attribute: Default Load Destination Where
param name="loadwhere"
The "loadwhere" tag specifies where the default target location is to load all links in the applet. Use the specific loadwhere settings above to overide the default.

"_parent" show in the parent frame
"_top" show in the top-most frame
"_self" show in the current frame
"_blank" show in a new unnamed top-level window
"name" show in a new top-level window named name
"frame name" show in the frame named frame name