Example: (click the 'menu maker' link to change appearance, content and size of the example)
What can this menu do for you?
» This is a sliding java menu applet suitable for use as a navigation bar down the side of your page.
» Submenus. The menus have one level of sliding submenus. The Iridium-II sliding menu uses an expanding button design - the parent menu item expands its border to include the submenu. Move the mouse over the sliding menu to try out this effect.
Here is the extra information you requested about sliding submenus.
» Iridium-II theme. The Iridium-II design is a particularly complex design. Based entirely on a single colour of your choice, a wood-grain or metal-brush effect is generated. For wood-grain results, shades of brown are recommended. For brushed metal effects, experiment with gray and yellow as base colours, to produce silver and gold results. This is a simpler variant of the primary design. Each top-level menu item is clearly demarcated with its own border. Different menu types are categorised into themes, so you can obtain a variety of matching menus. Click here to see all the menus which match this theme.
- One level of sliding submenus is available
- To open a submenu, simply move the mouse over an entry marked with an arrow.
- To close a submenu, either click the mouse on its parent item, or move the mouse over a different parent item.
- The menu is 'tidy', which means that only one submenu is ever open at a time. This means that the menu doesn't take up too much space on your page, and the user can always easily see where they are in the menu.
- Note that the submenu does not close when the mouse is moved or clicked outside the menu area. This is intentional - most people prefer to see where they are.
» States and colours. The menu items each have three states combining to distinguish rollover items and submenu items.
Here is the extra information you requested about states and colours.
» Fonts and text formatting. The menu supports true-type fonts and you can format text colour, size, weight and alignment.
- Top-level items have three states: (i) normal, (ii) rollover OR open, and (iii) rollover AND open.
- When the mouse rolls over a top-level item with a submenu, the submenu opens and both the parent item and its children (submenu) use the rollover colour as the standard colour and the third defined colour is used as the rollover colour for the opened submenu. This only applies to those themes where the submenu is displayed as a continuous block rather than as distinct buttons. In those menus where submenus are distinct buttons, only two colour states are used for the menu.
- For menus with gradients and graphical effects, the applet interprets a simple colour request by the user and generates all the extra colours necessary.
- Click here for information about how to configure colours manually.
- Click the 'menu maker' link with the magic wand at the top of the page to reveal an online configurator to experiment with menu colours live.
Here is the extra information you requested about fonts and text formatting.
» Layout and line-wrapping. This menu features automated layout. Automated layout means that the menu adapts itself to the content you enter into it. For example, buttons and menu items will be automatically sized and the thematic elements recalculated to fit precisely.
- True-type fonts. Any kind of font which you can display in HTML will also display in the applet (except in very old browsers).
- The demonstration above randomly switches between Verdana and Comic Sans, but you can reconfigure the demonstration live to experiment with your own fonts.
- Colour states. You can define colours for up to three text states, which are normally standard, rollover and active/pressed. So, for example, the text can change colour when the mouse moves onto it, or when the mouse button is clicked. The function of the third colour set may vary with some menu types.
- Alignment. You can align the text left, right or centre.
- Text size and weight. You can give the text almost any size. 'Weight' means you make it 'bold' or 'not bold'.
- Click the 'menu maker' link with the magic wand at the top of the page to reveal an online configurator to experiment with fonts and text live.
Here is the extra information you requested about layout and line-wrapping.
» Icons. Icons are supported. Icons are multi-state and easily redefined by the user.
- This menu supports line-wrapping. If your text is too long to fit onto one line, it will be wrapped, and the button or menu item height will be automatically increased to make extra space.
- You can also force line-breaks instead of relying on automatic wrapping. Click here to find out how to insert line-breaks.
- To adjust the text position left or right, or to assign more vertical space to a menu item, you can use transparent GIF icons. A transparent icon doesn't show, but it pushes the text and the menu item borders. You can also enlarge an existing icon with transparent space to achieve the same effect.
Here is the extra information you requested about icons.
» Hyperlinks. Every menu item can have hyperlinks attached.
- Icons are optional - you don't have to have them.
- Icons are just simple GIF or JPG files and you can use any image files that you find around the web, or you can make your own. As they are GIF/JPG files, you can edit your icons with any image editor.
- You can choose different icons for each menu item.
- You can define one, two or three states for your icons.
- A two-state icon has one state for its normal appearance, and another state for when the mouse moves over it.
- A three-state icon has an additional state which is normally used as an active/pressed-in indicator. However the purpose or availability of this third state may vary with some menu types.
- Click here to find out how to tell the applet which icons it should display.
Here is the extra information you requested about hyperlinks.
- Hyperlinks can be relative or absolute, so you can link both to your site and to other sites.
- If you are using frames, you can target hyperlinks to any frame of your choice.
- You can attach any number of hyperlinks to a menu item, so if you are using a complex set of frames, you can change any or all of the frames.
- Just like HTML hyperlinks, the menu understands special frame targets like '_top', '_blank', etc.
- 'mailto://' hyperlinks work.
- Click here to find out how to attach hyperlinks to your menu items.
Here is the extra information you requested about scripts.
Click here to find out how to insert separators into your menu.
- 'onMouseEnter/onMouseExit': have you seen sites where images and other effects kick in when you move the mouse over something? These effects are created using a combination of 'onMouseEnter' and 'onMouseExit' scripts - one to switch on the effect, one to switch it off. This menu also supports these two events, so that just moving the mouse over menu items can trigger your desired effects elsewhere on the page.
- You can use rollover and click triggers in combination with each other.
- Click here to find out how to attach scripts to your menu items.
» Capacity. This menu supports up to 50 menu items, including submenu items (if available). For greater capacity, or for menus created dynamically or from databases, try the Big Happy Menus variation.
» Tools. An online visual configuration tool is available. Just click menu maker. It can be used to edit the size, appearance and content of your menu.
» Sound effects. The menu can trigger sounds of your choice.
» For navigation menus similar to this but with more features and higher capacity, try these tree menus and sliding menus.
» Custom solutions based on this menu are also available.
» Help. Here is a help page with more information. If you would like to open up ALL the hidden extra information sections on this page simultaneously, then click here.
More Happy Sliding Menus
More Happy Iridium-II Menus