Link to home
Start Free TrialLog in
Avatar of magnex
magnex

asked on

Who can provide me an example of a dynamical menu ?

hello all top-experts,

I need information of how to make a dynamical menu.
I've x items, when I click on one of the items, I want to see a dropdown menu with y possible choices.
I know that there's one example in Iris sandbox, but I'm looking to another one, may be one in javascript or so ?

If I've a good answer, you can get more points.
Thanks,
Magnex
Avatar of zvonko
zvonko

For web (browser client)?
Which Domino version?
What are the items and from where are they fetched?

What else does dynamicaly change in this menue?

Can you drow a menu structure here please...



Avatar of magnex

ASKER

it's for the browser IE5 or above
i've R5.0.10
If it's possible, I want that my menu is base from a view.
In the view, my first column (maybe categorized) is the main menu, and the second colums are all the possible items from that menu
eg
Main1
.......SubMain1.1
.......SUbMain1.2
.......SubMain1.3
Main2
.......SubMAin2.1
.......SUbMain2.2
.......SubMain2.3

The page will look
Main1 - Main2
when I click Main1, I want to see below Main1 a dropdown menu with the three SubMain Items (1.1 1.2 1.3)

This concept you ask for I use now for years. I named it: NaviItems

It is founded from times where no Outline elements where there in Domino. So I created own outlines based on NaviItems view.
I had a form to create NaviItemDoc and displayed this documents in the NaviItems view. This view was my navigator for selecting actions, for example display other views in main frame.

On a NaviItemDoc there where several fields:
1.) ItemPosition; to control item position in the menu.
2.) ItemTitle; for the Item heading
3.) ItemLink; for the action to link to
4.) ItemReaders; a Readers field to hide some items from general users.
5.) AdminReader; a fix field to allow Administrator to be always readers.

Additionally I used sometime a field for the link destination if I had several frames.

It is absolutely enough to have s single ItemTitle and use the prefixed category in the ItemTitle separated by an back slash to let the view generate the category for you.

If this concept is interesting for you I can present it in more details.

So long,
zvonko


Avatar of magnex

ASKER

this is what I'm looking for.
Can you send me an example or give me more details about it.

Thanks in advance,
Magnex
Send me an email to: paunoski@freenet.de

I will try to prepare an example this week.
Next week I am on vacations, sailing.

So long,
zvonko

Sounds like something I'd do too, congrats zvonko :-)
Avatar of magnex

ASKER

Zvonko,

I've send you an email.

Thanks,
Magnex
Avatar of magnex

ASKER

Zvonko,

I've already increase the points with 50 points.
So, you will receive more if you send me your example.
Dont fortget me ;-)
If you don't get an answer from zvonko today and you want an answer quick, let me know and I'll try to work out an example for you, since zvonko is on vacation starting this evening :-)
JM, Magnex,

I sent to you both my example.

In a week or so I am back.

So long,
zvonko

magnex could you send me that example as well. I've been looking for something like this for a while now.
Post your email address here or mail me at jean-marie.geeraerts@philips.com and I'll be glad to send you the example zvonko sent us.
Mail with attachment of the sample has been sent.
Just let us know if you need any assistance with it.
Regards,
JM
ok will do, just received it and will have a look tomorrow at work. Thanks again!
Avatar of magnex

ASKER

zvonko, Jerrith,

This example is not really what I'm looking for.
This is almost just the same like an outline.
What I meanes was, that you have horizontal five tabs.
When you click on one of the tab you see a kind ob pop-up window (below the tab) with the choices.
If you hover the tab with the mouse the popup window is automtically showing with the names of the choices.
A dynamic menu system like in flash.
Here's the link to the example in the Sandbax http://www-10.lotus.com/ldd/sandbox.nsf/ByApplicationNameNJ/2a3a68a850a91ac388256ab10074628f?OpenDocument
I want have the same, but I prefer in Javascript and that the users, by adding a document automatically add and item in the dynamic list.

I hope that I'm no a little bit more clear
PS The name are listed horizontal and not vertical
Choice1  Choice2  ............

More points will follow if Ive the right solution
Just for clarification :
The five tabs are fixed, only the menu items per main menu are dynamic?
What action should be taken when you click on a menu item, should the referenced document be opened or should any action be possible?

If you only intend to create a menu system to view documents from the menu list, that should be fairly easy for me to create you a working sample. If it's the latter, where you need to define the specific actions, I'd first have to look into zvonko's code, but I should manage to provide you with a possible solution.

If you're interested Ruff_rider, I can send you a sample db too.

But before I start, I'd like a bit more info, thanks.
Avatar of magnex

ASKER

