I checked in some changes over the past few days to support both horizontal menus (aka MenuBar) and vertical menus statically appearing on a page, rather than popping up. i.e., menus that are always visible.
Give it a whirl. For now, see the test_Menu.html test file for a demo. (Eventually we'll get the demos into the new doc.)
The horizontal menu is called MenuBar and is similar to the "File" menu on all windows/mac applications; should be familiar to everyone. Previously we recommended using Toolbar but this is more menu-esque since you don't have to click to open the sub-menus.
The vertical menu is actually an enhancement of the old Menu widget, letting it appear statically on the page, rather than as a popup. Just don't specify the contextMenuForWindow or bindDomNodes parameters when initializing a Menu. widget.
As usual, keyboard arrow key (plus ESC and TAB) navigation, as well as BIDI, are supported out of the box.
For the vertical menu, without CSS modification it appears just like a popup Menu.... but typically I think people will want it to extend the full length of the page, so I modified the CSS in the test file to do that (putting the background shading on the entire left column, and hiding the borders of the Menu.
Bill
Selection issue
This is a nice demo. I just noticed that if I select text in the right pane and then mouse over the menu, then the selection is lost.
selection
Hi Les,
That's a good point. This is from the code for context Menus where mousing over does a focus (I forget why, maybe for a11y).
It doesn't cause a problem for context menus but I can see how it's undesirable for MenuBar or a vertical static Menu. I'll look into it.
=========
Bill Keese
Project Lead (aka BDFL) of Dijit
hopefully fixed
I just checked in a rather large change to defer focusing until you click something, or tab into the MenuBar (or vertical menu). Hopefully it's working now.
See the change comment for details, and see if the change makes sense.
PS: as usual it'll take 24 hours (or less) for the change to propogate to archive.dojotoolkit.org.
=========
Bill Keese
Project Lead (aka BDFL) of Dijit
I think a desired behavior
I think a desired behavior would be for arrowing left or right on an expanded menu (horizontal) would open the associated adjacent menu, as well.
agreed
I agree, Cougar added this a day or two after I checked in the MenuBar code, in #8326.
Should be working now.
=========
Bill Keese
Project Lead (aka BDFL) of Dijit
Is it possible to create MenuBarItem without childs (dijit.Menu)
div class="tundra" id="menubar" dojoType="dijit.MenuBar"
div onClick="alert('I am single');" dojoType="dijit.MenuBarItem" span SingleItem span
...
PopupMenuBarItem
Nikolai was asking about this too. I can copy the naming for Menu and have both a MenuBarItem and PopupMenuBarItem class. I.E., rename MenuBarItem to PopupMenuBarItem and then create a MenuBarItem class for things that don't have a drop down. Does that make sense?
I wonder though why you want this. I've never seen a MenuBar where one of the choices doesn't have a drop down. What use case are you thinking of?
=========
Bill Keese
Project Lead (aka BDFL) of Dijit
item without drop down
Please, look at http://www.nhl.com: auctions, fans and fantasy menu items without drop down. It's not a button or something else...
I think it is a usual case.
thanks
Ah OK, cool, thanks for the example.
=========
Bill Keese
Project Lead (aka BDFL) of Dijit
PopupMenuBarItem and MenuBarItem
OK, I made two class, PopupMenuBarItem (previously called MenuBarItem, analogous to PopupMenuItem), and a new widget called MenuBarItem for simple clickable items in the MenuBar.
=========
Bill Keese
Project Lead (aka BDFL) of Dijit
bug or feature
I checked latest build. MenuBarItem works fine!
But there is a bug in PopupMenuBarItem. I shoud click on MenuBar or on PopupMenuBarItem before to open popup menu.
onMouseOver event should opens popup menu.
http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/test_Menu...
feature
Hi Serg,
Yah it's designed that way on-purpose. For some reason people really seem to want MenuBar to work exactly like a menu for a an application (like Internet Explorer itself), in which case you need to click the first time, but then just moving the mouse will open the other context menus... so you only need to click once in order to see every submenu.
I suppose we could add an option to not require that first click, although not sure what to call it, maybe openOnHover.
=========
Bill Keese
Project Lead (aka BDFL) of Dijit
need option
Ok! Would be nice to have this option.
Bug
Bill this is really great work. There seems to be a bug in MenuBarItem. When you mouseover a MenuBarItem after opening a PopupMenuBarItem the JS error popup is undefined occurs everytime. This is in the nightly from 1/13/09.
working for me...
Hmm, I tried test_Menu.html, opening the "File" menu and then mousing over "Edit". I don't see any errors though. Does it only happen on a certain browser? Or maybe it's already been fixed?
=========
Bill Keese
Project Lead (aka BDFL) of Dijit
I want to assign some keyboard shortcuts to menu items
Can I add shortcut keys to menu items, and show it on the menu?
By the way, I'm concerned that the behavior of menubar is quite different from real one.
keyboard shortcuts
> Can I add shortcut keys to menu items, and show it on the menu?
You can display shortcuts using the accelKey parameter. You have to write your own code to catch the shortcut keys though, probably a handler on using document.attachEvent() on IE and document.addEventListener() on other browsers. (The fancy function calls rather than a simple dojo.connect() are to catch the keystroke before it goes to whatever has focus.
> By the way, I'm concerned that the behavior of menubar is quite different from real one.
No, it's quite similar now. The only difference AFAIK is that the first popup menu initially opens just by hover, rather than needing to click on it, but that can be controlled by setting popupDelay = -1.
What exactly was the issue you were concerned with?
=========
Bill Keese
Project Lead (aka BDFL) of Dijit
Getting node values from menu clicks
I've seen a lot of demos that use the menu items with alerts in their onclick events but in my usage I am binding to a tree and would like to do things based on an id value of the node that the context menu is bound to and clicked on.
Are there any demos/examples of this?
well I made a global variable called showHideId and used this code to accomplish the above.
var node = dijit.getEnclosingWidget(e.target);
if (node.item.children != "") {
// the node has children - focusing the node will close the context menu
tocTree.focusNode(node);
} else {
//console.dir(node.item);
showHideId = node.item.id;
// we have a "leaf" node - do some stuff or just do nothing and the menu will display
}
});
});
good
Good, that will work assuming you don't have submenus.
You could also connect to _openMyself on Menu itself:
=========
Bill Keese
Project Lead (aka BDFL) of Dijit
I also have a problem
I also have a problem connecting a context menu to a tree, but only if the Tree is DnD enabled, A normal Tree works fine with the methods described above. Any idea how how to get this working on a DnD enabled Tree ??
regards
Roberto
I just discovered that this
I just discovered that this fails only on Firefox, on Safari, the Context menu of a DnD enabled Tree works perfect. Will file a bug ticket for this.
keyboard shortcuts
What exactly was the issue you were concerned with?
__________________________________________________
http://www.bagsdeal.com
Cool menu bar
I just discovered dojo and I'm still playing with it. I love the menu bar in your example and I'm thinking of using it for my next project. The only question I have is how this would impact my SEO.
With a traditional HTML menu bar, it is a direct link to my sub pages. With the dojo menu bar, would the spiders understand that it is a link and follow it to my sub pages? I still want the spiders to crawl my site and just relying on a site map is bad SEO.
Any advice would be great.
Thanks.
Regards,
Simon
Learn how to write a cover letter that will get you the job.
firefox problems
I just found out about dojo and i really like the menu bar. BUt I allready had some troubles by in firefox. I had some problems with selecting the text. Sounds familiar??
Regards,
Ms.Trotter
specialist in anxiety cures
Just Found DOJO!
I just found this site and I was wondering how bad the firefox problems are with this menu?
90% of my visitors use firefox so, would using this menu hinder my visitors navigation or what?
Thanks for the time!
Regards,
Adam Perschbacher
Work From Home Today!