Collapsible Menus

[develeigh]

Hi,

I have got this Collapsible Menus, it uses combination of JavaScript
and CSS.

Javascript when executed changes the inital CSS settings to make the
sub menu visable

function toggleClamShellMenu(objectID) {
var object = document.getElementById(objectID);
if (object.style.display == 'block')
object.style.display='none';
else
object.style.display='block';
return;
}

in CSS the initial settings hides the sub menus

#menu1 { display: none; }
#menu2 { display: none; }
#menu3 { display: none; }

In HTML using a tags to execute the javascript

<a class="menuHead" href="javascript:toggleClamShellMenu('menu1')">

It works perfectly in Firefox, IE, Safari but not in Opera to my
suprise.

Opera is not reporting any errors with the Javascript and I cannot see
what it is that stops it working in Opera.

If you know why it doesn't work in opera please let me know and any
possible workarounds.

Many Thanks in Advance

Dafydd

 

[Grant Wagner]

Hi,

I have got this Collapsible Menus, it uses combination of JavaScript
and CSS.

Javascript when executed changes the inital CSS settings to make the
sub menu visable

function toggleClamShellMenu(objectID) {

It's advisable to protect your call to document.getElementById():

if (document.getElementById) {

var object = document.getElementById(objectID);

It's advisable to test for the object and properties you want before
assuming they are available:

if (object && (object = object.style)) {

if (object.style.display == 'block')
object.style.display='none';
else
object.style.display='block';

If you are not applying the styles directly to the elements (ie - <div
style="display:block;">) then you probably want to test against the
default display style, rather than one specific to a specific element:

object.display = (object.display == '' ? 'none' : '');

return;

If you are not returning a value -return- is unnecessary.

}

in CSS the initial settings hides the sub menus

#menu1 { display: none; }
#menu2 { display: none; }
#menu3 { display: none; }

In HTML using a tags to execute the javascript

<a class="menuHead" href="javascript:toggleClamShellMenu('menu1')">

It is in advisable to use href="javascript:...", see <url:
http://jibbering.com/faq/#FAQ4_24 /> for an explanation.

It works perfectly in Firefox, IE, Safari but not in Opera to my
suprise.

Opera is not reporting any errors with the Javascript and I cannot see
what it is that stops it working in Opera.

If you know why it doesn't work in opera please let me know and any
possible workarounds.

I'm guessing that the version of Opera you are using either does not
support document.getElementById(), or does not support the style or
display properties properly.

It's also possible that moving the function call to an -onclick- event
will resolve the problem.

 

[Hallvord R. M. Steen]

I have got this Collapsible Menus, it uses combination of JavaScript
and CSS.

It works perfectly in Firefox, IE, Safari but not in Opera to my
suprise.

Perhaps you have a sample URL I can look at? The posted code was clear
enough but it would still take me some time to write a test page, and I
can not tell exactly what your menu markup looks like.