If you're stuck, this is the place to start. There are several resources here:
If you're stuck with menu syntax (i.e., "How do I create a blue item twice as long as normal?"), try the Syntax Assistant helper application. Finally, if nothing helps, you can post or read questions in the system of forums on my site.
I'm getting errors when I load my menus. Help!
Select boxes / Java / Flash / IFRAMEs etc. always show above the menus!
Can I have a 'sm:' item that does something when clicked as well?
Can one item load files in 2 frames at once?
Can items auto-size based on the text within them?
I want a different menu on each page. Do I have to use .JS files?
My URLs or pathnames don't work as I expect.
How do I target another frame, like <a href="..." target="main">...?
Can I load framesets within framesets using this script?
Can I have images in the menus...?
How do I make the menus vertical?
Can I scroll menus larger than the window height?
Can you have separators between items?
Can I trigger menus from individual links in the page?
Can I make the current page item a different colour?
I'm a speed freak. How can I make the script faster?
1) This happens to everyone sometime -- a missed quote mark somewhere can stuff up an entire script. Be sure to count very carefully the number of parameters to the menu construction functions, especially if you've upgraded your version -- read the 'Syntaxes' section carefully, often I add ItemStyle parameters for new features.
2) Try a different browser! This is the best advice I can give you for syntax errors. MSIE has terrible JavaScript error reporting. I recommend Opera 7 or higher for spotting syntax errors as it will show you all functions that have been called to generate the error; you can find its JS Console under the browser "Window" menu. Netscape or Mozilla browsers also have a good JavaScript console, type 'javascript:' without quotes in the location bar to get it.
3) Ensure your menunames don't contain spaces or funny characters, both in the startMenu() and addItem() commands -- this is not supported, just use letters, numbers and underscores. If in doubt, start again from the example code, adding menus one by one.
HTML elements always display below windows widgets like select boxes and IFrames etc, at least in browser versions prior to 6 (NS4 is especially bad) on most platforms. If you're interested WebReference has a writeup on this topic with a longer explanation.
So what can be done about it? I advise careful layout to ensure forms and menus don't overlap. If this is not an option, I have included a script extension in the POP_EXTRAS file that will automatically detect select box positions and hide them as the menus cover them, look that up and try it perhaps.
Alternatively, you can add a WMODE="TRANSPARENT" attribute to your Flash movie. This doesn't work in older browsers, but will allow menus to cover the movie without further modifications.
You can't "put" the menu in any tag -- remember that the script must always be just inside the BODY tag of the page to work. And by default the menus are aligned to the left/top edge of the window. However, you can hover your menus over a table cell, or position them based on percentages of window width (so they're centred in the page, and will remain centred on resize). Read the Advanced Positioning comments in the syntax notes, you can put a hidden anchor tag in a table cell, and tell your menu to position itself relative to that.
Yes. You need a regular 'sm:' item to popout the menu, with an onclick handler to navigate to a file like this:
addItem('Text', 'menuName', 'sm:').onclick='window.location.href="file.html"';
If you're using a frameset, remember to set frameName.location.href instead.
Use a JavaScript command like this:
addItem('Text', 'frame1.location.href="file1.html"; frame2.location.href="file2.html"', 'js:');
Sadly, item sizes have to be specified in pixels with this version, due to the usage of CSS borders in the script. NS4 does very weird things with the padding values of borders, so to cut a long story short, the script needs to have pixel dimensions to compensate for its behaviour. Your can set individual item sizes like this:
addItem('Lots of text', 'menuName', 'sm:', null, 100);
to create an item that is 100px high (vertical menus) or wide (horizontal menus).
Currently, I recommend you look at the "FreeStyle Menu" script available on my website, which is more freeform in nature and well suited to creating menus based on database output or similar (as menus are DIVs in the page). For future versions of this script I am considering replacing CSS border support with a JavaScript border creation routine, I'll have to see how it works out.
You can include your script data inline quite easily. Just make sure that everything stays in the same order: core script, data, the events. Paste the content of the menu data file into a regular <SCRIPT> tag on your page, inbetween the other two, and you can customise your menus for each page like that.
This happens when you're using relative links, e.g. 'folder/file.html'. Remember, all links are relative to the currently loaded HTML document, whether they're links to files, images, or anything. This can be a pain when you're navigating around subfolders, so the best solution is to make all URLs absolute (i.e. from the root of the server) like '/folder/file.html', even though this won't work offline, it works well online.
Alternatively, try this:
var basePath = 'http://www.example.com/folder/';
addItem('Text', basePath+'subfolder/file.html', '');
Create a JS variable with a pathname in it, and add it to all of your items. You can set basePath to 'c:/folder/' or similar when testing offline.
The syntax is: addItem('Help', 'help.html', 'parent.main');
The 'parent.main' tells the script where to find your target frame or window -- it's called 'main', and it resides in the immediate parent of the current page -- your frameset file. Change 'main' to whatever you've called your target frame (e.g. 'parent.content').
You may have troubles with this if you're embedding one frameset file into another frameset file. In this case, try 'top.framesetName.main' or some variant thereof to specify the JavaScript path between frames. If this still doesn't work, you will have to try some JavaScript tutorials to learn the JS window syntax, as it can get too complicated to explain here.
Yes, with a little tweaking. Open up the commented "events" file, follow the instructions listed under the "nested frame support" comment, then replace the original pop_events file with your modified version. This will direct the script to create all 'root' menus in the frame you specify for your first 'root' menu, and all other menus in any frame in which you include the "events" file -- so don't include the "events" file in each frame, only the frames in which you want menus to display.
Then, you need to alter the startMenu() commands to tell the script where your menus can be found. Let's say that you normally display menus in the frame named "content", but sometimes you want to load another frameset inside "content" that contains a frame named "nested", where the menus will display. You need to change every instance of 'content' in your menu position and parent frame name strings to this: '(content.nested?content.nested:content)' which will tell the script to look for menus in both frames.
Definitely. Set an image tag <img src="..."> as part of the item text, or for a cool effect, as the popout indicator (better be a small image thought). Test in NS4, you'll probably have to include BORDER="0" on it as NS4 uses link tags for items. If you want to highlight them, try 'SWAP:<img src="file.gif" border="0">^<img src="file2.gif" border="0">' as your item text, to swap it on mouseover.
Alternatively, you can use background images for items. Simply replace the background colour in the ItemStyle with an image filename, e.g. ItemStyle(....'/images/file1.gif', '/images/file2.gif'....); You may wish to use an image preload script to prefetch the hover image, reducing delays.
Change the 'true' and 'false' parameters near the start of each menu, 'true' means vertical, 'false' is horizontal. Then change the default 'length' of items in the ItemStyle you're using. You'll also want to change the Left and Top offsets of your menus, to make submenus pop out to the side. Make the left offset of submenus larger (roughly the width of your menu) and reduce the top offset.
Certainly. Insert this after your menu data to delay showing menus until page load:
var showRoot = pMenu.menu.root[0].oncreate;
pMenu.menu.root[0].oncreate = null;
// Later on, when we want to show the menu, run these commands:
pMenu.menu.root[0].oncreate = showRoot;
pMenu.menu.root[0].oncreate();
See the POP_EXTRAS file, there's a demo function in there that allows you to do this.
The demo theme for this script uses CSS borders for each item, so you can play around with them if you want. Alternatively, consider removing the borders in the ItemStyles, and creating a new ItemStyle named "separator" that has a "length" of 1px or 2px, with the same over and out background colours. Then insert it into your menus for a separator-bar effect like this:
addItem('Text', 'file.html', '');
addItem('', '', '', separator);
addItem('Text', 'file2.html', '');
Yes, you can. You still need a 'root' menu that points at all the submenus, but remove all the text in it and position it at something like -100,-100 so it shows offscreen. Then, use this syntax for the links on the page:
<a name="blah" id="blah" href="#" onmouseover="pMenu.over('root', 1)" onmouseout="pMenu.out('root', 1)">
This mimics a mouse event on the first item in the root menu, and will show the menu that item is supposed to pop out. Then set your menu to appear relative to the link:
startMenu('mBlah', true, 'page.elmPos("blah").x + 20', 'page.elmPos("blah").y + 20', 100, hBar);
With a bit of tweaking, yes you can. Insert this into your data file, above your menu data:
PopupMenu.prototype.checkItem = function(text, url, type) {
if (url != location.pathname) this.addItem(text, url, type, subM);
else this.addItem(text, url, type, button);
}
This assumes that 'subM' and 'button' are two ItemStyles you've created, with differing background colours, to highlight the item that represents the current page. Use checkItem() in place of addItem() like this: checkItem('Text', '/folder/file.html', '');
Note that it is important that you try this online, and start all your filenames with a slash. If in doubt try putting alert(location.pathname) somewhere in the script to show you the current value of that property, to compare against your filenames.
Nice question :). The script is pretty quick as is, but you can get some small boosts in speed by losing extra code. That means remove the animation, border and shadow code from the data file, all you need in there are the ItemStyle/startMenu/addItem lines as everything else is optional.
If you've only got one menu object in a single frame, you can trim the Events script file down to the bare essentials:
if (!isNS4) pMenu.update(true);
else {
onload=function() { pMenu.update() }
document.captureEvents(Event.CLICK);
document.onclick=function() { with(pMenu) if (overI) click(overM, overI) }
}
Bear in mind that this is the REAL essentials, you won't get fancy repositioning or scrolling going on with this. You may want to include the NS4 onresize bugfix from the original events file, as with this setup NS4 will lose its menus when you resize the window.
Alternatively, if you have lots of menus on your page and creating them all causes a noticeable delay, look in the commented "core" script in the over() function. There are two lines you can uncomment that enable "dynamic menu creation" support, in which the script only creates "root" menus on page load, and others when you point at them. Instructions are in the source; this won't work in Opera 5/6, and I wouldn't rely on it for cross-frame menus, but it'll give you a massive speedup. You'll also have to edit the commented "events" script (again, instructions are in the source), and then replace the original core and events scripts with your altered copies.
OK, now it's time for a Google search. Seriously, try it, just chuck in a few keywords for whatever's got you climbing up the walls. Someone else has probably been just as stuck at some point in time. There's also a good chance that the other person has posted to the forums on my site if Google fails to reveal the solution...
Otherwise, try using using the "Syntax Assistant" helper script, as it has a few internal checks to stop some common mistakes. Finally, try posting to the forums on my site.
This script should run in Opera 5 and 6, with 'run' being the operative word. Their HTML/CSS support is pretty good, but their JavaScript/DHTML engine is extremely limited compared to more full-featured browsers like IE, NS6+, and Opera 7+. The menus should show, but don't expect animation/dynamic updates or text/border/opacity changes. Opera 5 also seems to ignore ItemStyle padding, but Opera 6 is OK. Transparent background colours also seem to be an issue, background image changing is unsupported by Opera 5, and the menu hide timeout is lengthened in both browsers for an unknown reason. If you think pre-v7 Opera users might frequent your site, be sure to test your menus thoroughly!
Early versions of Netscape 6 have a few nasty bugs that can rear their head sometimes. If the contents of your items are bigger than the items themselves, occasionally it doesn't hide menus properly and sections remain onscreen after mouseout. So make sure your items are large enough for anything that they will contain! This also happens occasionally with transparent background colours, your mileage may vary. As always, test thoroughly!
The menus appear on page load completion in NS4, rather that with the page as in the other browsers. This is by design, as otherwise NS4 is quite buggy, see the POP_EVENTS_COMMENTED file and the update() function of the core commented script for more info.
By default, NS4 and Opera 5/6 hide menus on window resize. So I have included code to reload the page when these browsers resize, so menus will reappear. NS4 will also lose its menus when users change the document font size.
Text style changes may induce a little flicker in Netscape 4 as the layer contents have to be rewritten -- other browsers are OK for this as they allow manipulation of classes through the DOM. Also, the cursor changes from a hand to a pointer over the menus in NS4. This isn't a bug as such, you can still click anywhere to activate them. You just can't specify stylesheet cursors in NS4.
If NS4 is crashing, I recommend disabling text/border changes by inserting this into your script data file (either the POP_DATA file or the frameset) beneath your startMenu and addItem lines:
pMenu.noRW = (isNS4 ? true : false);
That will disable text/border/content changing, as that seems to cause the crashes randomly with some page layouts and platforms, especially NS4/Linux.