Coolmenus 4

Summitlake goes to CoolMenus4

dmtmlcentral logo  

We’ve converted the entire Summitlake.com site over to a new menu system, Coolmenus4 by dhtmlcentral.com and author Thomas Brattli. JavaScript menus are common on commercial sites, but finding good ones that are not also expensive proprietary code is not easy. You can reach the Coolmenus website by clicking their logo above.

Friend and fellow web project instigator Gary and I have been looking for a good JS menu system for some time. I found CoolMenus being used by the same YaBB website that supplies our BB Forum. I’ve hacked simple JS scripts for years, but never spent any serious time with it. I’m beginning to like JavaScript.

Most of this article is Tech Talk. If you need additional “Help” to use the drop-down menus, the code installation is a failure. It’s supposed to be intuitive and foolproof from the user’s point of view.

We know there are bugs and quirks. For example, if you leave your cursor over the CM menu during the page load, while the menu is being drawn, you will probably get a browser JS error (but the page will still work).

We put the all main Summitlake site departments into framesets, similar to the treatment for Recipes and Humor. The Perl “dumb nav tabs” went away, replaced by “smart” Javascript tabs and cascading drop-down menus. The menu items go down three levels at our site. Clicking a menu item brings up the link as a standalone html page (by “standalone, we mean the drop-down menus go away).

Since some of our links are to other indexes, or even to remote sites, we decided NOT to try to make the drop-down menus persistent everywhere you go. We don’t want indexes created under indexes, or Coolmenus drawn under parent Coolmenus frames. If you have problems getting rid of menus when you want to go somewhere else, let us know.

The left-hand frame or pane in a department index is our familiar Perl autolist. It still lists all viewable pages in that department. Clicking a link makes that page appear in the right hand main “body” panel, and the seamless menu frame remains available for navigation. (Perl cgi is never included in your “save as” download, and autolist only works with a ton of other site-specific hardcode anyway).

If you’re even thinking about adding a drop-down menu system to your site, please see the dhtmlcentral site. We are NOT a good resource for Javascript questions yet. please do NOT send questions and snippets to us for analysis of how to get your site working, because we won’t be able to handle them.

What we WILL do is share what we’ve learned about implementing Coolmenus.

  • The Coolmenus site is well documented, but you have to look at the downloadable examples and take them apart to see how to put together working pages yourself.
  • Almost everybody knows how to download a “complete” working web page, JS and all. Feel free to download this page (or any other page on the site) and see what parts are required and how we put them together.
  • We found in some cases that the downloaded examples did not at work as well as the Coolmenus site, which of course is also downloadable. We learned as much from the working site page, and used some of the parts.
  • You need to know enough CSS to make or modify your own cascading style sheets. You need to know enough JavaScript to localize the menus to your own site.
  • Some of the var usages are obscure, and some of the function calls (top.fromMain.Location.reload()) that seem redundant really are not. When making a change, we strongly suggest having a fallback to the most recent unmodified original. Having an application capable of making A-B file compares, such as TextPad, is recommended.
  • Following is (1) Brattli’s own short description of Coolmenus4, and (2) our notes and setup guide using our own site as an example.

1. About Coolmenus4 (from dhtmlcentral website):

Main features- Unlimited submenus
– 99% Browser compatibility (the web can be so tricky that I can’t say 100%)
– Very customizable
– Very fast (considering the browser compatibility)News and changes in version 4 announcement:- It now actually works cross-browser.
– Arrow support added (will be automatically shown if there are submenus)
– The coolmenus.js file is now a lot lighter, from now on I’ll call that the core file and I’ll be adding new features to another js file. That means that you more then before can have only the parts of the code you need.
– NOTE: Simple frame support is added to the current version.
– You no longer set the colors or style in the script. You make CSS classes in a stylesheet that you tell the script to use. You can set classes on levels or on individual menu items. This makes it easier to customize the look of the menu. It does however require some css knowledge.Everyone that uses coolMenus 3 WITHOUT frames should upgrade as soon as possible. Though it does require some tweaking of the settings of the script to upgrade I assure you it’s worth it. See the Upgrading to CoolMenus 4 tutorial for help.

2. Notes for the Summitlake Site Setup and Page Organization

COOLMENUS FOR FRAMES
Copyright (c) 2001 Thomas Brattli (www.dhtmlcentral.com)
This site uses the coolMenus. You can get it for your own site by
going to http://www.dhtmlcentral.com/projects/coolmenus
1. FRAMES INDEX: Problem: Despite the fact that the frameset1 example has no css and no script, production pages are generating error warnings (but loading). Solution: we have shown that no css and no js script tags are needed in the frameset index. There is probably a missing CSS tag in body or menu, or dissimilar CSS in body and menu, or a missing or malformed script. Sorry, that doesn;t narrow it down much, but it probably isn’t the frameset.2. PAGE BODY: What has to be added to convert a page if you already have the CoolMenus header:a) within head tags: the css for the coolmenus styling and drawing
<link href=”/resources/css/coolmenus_1c.css” mce_href=”/resources/css/coolmenus_1c.css” rel=”stylesheet” type=”text/css”>
</head>
b) under the body tag: the JS to drive it in frames
<script src=”/resources/js/coolmenus_frame.js” mce_src=”/resources/js/coolmenus_frame.js” type=text/javascript></script>both of the above are needed to allow the header frame to draw into the adjacent frame. WRONG CSS URL or NO JS TAG results in cutoff menus when it hits this page body page.an UNCONVERTED PAGE will not accept the menu draw, level 0 links will not work, and mouse over the CM header displays Warning “Error on Page” in the bottom browser message bar.

