YUI MenuBar not showing submenus

Question

So I'm trying to learn the YUI toolkit, and I'm having issues with my menubar having usable submenus. If I use the following code:

<html>
<head>
<title>Web</title>

<!-- Yahoo UI --> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css&2.8.0r4/build/base/base-min.css&2.8.0r4/build/assets/skins/sam/skin.css"> 
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/utilities/utilities.js&2.8.0r4/build/datasource/datasource-min.js&2.8.0r4/build/autocomplete/autocomplete-min.js&2.8.0r4/build/container/container-min.js&2.8.0r4/build/menu/menu-min.js&2.8.0r4/build/button/button-min.js&2.8.0r4/build/calendar/calendar-min.js&2.8.0r4/build/carousel/carousel-min.js&2.8.0r4/build/json/json-min.js&2.8.0r4/build/swf/swf-min.js&2.8.0r4/build/charts/charts-min.js&2.8.0r4/build/slider/slider-min.js&2.8.0r4/build/colorpicker/colorpicker-min.js&2.8.0r4/build/cookie/cookie-min.js&2.8.0r4/build/paginator/paginator-min.js&2.8.0r4/build/datatable/datatable-min.js&2.8.0r4/build/datemath/datemath-min.js&2.8.0r4/build/editor/editor-min.js&2.8.0r4/build/element-delegate/element-delegate-min.js&2.8.0r4/build/selector/selector-min.js&2.8.0r4/build/event-delegate/event-delegate-min.js&2.8.0r4/build/event-mouseenter/event-mouseenter-min.js&2.8.0r4/build/event-simulate/event-simulate-min.js&2.8.0r4/build/history/history-min.js&2.8.0r4/build/resize/resize-min.js&2.8.0r4/build/imagecropper/imagecropper-min.js&2.8.0r4/build/imageloader/imageloader-min.js&2.8.0r4/build/layout/layout-min.js&2.8.0r4/build/logger/logger-min.js&2.8.0r4/build/progressbar/progressbar-min.js&2.8.0r4/build/swfstore/swfstore-min.js&2.8.0r4/build/storage/storage-min.js&2.8.0r4/build/stylesheet/stylesheet-min.js&2.8.0r4/build/tabview/tabview-min.js&2.8.0r4/build/treeview/treeview-min.js&2.8.0r4/build/uploader/uploader-min.js"></script> 

<!-- Google Gears -->
<script type="text/javascript" src="js/gears_init.js"></script>

 <script type="text/javascript" src="mainpanel.js"></script>


<style type="text/css"> 

.yuimenubaritemlabel {
  margin: 0px; 
  padding: 2px; 
}
</style> 

<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function() { 
    makePanel();
});
</script>
</head>

<body class="yui-skin-sam"></body>
</html>

With the following javascript:

function makePanel() {
    var Dom = YAHOO.util.Dom,
       Event = YAHOO.util.Event, 
       MenuBarItem = YAHOO.widget.MenuBarItem;

    var body = document.body;

var divNames = ['top1', 'bottom1', 'left1', 'right1', 'center1']; 
for ( var i in divNames ) { 
    var div = document.createElement('div');
    div.id = divNames[i];
    div.style.border = 0; 
    body.appendChild(div);
}
var topDiv = document.getElementById('top1'); 

var layout = new YAHOO.widget.Layout({
    units: [
        { position: 'top', height: 25, body: 'top1' },
        { position: 'right', header: 'Right', width: 300, resize: true, collapse: true, scroll: true, body: 'right1', animate: true},
        { position: 'bottom', height: 20, body: 'bottom1' },
        { position: 'left', header: 'Left', width: 200, body: 'left1', collapse:true},
        { position: 'center', body: 'center1'}
    ]
});
layout.render(document.body);

var menuData = [ 
 { text: "File", },
 { text: "Help", }
 ];

var menuBar = new YAHOO.widget.MenuBar("menubar", { 
                        hidedelay: 750,  autosubmenudisplay: true,
                        lazyload: true, 
                        itemdata: menuData,
                        effect: { 
                            effect: YAHOO.widget.ContainerEffect.FADE,
                            duration: 0.25
                        }
                     });
/*var fileMenu = menuBar.getItem(0);
if ( fileMenu != null ) { 
   fileMenu.addItem({ text: "Log off", id: "logoff", onclick: { fn: onLogoff } });
}*/
menuBar.render( document.getElementById('top1') );

};

I cannot get submenu's to work, using either syntax:

 var menuData = [ 
      {text: "File", 
       itemdata: [ "New", "Open", "Close" ] } 
      {text: "Help" 
       itemdata: [ "Welcome", "About" ] } 
     ];

or

 var menuData = [ 
        { text: "File", 
          submenu: {  
                id: "filemenu", 
                  itemdata: [ "New", "Open", "Close" ] }
        } ];

Any ideas on where I'm going wrong? I'm using YUI 2.0.

score 1 · Answer 1 · answered Feb 01 '10 at 21:28

1

For anyone that might find this page in the future, instructions on how to use MenuBar module within a YUI Layout can be found here:

http://developer.yahoo.com/yui/examples/layout/menu_layout.html

Link from Dav Glass @ the YUI Forums.

answered Feb 01 '10 at 21:28

Josh

1,277
2
14
16

Excellent link, yet if you look at both that link, and my highly condensed version, you'll see that just about the only thing I do differently is the dynamic divs 'top1, center1, etc.' What am I doing wrong such that I can get a menu, but no submenus? – Chris K Feb 02 '10 at 19:12

score 0 · Answer 2 · answered Jan 26 '10 at 06:47

0

Hey, Chris. Good to see an old colleague out on the interwebs.

Just wanted to suggest that you post this on the YUILibrary forums -- http://yuilibrary.com/forum/ (specifically here: http://yuilibrary.com/forum/viewforum.php?f=89). That's the best place to get it in front of Todd (who wrote Menu) and others who use YUI on a daily basis.

Regards, Eric

answered Jan 26 '10 at 06:47

Eric Miraglia

1,209
8
9

Yeah, that was going to be my next step... I'm just so used to really great answers from StackOverflow it's my first stop nowadays. Thanks for the tip! – Chris K Jan 26 '10 at 14:18

YUI MenuBar not showing submenus

2 Answers2