Collapse/Expand DOM Menu

Graeme Hackston

11-11-2002, 05:36 AM

This is a simple menu that degrades opened in non DOM or non javascript browsers. To do this it requires “.subs {display: none;}” to be removed from the page. DOM browsers require their own external CSS file with the style included.

It loads opened to the correct menu items in a page where the flag div is present. Change the number in “flag-4-menu” to the corresponding menu item you want opened onload. Give any new menu items ids in the same manner as the menu items in the example. This is obviously most useful with external JS files served to DOM browsers only. To do this see brothercake’s response in the link below. Hopefully Opera can be removed soon.

http://www.codingforums.com/showthread.php?s=&threadid=1328

I haven’t tested the IE5 cursor: “hand” fix. Any suggestions are welcome.

<html>
<head>
<title></title>
<style>
.subs, .page-flag {
display: none;
}

.link, a:visited, a:link, a:active {
color:black; background-color:transparent; text-decoration:none;
}

.link, .link-over {
cursor: pointer;
}

a:hover, .link-over {
color:blue; background-color:transparent; text-decoration:none;
}
</style>
<script>

nums = new Array (0)
IdsForIE5 = new Array ()

function Open(Sub) {
a = document.getElementById(Sub).style
if (a.display == 'block') {
a.display = 'none'
} else {
a.display = 'block'
}
}

IE5 = (parseInt(navigator.appVersion) == 4 && navigator.userAgent.toLowerCase().indexOf('msie 5.0') != -1);

onload = function() {
while (nums.length < 50) {
nums[nums.length] = nums.length + 1
}
for (var i=0;i<nums.length;i++) {
if (document.getElementById('open-' + nums[i])) {
IdsForIE5[IdsForIE5.length] = 'open-' + nums[i]
}
}
if (IE5) {
for (var i=0;i<IdsForIE5.length;i++) {
document.getElementById(IdsForIE5[i]).style.cursor = 'hand'
}
}
if (document.getElementById('flag')) {
str = document.getElementById('flag').innerHTML
SubId = 'sub-' + str.slice(str.indexOf('flag-')+5,str.indexOf('-menu'))
if (document.getElementById(SubId)) {
Open(SubId)
}
}
}

</script>
</head>
<body>

<div id="flag" class="page-flag"><div id="flag-4-menu" class="page-flag"></div></div>

<a href="page.htm">link 1</a><br />
<span id="open-2" class="link" onmouseover="this.className='link-over'" onmouseout="this.className='link'" onmousedown="return Open('sub-2')">open 2</span><br />
<div id="sub-2" class="subs">
<a href="page.htm">this is a sub link of 2</a><br />
<a href="page.htm">this is a sub link of 2</a>
</div>
<a href="page.htm">link 3</a><br />
<span id="open-4" class="link" onmouseover="this.className='link-over'" onmouseout="this.className='link'" onmousedown="return Open('sub-4')">open 4</span><br />
<div id="sub-4" class="subs">
<a href="page.htm">this is a sub link of 4</a><br />
<a href="page.htm">this is a sub link of 4</a><br />
<a href="page.htm">this is a sub link of 4</a>
</div>
<a href="page.htm">link 5</a><br />
<a href="page.htm">link 6</a><br />
<span id="open-7" class="link" onmouseover="this.className='link-over'" onmouseout="this.className='link'" onmousedown="return Open('sub-7')">open 7</span><br />
<div id="sub-7" class="subs">
<a href="page.htm">this is a sub link of 7</a><br />
<a href="page.htm">this is a sub link of 7</a><br />
<a href="page.htm">this is a sub link of 7</a>
</div>

</body>
</html>

Edit

This is a URL alternative to using the flag div to open the menu. Change the sub menu division ids to match a part of the URL.

Change the opening span(s) from this example.

onmousedown="return Open('sub-7')"

... to this

onmousedown="return Open('the-new-sub-id')"

Put this anywhere in your .js file. Add the part of the URL(s) that the divisions are named to the array.

MenuIds = new Array ('some_folder','page.htm')

Relpace this in the onload function

