Summitlake goes to CoolMenus4
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).
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).
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.
- 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”>
b) under the body tag: the JS to drive it in frames
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.
This will ensure that the menu is loaded when
This also helps the resize problems in Opera and NS4
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):
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.
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.
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:
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