5 replies [Last post]
technossomy
technossomy's picture
Offline
Enthusiast
Last seen: 3 years 7 weeks ago
Timezone: GMT+2
Joined: 2004-06-09
Posts: 258
Points: 5

On http://www.dynamicdrive.com I found a so called switch menu, where one can open and close menu items one at a time. When looking into it, there were two things which I felt were in need of improvement:
1- Only one menu item at a time can be opened; if another was open, it would be closed
2- It was a little heavy on the javascript.

An alternative is proposed here:

<html>
<head>
<style type="text/css">
.menuCategory {
	font-weight: bold;
	background-color: #F2F3F5;
	color: #036;
	padding: 2px;
  /*/*/border-top: 1px dashed #99ADC2;/* */
  /*/*/margin-top: 1px;/* */
}
</style>
<script language="JavaScript" type="text/javascript">
function toggle(obj) { 
  with (document.getElementById(obj).style) { display = (display == 'none') ? 'block' : 'none'; }
}
</script>

</head>
<body>

<a href="javascript:toggle('menu_1')"><div class='menuCategory'>menu item 1</div></a>
<div id='menu_1'><div class='menuTopic'>content to menu item 1</div></div>

<a href="javascript:toggle('menu_2')"><div class='menuCategory'>menu item 2</div></a>
<div id='menu_2'><div class='menuTopic'>content to menu item 2</div></div>

</body>
</html>

I left the class menuTopic intact for those who want to add styling to the content.
The 1px margin is there for less cramped viewing when one has lots of menu items stacked.

Hope this helps

Tech

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 6 years 13 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

A switch menu example

Hi

I've been looking for an opportunity to use this type of gadget for a while now and your code looks very compact and neat.

I came across this other version a while back, could you have a look and see if there are any advantages/disadvantages in comparison to your version - the script on this one is certainly a lot longer.

http://www.thebownes.com/dennis/playground/dhtml/hide-show-div-onClick.html

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 29 weeks 6 days ago
Milton Keynes
Joined: 2004-06-30
Posts: 9668
Points: 801

A switch menu example

It does work, even with a doctype and valid code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html>
<head>
<style type="text/css">
<!--
.menuCategory {
   font-weight: bold;
   background-color: #F2F3F5;
   color: #036;
   padding: 2px;
  /*/*/border-top: 1px dashed #99ADC2;/* */
  /*/*/margin-top: 1px;/* */
}
-->
</style>

<script language="JavaScript" type="text/javascript">
function toggle(obj) {
  with (document.getElementById(obj).style) { display = (display == 'none') ? 'block' : 'none'; }
}
</script>

</head>

<body>

<a href="javascript:toggle('menu_1')"><div class="menuCategory">menu item 1</div></a>
<div id='menu_1'><div class='menuTopic'>content to menu item 1</div></div>

<a href="javascript:toggle('menu_2')"><div class="menuCategory">menu item 2</div></a>
<div id='menu_2'><div class='menuTopic'>content to menu item 2</div></div>

</body>
</html>

However, the validator dooesn't like divs inside anchor tags. Doh! Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

technossomy
technossomy's picture
Offline
Enthusiast
Last seen: 3 years 7 weeks ago
Timezone: GMT+2
Joined: 2004-06-09
Posts: 258
Points: 5

A switch menu example

HellsBells

Thanks for your post. Both our examples are DOM Level 1 compliant. Your example hinges on the visibility attribute being 'visible' or 'hidden', whereas mine changes the display attribute in Javascript from 'none' to 'block'.

I am not convinced that changing styling dynamically the way I have done is such a good idea in the context of future browser support, but it works. I've checked both examples in IE6, FF1 and Op7 and it works flawlessly.

Hope this helps

Tech

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 6 years 13 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

A switch menu example

Thanks for the reply - I haven't used a lot of JS in the past - just styleswitchers and slide shows so I don't know alot about which technique is preferable etc - thanks for going to the trouble of testing both in different browsers.

I'll file it all away for future use...

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

technossomy
technossomy's picture
Offline
Enthusiast
Last seen: 3 years 7 weeks ago
Timezone: GMT+2
Joined: 2004-06-09
Posts: 258
Points: 5

A switch menu example

tph

Thanks also for your response, and I guess that means that the lightblue area will not be clickable once the <a></a> tags are brought inside division menuCategory. So there's really a dilemma...

Best

Tech