logo

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.

Comments

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

    • avatar
    • Don
    • Wed 24 Nov 2004 10:12

    Another Link for a very flexible and accessible (read: search engines) cross-browser menu system {Link}

    • avatar
    • Stu
    • Wed 24 Nov 2004 10:28

    Check this link out.

    {Link}

    • avatar
    • tq
    • Wed 24 Nov 2004 11:07

    or try

    {Link} and his menu code at {Link}

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

    • avatar
    • Yuval
    • Wed 24 Nov 2004 16:50

    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)

    • avatar
    • Jono
    • Thu 25 Nov 2004 01:57

    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!)

  3. 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!

  4. Create dynamic categorized views.

    I have had great use of an article from LDD. It uses XML and some JavaScript.

    • avatar
    • Rock
    • Sat 4 Dec 2004 19:41

    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 :)

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Wed 24 Nov 2004

Share This Page

# ( ) '

Comments

The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

More Content