Note: There is no harm in converting a page which may also be viewed “raw”, without a frame header. It works the same with no error shown.

RECOMMENDED IMPLEMENTATION: either (a) convert all the frmMain pages that could possibly be displayed, or (b) have links to them (such as an autolist menu side panel) load to _parent or _top. Load to _blank also supported.

Currently slmenus_frame.js loads links into _top, making the CM “go away”. The same could be done for autolist. Unfortunately, that makes the autolist frame go away too.

3. COOLMENUS HEADER: No matter what frame it’s in, CoolMenu must have a MATCHING css. All the javascript pieces (or links to external js scripts) must be contained here. (We have backed all the body script code out of the html body and into the called standalone slmenus_frame4.js, but the original from menu1.htm is reproduced here):

a) in head: <SCRIPT language=JavaScript1.2
src=”/resources/js/coolmenus4.js” mce_src=”/resources/js/coolmenus4.js”></script>
b) in head before body:
<LINK href=”/resources/css/coolmenus_1c.css” mce_href=”/resources/css/coolmenus_1c.css” type=text/css rel=STYLESHEET>
<META content=”MSHTML 6.00.2800.1126″ name=GENERATOR></HEAD>
<BODY marginheight=”0″ marginwidth=”0″>
c) script flow in body (condensed; can be linked as script refs):
function cm_bwcheck()
var bw=new cm_bwcheck()
oCMenu=new makeCM(“oCMenu”)
//Frame properties
oCMenu.frames = 1
//Menu properties
//Background bar properties
//Level properties – ALL properties have to be specified in level 0
//EXAMPLE SUB LEVEL[1] PROPERTIES – You have to specify the properties
you want different from LEVEL[0] – If you want all items to look the
same just remove this
//EXAMPLE SUB LEVEL[2] PROPERTIES – You have to spesify the properties
you want different from LEVEL[1] OR LEVEL[0] – If you want all items to
look the same just remove this
/******************************************
Menu item creation: [define all the menus]
myCoolMenu.makeMenu(name, parent_name, text, link, target, width, height,
regImage, overImage, regClass, overClass , align, rows, nolink, onclick,
onmouseover, onmouseout)
*************************************/
oCMenu.construct()

/*OPTIONAL LINE:
Because some browsers (especially our old friend NS4)
have problems with this initial frame load you might
want to add a line similar to this (replace MyFrameName
with the name of you frame):

top.frmMain.location.reload()

This will ensure that the menu is loaded when
the first page is loaded in the main frame.

This also helps the resize problems in Opera and NS4
*/
top.frmMain.location.reload()
</SCRIPT>

4. makeMenu parms for frames: the “target” parm is the one after the link. It may be ”, ‘_top’ or ‘_blank’. ‘_top’ will load into _parent in the coolmenus specification, so you lose the menu, as you need to. You will run into the usual frames pitfalls if you do not load into _top or _blank, for example, loading a page that links back to a coolmenus frame. (In theory you can handle this with another JS that disallows a page from loading into a frame).

Allowing all site pages to load into frames in a large site is probably NOT PRACTICAL, since each page that can load under a frame must be retrofitted with the link and script in (1) above. The whole site would have to be overhauled to work under CoolMenus.

1/27/03 – but that is exactly what we are doing. Links to remote sites, such as “Cool Sites”, will probably have to be checked to make sure they load into blank or parent.

5. frames menu1c.html will only work in a frameset. It errors as a standalone page. It is derived from downloaded examples frameset1/menu1, which also only works in frames. There is very little common code to support non-frames and frames CM versions.

6. testindex.shtml is a prototype no-frame standalone. This was migrated to the home and Commentary main indexes. It uses dhtmlcentral.css. It seems to be immune to the menubar drift problem. Home index.shtml may use a background bar which makes the menu appear to drift. Solution to the drift problem: get rid of the background bar, or colored table cell, or both; fix the parms in the menu setup script slmenus, slmenus_frame or menu2.cs, for example (the script containing the actual menu names and links).

7. CSS: EVERY page that either contains or supports CoolMenus4 must have a CSS to draw the menus. For a standalone page with a menu, we’re still using the dhtmlcentral.css. For frames, we have found that the menu, body and frameset itself must all have the css. We’re using a custom coolmenus_1c.css. It is a cloned coolmenus.css in the frames_version example, with changes to font sizes and colors to match the styling in the standlone CSS. We believe that the only reason for the two different css files is that the scripts for standalone CM and frames CM call styles by different names. The names and CSS could be combined for efficiency if the scripts were reworked.

