Vertikales Foldoutmenü - javarea.de Forum powered by javarea.de

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52: 
53: 
54: 
55: 
56: 
57: 
58: 
59: 
60: 
61: 
62: 
63: 
64: 
65: 
66: 
67: 
68: 
69: 
70: 
71: 
72: 
73: 
74: 
75: 
76: 
77: 
78: 
79: 
80: 
81: 
82:

<script type="text/javascript">
<!--
function hideSub()
{

	if (!document.getElementsByTagName)
		return;

	var mnu    = document.getElementById('menu');
	var toplis = mnu.getElementsByTagName('li');


	for (var it = 0; it < toplis.length; it++)
	{
		var sublis = toplis[it].getElementsByTagName('li');

		for (var is = 0; is < sublis.length; is++)
			if (sublis[is].style)
				sublis[is].style.display = (toplis[it].className == 'show') ? 'block' : 'none';
	}
}

function mShow(Me)
{
	if (!Me.getElementsByTagName)
		return;

	var mylis = Me.getElementsByTagName('li');
             
	// Alle Menuepunkte schliessen
        hideSub();


	if (!mylis)
		return;

	for (j = 0; j < mylis.length; j++)
		mylis[j].style.display = (mylis[j].style.display == 'block') ? 'none' : 'block';
}
//-->
</script>

</head>
<body onload="hideSub();">

<ul id="menu">
  <li onclick="mShow(this);">Options 1
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 1</a></li>
    </ul>
  </li>

  <li onclick="mShow(this);">Options 2
    <ul>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 2</a></li>
    </ul>
  </li>

  <li onclick="mShow(this);">Options 3
    <ul>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 3</a></li>
    </ul>
  </li>

  <li onclick="mShow(this);">Options 4
    <ul>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 4</a></li>
    </ul>
  </li>
</ul>