DHTML Menus With Domino
After a spell of designing sites for the web it's nice to get back to the intranet, where all browsers are the same and there's no real need to worry about accessibility. Instead you can let rip and have some fun, using all those fancy DHTML widgets you're too scared to add to a website.
This week one of my tasks has been to take a hierarchical Notes view and produce a TechNet-like drop-down navigation menu from it. You know the kind I mean? Like this:
It took me a while but I got there in the end.
There's a myriad of drop-down menus out there. Most are similar in that they keep the code separate to the actual list of items. You simply supply a list of drop-down items to the function that builds the menu. The structure and syntax of this required list varies from one to another. The trick to getting them to work with Domino is finding one that uses a structure that you can replicate in a View. Something similar to the dTree script I've written about.
After a lot of looking I found Apycom's* DHTML Menu. The required structure is:
Top Level Item 1
|Item 1.1
||Item 1.1.1
|||Item 1.1.1.1
||Item 1.1.2
|Item 1.2
Top Level Item 2
So they simply need to be in order and indented with as many | characters as they are levels deep in the navigation. Adding the |s has to be done in the document. Each time a response is created it inherits the |s from its parent and adds one more to the end. It would be nice to do this in the view - maybe by replacing @DocNumber with as many |s as there are .s in it. But, alas, it's "special" text and so useless to us.
Anyway, have a look at their menus. You can do some pretty fancy stuff with them. There might be an article in it somewhere.
* Apycom are the same company who produce the Java Applet I talked about in this article, back when I thought it was ok to use them. The fact I am talking about them again and that I'm mentioned on their homepage is merely coincidence. Honest.
Two links:
{Link}
- and -
{Link}
Brainjar has their DHTML menu system which works VERY well IMHO with Domino and CB's X Library looks very promising.
-Chris
Another Link for a very flexible and accessible (read: search engines) cross-browser menu system {Link}
Check this link out.
{Link}
or try
{Link} and his menu code at {Link}
Jake,
Not so long ago I got DHTMLCentrals CoolMenus {Link} to work with a Notes view.
I was looking for a clean html list based web menu, but you can't close the ul-tags in views. So you'll end up with a fine stange mess and I gave up on menu that use nesting of ul's and li's.
This one :
{Link}
Is cross platform and I'm using it with notes view for years now (started with version 4). also it's working with no problems i found it better to have a daily agent that export the data to a real js file than to have it actually use the notes view directly, but again it's possible (hint: use @docNumber)
Check out {Link} it's based on an orignal article that was posted on {Link}
I'm in the process of replacing an old JS menu system with this on that's based purely on CSS - much more lightweight and also completely cross browser (once you've added the hacks for IE!)
If anyone's interested, I wrote an article for "The View" magazine that showed a way of dynamically turning the Domino action bar into any DHTML menu you like.
There's a couple of bugs in the sample database (oops!) but if anyone's interested I can send them the updated code.
{Link}
I've also done a version whereby you can use hierarchical menus with the action bar as well, again using any DHTML script you like!
Create dynamic categorized views.
I have had great use of an article from LDD. It uses XML and some JavaScript.
And to add yet another link to the mix:
{Link}
I blogged about this awhile back. It is cross browser, degrades gracefully, and is a really teeny bit of code to get working.
I even cross-linked to it somewhere on CodeStore against an earlier dynamic menu article you had done - I still get referers from that :)