Yes, the Main Menu items are fixed.
The menu items for each Main Menu item are dynamic.
If you click on one of the menu items just a link must be generated.
 
Par example.
The user wants to add a new template named Excel Template.
So, he creates a new document.
The first field is the Main Menu item >> Templates
The second field is the menu item from tempalte >> Excel Template
If he clicks on Excel Template, the excel template must be opened in the same frame or in a new frame

Do you have now enough information ?
Thanks for the help
Avatar of magnex

ASKER

zvonko, Jerrith,

This example is not really what I'm looking for.
This is almost just the same like an outline.
What I meanes was, that you have horizontal five tabs.
When you click on one of the tab you see a kind ob pop-up window (below the tab) with the choices.
If you hover the tab with the mouse the popup window is automtically showing with the names of the choices.
A dynamic menu system like in flash.
Here's the link to the example in the Sandbax http://www-10.lotus.com/ldd/sandbox.nsf/ByApplicationNameNJ/2a3a68a850a91ac388256ab10074628f?OpenDocument
I want have the same, but I prefer in Javascript and that the users, by adding a document automatically add and item in the dynamic list.

I hope that I'm no a little bit more clear
PS The name are listed horizontal and not vertical
Choice1  Choice2  ............

More points will follow if Ive the right solution
Okay, should be simple enough.
Give me some time to work out a working sample database for you. I'll get back to you later today...
Sorry, didn't have time to finish your sample database today, so I'll get back to you tomorrow.
A hint: I've put the menu in a subform to put on every form so it is always available.
Okay, I've just sent you a sample database with a few documents and the design elements to create a dynamic menu.

A short description of how I did it:

1) Created a subform with some computed fields to represent the menu. The fields are computed using a DbLookup formula, to get the documents per category and then converting this list to HTML-code to get a list of links to the different documents.

2) Created a stylesheet to make it possible to define styles for menu title and menu items. The styles are also used to make the menu items invisible, unless the title is hovered.

3) On the subform there are javascript functions to show the menu items for the menu item that is being hovered.

Detailed description of the design is as follows:

Subform MenuBar
----------------------------------------------------------
Field : Menu1
Type : text, computed for display
Formula :
DbName:=@Subset(@DbName;-1);
choices:=@DbLookup( "":"NoCache" ; "":""; "Menu Structure"; "Documentation"; 2);
"[<DIV CLASS=\"MenuTitle\"  onMouseOver=\"showMenu(\'Documentation\');\">Documentation</DIV><DIV ID=\"Documentation\" CLASS=\"MenuItems\">]" +
@If(@IsError(choices);
     "No documents available";
     "[" +
     @Implode("<a href=\"/" + @ReplaceSubstring(DbName + "/Menu/" + choices + "\">"; " ":"\\"; "+":"/") + choices + "</A>"; "<BR>") + "</DIV>"
     + "]")

Similar fields for other menu categories can be created by replacing "Documentation" with the wanted category.

JS Header
// setStyleById: given an element id, style property and value, apply the style.
// args:
//  i - element id
//  p - property
//  v - value
//
function setStyleById(i, p, v) {
     var n = document.getElementById(i);
     n.style[p] = v;
}

// hide all menu items except menuItem
function showMenu(menuItem)
     {
     // Hide menu items
     setStyleById('Documentation', 'visibility', 'hidden');
     setStyleById('Examples', 'visibility', 'hidden');
     setStyleById('SourceCodes', 'visibility', 'hidden');
     setStyleById('Templates', 'visibility', 'hidden');
     setStyleById('Other', 'visibility', 'hidden');
     // Set vertical position of the menubox, so it appears 5 pixels below the mouse cursor
     setStyleById(menuItem, 'top', '30px');
     // Show selected menu item
     setStyleById(menuItem, 'visibility', 'visible');
     }

Stylesheet elements needed to display menus:
----------------------------------------------------------
.MenuTitle{
     background-color : #EEEEDC;
     border-style : solid;
     border-width : 1px;
     padding : 5px;
     font-family : Arial, sans-serif;
     font-weight : Bold;
     cursor : Hand;
     width : 100%;
     height : 30px;
}

.MenuItems {
     background-color : #E5E5E5;
     border-style : solid;
     border-width : 1px;
     padding : 5px;
     font-family : Arial, sans-serif;
     width : 100%;
     visibility : hidden;
     position : absolute;
     top : 0px;
     z-index : 4;
}


View : Menu Structure
----------------------------------------------------------
This view is used to get the documents per category for the computed fields on the MenuBar subform.
The view is sorted, categorized on categories and sorted on document title.

View : Menu
----------------------------------------------------------
An alphabetical list of all documents by title.
This view is used to create the URL-reference to the documents from the menu. To make this work as it should all document titles must be unique, otherwise the first document with the same title in the view will be shown.

