Overview

• Different Menu Orientations
• Different Themes in One Page
• Applying Background Images
• Animation
• Custom Actions
• Custom Actions without Closing Menu Automatically
• Click to Open Submenus
• Build Menu Using HTML
• JavaScript Function Link

Different Menu Orientations

• 'hbr'
• 'hbl'
• 'hur'
• 'hul'
• 'vbr'
• 'vbl'
• 'vur'
• 'vul'

Different Themes

Here is just a brief overview of themes available.

• Office XP
• Internet Explorer
• Panel (background color has been changed to images in this demo)
• MiniBlack

Applying Background Images

Well, you are aleady looking at it. The panel at left uses the Panel theme and I changed the background of submenu and made main menu, main menu items and sub menu items transparent. One doesn't have to change the style sheet, since in CSS, rules specified later can override previous settings. So, this is a quick way of modifying themes.

Animation

It is possible to do animation with JSCookMenu as well, as the following example showing:

Custom Action inside Menu

To create a custom menu item that doesn't use the default actions. One would do the following intead of the usual menu item node:

[_cmNoAction, 'HTML code']

In place of the HTML code, one needs to specify the complete TABLE cell/row information. There are three cases:

1. If it is used inside a horizontal main menu, the code is inside a table cell <TD>.
2. If it is used inside a vertical main menu, it must contain <TD COLSPAN=3> or codes that handle 3 table cells.
3. If it is used inside a submenu, it must contain <TD COLSPAN=3> or codes that handle 3 table cells.

Here is one example, having a palette selector inside a sub menu. The palette selector looks like:

Now put the table inside the menu:

Custom Actions without Closing Menu Automatically

The demo above has one limitation in that the menu mouse listener is automatically called to close the menu. Sometimes, such effects may not be desired, for instance in search boxes. Below are two demos how _cmNoClick instead of _cmNoAction can be used.

Here is a simple search box:

Now put this search box inside a menu.

Usually the search result will change the content of this window, so it is not necessary to consider the closing of the menu. If needed, you can call "cmHideMenuTime ()" to close the current menu as the following example illustrates.

Click to Open Submenus

JSCookMenu 1.4 introduced a new feature that requires clicking to open sub menus, as per requests by many people. Currently, there are several behaviors possible for opening sub menus.

• 0: use default behavior specified in JSCookMenu.js
• 1: hover open in all cases (default in JSCookMenu.js)
• 2: click on main, hover on sub. In 2.0 and later, once a sub menu is opened, starts to open main sub menu with hover.
• 3: click open in all cases

You can either directly modify JSCookMenu.js and instantly make all your existing old theme properties to behave not like the default, or you can modify individual theme properties.

JavaScript Function Link

This demo is added because I am pretty much sick of being asked if this is possible or someone who do not know much about JavaScript or JSCookMenu claiming it could not be done.

The demo basically sets the windows status bar text. If you are using browsers like FireFox, you may not be able to see this text since by default it prevents JavaScripts from manipulating status bar text. The purpose is to prevent link spoofing.