if (document.getElementById('flag')) {
str = document.getElementById('flag').innerHTML
SubId = 'sub-' + str.slice(str.indexOf('flag-')+5,str.indexOf('-menu'))
if (document.getElementById(SubId)) {
Open(SubId)
}
}

... with this

for (var i=0;i<MenuIds.length;i++) {
if (location.href.match(MenuIds[i])) {
str = MenuIds[i]
if (document.getElementById(str)) {
Open(str)
}
}
}

Graeme Hackston

11-13-2002, 02:50 AM

Well I guess the idea is to have everything ready before you post a script but I'm having fun playing with it.

This one does the (IMO) jumpy open 1 item, close the rest thing.

<html>
<head>
<title></title>
<style>
.subs, .page-flag {
display: none;
}

.link, a:visited, a:link, a:active {
color:black; background-color:transparent; text-decoration:none;
}

.link, .link-over {
cursor: pointer;
}

a:hover, .link-over {
color:blue; background-color:transparent; text-decoration:none;
}
</style>
<script>

IdsForIE5 = new Array ()

SubIds = new Array ()

nums = new Array (0)

function Open(Sub) {
for (var i=0;i<SubIds.length;i++) {
a = document.getElementById(SubIds[i]).style
if (SubIds[i] == Sub) {
if (a.display == 'block') {
a.display = 'none'
} else {
a.display = 'block'
}
} else {
a.display = 'none'
}
}
}

IE5 =(parseInt(navigator.appVersion) == 4 && navigator.userAgent.toLowerCase().indexOf('msie 5.0') != -1);

onload = function() {
while (nums.length < 50) {
nums[nums.length] = nums.length + 1
}
for (var i=0;i<nums.length;i++) {
if (document.getElementById('sub-' + nums[i])) {
SubIds[SubIds.length] = 'sub-' + nums[i]
}
if (document.getElementById('open-' + nums[i])) {
IdsForIE5[IdsForIE5.length] = 'open-' + nums[i]
}
}
if (IE5) {
for (var i=0;i<IdsForIE5.length;i++) {
document.getElementById(IdsForIE5[i]).style.cursor = 'hand'
}
}
if (document.getElementById('flag')) {
str = document.getElementById('flag').innerHTML
SubId = 'sub-' + str.slice(str.indexOf('flag-')+5,str.indexOf('-menu'))
if (document.getElementById(SubId)) {
Open(SubId)
}
}
}

</script>
</head>
<body>

<div id="flag" class="page-flag"><div id="flag-7-menu" class="page-flag"></div></div>

<a href="page.htm">link 1</a><br />
<span id="open-2" class="link" onmouseover="this.className='link-over'" onmouseout="this.className='link'" onmousedown="return Open('sub-2')">open 2</span><br />
<div id="sub-2" class="subs">
<a href="page.htm">this is a sub link of 2</a><br />
<a href="page.htm">this is a sub link of 2</a>
</div>
<a href="page.htm">link 3</a><br />
<span id="open-4" class="link" onmouseover="this.className='link-over'" onmouseout="this.className='link'" onmousedown="return Open('sub-4')">open 4</span><br />
<div id="sub-4" class="subs">
<a href="page.htm">this is a sub link of 4</a><br />
<a href="page.htm">this is a sub link of 4</a><br />
<a href="page.htm">this is a sub link of 4</a>
</div>
<a href="page.htm">link 5</a><br />
<a href="page.htm">link 6</a><br />
<span id="open-7" class="link" onmouseover="this.className='link-over'" onmouseout="this.className='link'" onmousedown="return Open('sub-7')">open 7</span><br />
<div id="sub-7" class="subs">
<a href="page.htm">this is a sub link of 7</a><br />
<a href="page.htm">this is a sub link of 7</a><br />
<a href="page.htm">this is a sub link of 7</a>
</div>

</body>
</html>

Graeme Hackston

11-14-2002, 02:44 AM

This does both. Change "jumpy" to 0 if you want items closing only when clicked.

I don't know if I'm populating the array "nums" normally. If anyone has a suggestion feel free to comment.

<html>
<head>
<title></title>
<style>
.subs, .page-flag {
display: none;
}

.link, a:visited, a:link, a:active {
color:black; background-color:transparent; text-decoration:none;
}

.link, .link-over {
cursor: pointer;
}

