views:

291

answers:

2

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&amp;2.8.0r4/build/base/base-min.css&amp;2.8.0r4/build/assets/skins/sam/skin.css"&gt; 
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/utilities/utilities.js&amp;2.8.0r4/build/datasource/datasource-min.js&amp;2.8.0r4/build/autocomplete/autocomplete-min.js&amp;2.8.0r4/build/container/container-min.js&amp;2.8.0r4/build/menu/menu-min.js&amp;2.8.0r4/build/button/button-min.js&amp;2.8.0r4/build/calendar/calendar-min.js&amp;2.8.0r4/build/carousel/carousel-min.js&amp;2.8.0r4/build/json/json-min.js&amp;2.8.0r4/build/swf/swf-min.js&amp;2.8.0r4/build/charts/charts-min.js&amp;2.8.0r4/build/slider/slider-min.js&amp;2.8.0r4/build/colorpicker/colorpicker-min.js&amp;2.8.0r4/build/cookie/cookie-min.js&amp;2.8.0r4/build/paginator/paginator-min.js&amp;2.8.0r4/build/datatable/datatable-min.js&amp;2.8.0r4/build/datemath/datemath-min.js&amp;2.8.0r4/build/editor/editor-min.js&amp;2.8.0r4/build/element-delegate/element-delegate-min.js&amp;2.8.0r4/build/selector/selector-min.js&amp;2.8.0r4/build/event-delegate/event-delegate-min.js&amp;2.8.0r4/build/event-mouseenter/event-mouseenter-min.js&amp;2.8.0r4/build/event-simulate/event-simulate-min.js&amp;2.8.0r4/build/history/history-min.js&amp;2.8.0r4/build/resize/resize-min.js&amp;2.8.0r4/build/imagecropper/imagecropper-min.js&amp;2.8.0r4/build/imageloader/imageloader-min.js&amp;2.8.0r4/build/layout/layout-min.js&amp;2.8.0r4/build/logger/logger-min.js&amp;2.8.0r4/build/progressbar/progressbar-min.js&amp;2.8.0r4/build/swfstore/swfstore-min.js&amp;2.8.0r4/build/storage/storage-min.js&amp;2.8.0r4/build/stylesheet/stylesheet-min.js&amp;2.8.0r4/build/tabview/tabview-min.js&amp;2.8.0r4/build/treeview/treeview-min.js&amp;2.8.0r4/build/uploader/uploader-min.js"&gt;&lt;/script&gt; 

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

A: 

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

Eric Miraglia
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 Kaminski
+1  A: 

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.

Josh L
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 Kaminski