I hope this explains the design and you will be able to use it, if not, let me know where you get stuck.

Regards,
JM
Avatar of magnex

ASKER

Thanks for the example.
Everything works fine.
This is what I want.
Thanks for your time, the points follow friday(because, I can then increase the points to 200, all what I've then and you will receive an A grade).
Two short additional questions,
1. Is it posible to change the main menu items like Documentation, Example in pictures ?
2. Is it also possible to have in your list of menu items a horizontal line between each item.

Thanks for your time and your help.
Yes, that can be done.
The formula to compute the HTML would have to be changed so that in stead of a text between DIV tags an image is used as menu item and the <BR> (=line break) to seperate entries would be replaced with a <HR> (=horizontal rule).

Let me work out the formula with pictures (takes a bit of effort) and get back to you in a few minutes.
DbName:=@Subset(@DbName;-1);
choices:=@DbLookup( "":"NoCache" ; "":""; "Menu Structure"; "Documentation"; 2);
"[<DIV CLASS=\"MenuTitle\"><IMG SRC=\"/" + DbName + "/Documentation\" onMouseOver=\"showMenu(\'Documentation\');\"></DIV><DIV ID=\"Documentation\"
CLASS=\"MenuItems\">]" +
@If(@IsError(choices);
    "No documents available";
    "[" +
    @Implode("<a href=\"/" + @ReplaceSubstring(DbName + "/Menu/" + choices + "\">"; " ":"\\"; "+":"/")
+ choices + "</A>"; "<HR>") + "</DIV>"
    + "]")

The image needs to be inserted in the database as an image resource and then assign the alias "Documentation" to the image file or use the name of the graphic behind SRC= in the IMG tag.

A little more info:
The HTML-code to display an image is :
<IMG SRC="sourcepathOfImage">
I compute the source path as the path of the database with the name of the image attached to it. (don't forget the '/' to the name of the file from the database path).
As said, you can either use an alias to refer to the image or use the image file name.

Regards,
JM
Avatar of magnex

ASKER

Thanks for the fast answer and your time
You'll receive the points friday
You're welcome. Thanks in advance :-)
Avatar of magnex

ASKER

Jerrith,

I've already increase the points.
But one extra question, is it also possible that we can give in URL links, in place of Uploading a file ?
Do you intend to directly link to that URL from the menu?
Avatar of magnex

ASKER

yes, to another database or to another view in this or another database.
And what must I add to my href to say that I want to open the url in a new window or a popup window
Okay, to make the menu so that it directly links to an attachment or a provided link, you could add a computed text field to the menu item form that computes the URL to be used in the menu.
To open in a new window construct your link as follows:

<A HREF="/addres.to.go.to" TARGET="_blank">Link text</A>

The target= defines where the link is to be opened. This can have the following values:
_self : in the current window/frame
_top : in the top frame of the current window
_blank : in a new window
NameOfFrame : in the frame called "NameOfFrame" in the current frameset.

Is this clear enough or do you want me to work out the formula for the computed URL field?
Avatar of magnex

ASKER

Jerrith,
I'm still not oout of my problem.
This is the reason why I've increase the points again.
Again two questions.
1. My previous problem is not solved, I've added a text field(named URL) in my menu where I can wright my URL instead of using my attachment.
But it will not open my url.
The form properties are so that he opens automatically the first attachment.
so, I change the computed text in your menu item form
@If(!@Attachments; @URLOpen("http://www.notes.net"); "");
But it desn't work :-(
2. THe menu system works, but I've only one remark, when I mouse over an item, I see the submenu items, that's oke, but I want that it disappear if I don't mouse over anymore over one of the items.
Now, the subitems stays visible.

Thanks for your time and your help
ASKER CERTIFIED SOLUTION
Avatar of Jean Marie Geeraerts
Jean Marie Geeraerts
Flag of Belgium image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of magnex

ASKER

Thank you for the help and the time.
Last little question, for a web-experts like you, it will be no problem.
One of my subitems is a link to a form in a new window,but know I want to close that window, if I use window.close(), he ask me a verification, how can I close the window, without that question ?????????
If I open a new window with the command window.open(...) and use then the command window.close(), I've no problem.
But because we use a href command I've this problem.
To solve this problem, you'd have to change the popup-menu so that there are no <A HREF=..."> tags created, but a JavaScript function is called to open the url.

To this function, you would pass two parameters : the url to open and the target the url should be opened in.

This function could look something like this :
function openURL(url, target)
   {
   if (target=='_blank')
      {
      window.open(url, "", "");
      }
   else
      {
      location.href=url;
      }
   }