Js Cook Menu rel. 2.02

JsCookMenu 2.02

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
Not all themes support all the orientations. Please check each individual's documentation.

* 'hbr'
Scripts Download Forums SourceForge
JSCookMenu
JSCookTree
* 'hbl'
Scripts Download Forums SourceForge
JSCookMenu
JSCookTree
* 'hur'
Scripts Download Forums SourceForge
JSCookMenu
JSCookTree
* 'hul'
Scripts Download Forums SourceForge
JSCookMenu
JSCookTree
* 'vbr'
Scripts
Download
Forums
SourceForge
JSCookMenu
JSCookTree
* 'vbl'
Scripts
Download
Forums
SourceForge
JSCookMenu
JSCookTree
* 'vur'
Scripts
Download
Forums
SourceForge
JSCookMenu
JSCookTree
* 'vul'
Scripts
Download
Forums
SourceForge
JSCookMenu
JSCookTree

Different Themes

Here is just a brief overview of themes available.

* Office XP
Scripts Download Forums SourceForge
JSCookMenu
JSCookTree
* Internet Explorer
Scripts Download Forums SourceForge
JSCookMenu
JSCookTree
* Panel (background color has been changed to images in this demo)
Scripts
Download
Forums
SourceForge
JSCookMenu
JSCookTree
* MiniBlack
Scripts Download Forums SourceForge
JSCookMenu
JSCookTree

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.
Toggle Code Display
Animation

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

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 .
2. If it is used inside a vertical main menu, it must contain or codes that handle 3 table cells.
3. If it is used inside a submenu, it must contain or codes that handle 3 table cells.

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


Toggle Code Display

Now put the table inside the menu:
File Palette
Open
Save
Options




Toggle Code Display

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:
Toggle Code Display

Now put this search box inside a menu.
Search

Toggle Code Display

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.
Search

Toggle Code Display

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.
Heng Yuan's home
All Projects
Contact
YooLex
YooParse
CookMail
CookScript
CookSwing
JSCookTree
JSCookMenu
Threaded Mud Client
ChDay Chinese Web Counter
Bin2Obj
CXTerm
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.
Begin
Action
Toggle Code Display