a:hover, .link-over {
color:blue; background-color:transparent; text-decoration:none;
}
</style>
<script>

jumpy = 1;

IdsForIE5 = new Array ()

SubIds = new Array ()

nums = new Array (0)

function Open(Sub) {
if (jumpy == 1) {
for (var i=0;i<SubIds.length;i++) {
a = document.getElementById(SubIds[i]).style
if (SubIds[i] == Sub) {
if (a.display == 'block') {
a.display = 'none'
} else {
a.display = 'block'
}
} else {
a.display = 'none'
}
}
} else {
a = document.getElementById(Sub).style
if (a.display == 'block') {
a.display = 'none'
} else {
a.display = 'block'
}
}
}

IE5 =(parseInt(navigator.appVersion) == 4 && navigator.userAgent.toLowerCase().indexOf('msie 5.0') != -1);

onload = function() {
while (nums.length < 50) {
nums[nums.length] = nums.length + 1
}
for (var i=0;i<nums.length;i++) {
if (document.getElementById('sub-' + nums[i])) {
SubIds[SubIds.length] = 'sub-' + nums[i]
}
if (document.getElementById('open-' + nums[i])) {
IdsForIE5[IdsForIE5.length] = 'open-' + nums[i]
}
}
if (IE5) {
for (var i=0;i<IdsForIE5.length;i++) {
document.getElementById(IdsForIE5[i]).style.cursor = 'hand'
}
}
if (document.getElementById('flag')) {
str = document.getElementById('flag').innerHTML
SubId = 'sub-' + str.slice(str.indexOf('flag-')+5,str.indexOf('-menu'))
if (document.getElementById(SubId)) {
Open(SubId)
}
}
}

</script>
</head>
<body>

<div id="flag" class="page-flag"><div id="flag-2-menu" class="page-flag"></div></div>

<a href="page.htm">link 1</a><br />
<span id="open-2" class="link" onmouseover="this.className='link-over'" onmouseout="this.className='link'" onmousedown="return Open('sub-2')">open 2</span><br />
<div id="sub-2" class="subs">
<a href="page.htm">this is a sub link of 2</a><br />
<a href="page.htm">this is a sub link of 2</a>
</div>
<a href="page.htm">link 3</a><br />
<span id="open-4" class="link" onmouseover="this.className='link-over'" onmouseout="this.className='link'" onmousedown="return Open('sub-4')">open 4</span><br />
<div id="sub-4" class="subs">
<a href="page.htm">this is a sub link of 4</a><br />
<a href="page.htm">this is a sub link of 4</a><br />
<a href="page.htm">this is a sub link of 4</a>
</div>
<a href="page.htm">link 5</a><br />
<a href="page.htm">link 6</a><br />
<span id="open-7" class="link" onmouseover="this.className='link-over'" onmouseout="this.className='link'" onmousedown="return Open('sub-7')">open 7</span><br />
<div id="sub-7" class="subs">
<a href="page.htm">this is a sub link of 7</a><br />
<a href="page.htm">this is a sub link of 7</a><br />
<a href="page.htm">this is a sub link of 7</a>
</div>

</body>
</html>

beetle

11-14-2002, 04:29 AM

the push() method for arrays is Javascript1.5. I'll be honest, I don't know which browsers natively support 1.5 and which don't, but I'm pretty sure that IE4 does not, and maybe not IE5. Some research on Javascript1.5 will yeild an answer.

Graeme Hackston

11-14-2002, 04:39 AM

Thanks beetle. If it doesn't work in IE5 I need to change it. I'll see if I can find some info.

beetle

11-14-2002, 04:44 AM

Ya, lemme know what you find out. Also, I'd like to know what you think of my DOM menu....

http://www.lanwizards.com/navtest/test.htm

I'm still working through a teeny problem in Gecko, but it's 95% complete.

Graeme Hackston

11-14-2002, 05:45 AM

Looks good beetle, I tried using a list but gave up because of differences in bullet image positioning. I couldn't get IE6 and Mozilla 1.0 to act the same.

I'm pretty sure push() isn't supported by IE5. I changed the onload function above as per this page:

http://www.webreference.com/dhtml/column32/2.html