How do I remove the drop-shadow from a YUI menu at runtime?

Question

I have a menu-button that I want to remove the drop-shadow from. I would like to not have to instantiate a menu object first (since it requires me to specify a div in the DOM to attach it to). I am able to instantiate a menu in the JS, but when I try to remove the drop shadow via: this.menuButton.getMenu().cfg.setProperty('shadow', false); the drop shadow still appears. I checked the cfg object in the JS debugger and shadow is set to false, but the shadow still appears.

Another option would be to remove the shadow div from the dom, but that doesn't seem like the right thing to do.

score 0 · Accepted Answer · answered Jan 17 '11 at 07:43

I did eventually create a div in my DOM to hold my menu. I was wary at first because my layout is not very robust (we outsourced to a graphic designer and have been trying to integrate his work with our code); this was why I didn't want to introduce a div into the DOM.

The key for me was to include the div in a place where it wouldn't affect the layout. Originally I had something that looked like this:

<input> type="button" id="srchType" />
<input type="text" id="first-name" value="First Name" />
<input type="submit" id="profiles-search-submit" value="Search" />

I inserted the div between two of the inputs; this screwed up my layout. The key was to insert the div before or after; this wouldn't screw up my layout. YMMV, depending on how sensitive your DOM is to changes; I hope this helps someone out if they're wondering what they should do.

After you do this (create your div) you can create a YUI Menu object like so:

var searchMenuItems = 
  [{ text: "First Name", value: 'firstName', onclick: {fn: onMenuItemClick}},
   { text: "Last Name", value: 'lastName', onclick: {fn: onMenuItemClick}}];

var srchTypeMenuConfig = { shadow: false,
                           effect: { 
                            effect: YAHOO.widget.ContainerEffect.FADE,
                            duration: .25 
                           }
                         };
this.srchTypeMenu = new YAHOO.widget.Menu(this.searchMenuEl, 
                                          srchTypeMenuConfig);

How do I remove the drop-shadow from a YUI menu at runtime?

1 Answers1