Menu_arrow.gif: This is stoopid, but the only way we have been able to get the menuitem arrow to display consistently on our iMac is to shorten the filepath ref to “menu_arrow.gif” (no higher level nodes), and put a gif image in every directory containing a main page or _body. Using oCMenu.onlineRoot makes the arrow work on the Mac, but fails so far under Windows.

8. Menu item creation scripts:

Menu item creation syntax for the function call (some parms optional):
myCoolMenu.makeMenu(name, parent_name, text, link, target, width, height, regImage, overImage, regClass, overClass , align, rows, nolink, onclick, onmouseover, onmouseout)

As you would expect, the scripts to support a frameset and a standalone html page with menus are different. These are the scripts that define the menu item names and links for your site. You can (and often must) tweak the parameters to get them to fit your page and spacing requirements. The scripts are useless until they point to URL’s on your site, of course.

a. Standalone pages: we use script slmenus3.js, adapted from CM example script dhtmlcentral.js. The actual menu-building code that is specific to the site has been broken out into a separate called function, which can be found in a separate SL_Menus.js file.

9. Page setup and organization

Overview: Whether for standalone or frames pages, the Coolmenus system requires one or more scripts that should never be changed (“source” files or code scripts), one script that must be changed to localize menu items to your site, and one more more css style sheets to support the draw routines.

Any html page with any valid extension (.html, .htm, .shtml, etc.) can be set up for a standalone CM menu. The menu will be drawn regardless of how the page is accessed (if the browser is recent and supports JavaScript and style sheets).

A page set up to support frames pages calls different scripts than a standalone page, so could not be configured as shipped to also draw menus as a standalone page. However, a page set up to support a frames menu draw can be viewed used anywhere as a standalone page, with or without a frameset; it is never set up to draw a menu, but only to allow a frameset menu to draw across the border separating the frames menu from the frames main page or body.

COMPONENTS and ORGANIZATION: Here is how we are using CoolMenus4 on our site.

A. STANDALONE PAGE (example: home index.shtml)
css: dhtmlcentral.css  
<body> general.js (source code file)
wins2.js (source code file)
coolmenus4_sulay.js (COMMON source code file)
SL_Menus.js (must load before slmenus3.js)
slmenus3.js calls common SL_Menus.js function
B. FRAMESET INDEX PAGES: (example: wp_1computers/index.php)
css: coolmenus_1c.css (sitewide)
frame _body <body> coolmenus_frame.js (source code file)
frame menu1d.htm <head> coolmenus4_sulay.js (COMMON source code file)
frame menu1d.htm <body> SL_Menus.js (must load before slmenus_frame.js)
slmenus_frame4.js calls common SL_Menus.js function
all other pages – css: coolmenus_1c.css (sitewide)
all other pages <body> coolmenus_frame.js (source code file)
C. double-duty PAGES: (in analysis: Friends Gallery, More Photo Gallery, Slideshow)
problem: Some pages may be required to load standalone, or as part of a frameset, depending on the location and configuration of the calling URL. We configured pages that load from Coolmenus links to load into parent, or blank (not a problem). But, if called from index links within a frame, these pages may also load into the frameset. Downside: Menus operate within Mac and Win, but arrow display is inconsistent.We don’t think a page can be configured for both standalone and frameset duty.
solutions: (a) force the page to load into parent or blank. Downside: this results in living without the Coolmenus frame.(b) force the pages to load into parent or blank, but build in standalone CM support. (Currently, frames support is built in).(c) research menu_arrow image URL and onlineRoot usage more.

Script usage: you want to get all the common code possible out of the html pages and into .js modules (files). Not only does this reduce page size and load time, the browser only has to download the code to the client machine once when it is supplied as an external file and called by reference to the file name. Call it like this:

<script src=”/resources/js/coolmenus_frame.js” mce_src=”/resources/js/coolmenus_frame.js” type=text/javascript></script>

10. Mac, PC and browser differences: We tested our installation on MacOS 10.1 and 10.2 with IE5.2, and on Win2000 with IE6 and Mozilla 1.21. One fix almost always has a consequence somewhere else. After installation configuration and the test shakedowns, you should acceptance test your Coolmenus site installation on a VARIETY OF BROWSERS AND PLATFORMS. IE5 on Mac is particularly good because of its very strict html and JS edits.

11. DISCLAIMER: Summitlake.com is not responsible for changes users make to websites, or for errors or omissions in notes or code users may have downloaded. We are not affiliated with dhtmlcentral.com. We like the concepts and code models demonstrated here, but have no way of assessing their suitability for others’ projects or skill levels. Caveat lector.

narrative ©Alex Forbes February 1, 2003

2,608 total views, 22 views today