onclick event on parent block of Chrome CSS Drop Down Menu

[FerdFrin]

1) Script Title: Chrome CSS Drop Down Menu (v2.01)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...rome/index.htm

3) Describe problem: I'm trying to configure Chrome CSS Drop Down Menu, and to attach js onClick events to top level (parent) menu boxes. I have seen this works when there is no sub-menu defined:

<div class="chromestyle" id="chromemenu">
<ul>
<li><a onclick='alert("Status onClick event fired");'>STATUS</a></li>

However it does not when the parent box has an attached sub-menu:

<li><a onclick='alert("Test onClick event fired");' rel="dropmenu1">TEST</a></li>

...

I have seen the "rel" tag causes an onmouseover event to be created, but this should not prevent me defining an additional onclick.

Disabling the iframseshim makes no difference. I've also tried declaring the onclick event in the startchrome js function, but cannot get both onclick to work when both onclick & onmouseover events are defined.

Any help appreciated,
Fred

[jscheuer1]

Putting the rel attribute there tells the script to add its own onclick event to that tag, overwriting any that you had hard coded. Now in the configuration section of the main chrome.js file, there is:

//Chrome Drop Down Menu v2.01- Author: Dynamic Drive (http://www.dynamicdrive.com)
//Last updated: November 14th 06- added iframe shim technique

var cssdropdown={
disappeardelay: 250, //set delay in miliseconds before menu disappears onmouseout
disablemenuclick: true, //when user clicks on a menu item with a drop down menu, disable menu item's link?
enableswipe: 1, //enable swipe effect? 1 for yes, 0 for no
enableiframeshim: 1, //enable "iframe shim" technique to get drop down menus to correctly appear on top of controls such as form objects in IE5.5/IE6? 1 for yes, 0 for no

//No need to edit beyond here////////////////////////
dropmenuobj: null, ie: document.all, fir . . .

For links with rel attributes that are activated onmouseover, changing that to false may allow you to use your own hard coded onclick event. But it might not. What you could do though is add a span or a division and put your event on that:

<li><a rel="dropmenu1"><span onclick='alert("Test onClick event fired");'>TEST</span></a></li>

Some additional styles may be required to get it to look the same and/or to represent the same trigger area as it would without the added span. If your a tag has an href (your example does not) you may find it advantageous to add return false; to your onclick event:

<li><a rel="dropmenu1"><span onclick='alert("Test onClick event fired");return false;'>TEST</span></a></li>

[FerdFrin]

That's excellent service!! Ok - some feedback is the least I can do:

Setting disablemenuclick=false did not help (as more or less predicted).
I added the span tags as suggested and all's fine in Firefox3. While
there is a very small leading section of the box which does not trigger the
submenu, this was acceptable without further css changes.

Thanks a lot. I'll be cheeky here & use the opportunity for one more qu
I have the menu left justified, and want to place one additional non-menu
data item, right justified, in the menu bar (namely a time), which will require
cyclic updating. The updates are approx 20 s apart - so ajax is not necessary,
although a candidate. Any hint on how to embed this in the menu bar?

Thanks again,
Fred

[ddadmin]

I have the menu left justified, and want to place one additional non-menu data item, right justified, in the menu bar (namely a time), which will require cyclic updating.

Not quite sure what you mean by "cyclic updating", but regarding positioning a menu item to be right aligned, try playing with the "float" property:

<div class="chromestyle" id="chromemenu">
<ul>
<li style="float: right"><a href="#" style="border-right-width:0">Search</a></li>	
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Resources</a></li>
<li><a href="#" rel="dropmenu2">News</a></li>
<li><a href="#" rel="dropmenu3">Search</a></li> 
</ul>
</div>

[jscheuer1]

I had thought that might be a good approach DD. But the alignment cross browser looks like it would be a real headache at best.

This seems pretty straightforward and universal:

<div style="position:relative;" class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Resources</a></li>
<li><a href="#" rel="dropmenu2">News</a></li>
<li><a href="#" rel="dropmenu3">Search</a></li>	
</ul>
<div style="position:absolute;right:1ex;top:0.75ex;">
Time
</div>
</div>

Now, as to the 'cyclic updating', sounds like a simple digital clock script. If you already have the code for that and can update its output easily to the division, you are all set. If not, let us know what part of that you want help with.

[FerdFrin]

Again some feedback: this did the trick:

<li id="time" style="position: absolute; right: 15px;">TIME</li>

Although, as this is no longer a link, just display data, there is
no <a> tag & the the css needed a mangin-top adding for vertical alignment.

[jscheuer1]

With just:

<li id="time" style="position: absolute; right: 15px;">TIME</li>

some browsers might place the li at the top of the page (a browser could assume top:0px; without violating the standards much), and containing elements of the menu (if any), their style might affect how the above works. Did you try my idea? It worked fine cross browser here and couldn't have either of those issues.