Menü erstellen für Anfänger - 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: 
83: 
84: 
85: 
86: 
87: 
88: 
89: 
90: 
91: 
92: 
93: 
94: 
95: 
96: 
97: 
98: 
99: 
100: 
101: 
102: 
103: 
104: 
105: 
106: 
107: 
108:

<script language="JavaScript">
<!--

function showrange1(what){
  for (ranges=1; ranges<=10; ranges=ranges+1){
    if(document.getElementById('1range' + ranges)){
      document.getElementById('1range' + ranges).style.display="none";
    }
  }
  document.getElementById('1range' + what).style.display="block";
}
function showrange2(what){
  for (ranges=1; ranges<=10; ranges=ranges+1){
    if(document.getElementById('2range' + ranges)){
      document.getElementById('2range' + ranges).style.display="none";
    }
  }
  document.getElementById('2range' + what).style.display="block";
}
function showrange3(what){
  for (ranges=1; ranges<=10; ranges=ranges+1){
    if(document.getElementById('3range' + ranges)){
      document.getElementById('3range' + ranges).style.display="none";
    }
  }
  document.getElementById('3range' + what).style.display="block";
}
function showrange4(what){
  for (ranges=1; ranges<=10; ranges=ranges+1){
    if(document.getElementById('4range' + ranges)){
      document.getElementById('4range' + ranges).style.display="none";
    }
  }
  document.getElementById('4range' + what).style.display="block";
}
-->

</SCRIPT>
<style type="text/css">
<!--
ul 	{ list-style: none; margin: 0; padding: 0; }
	
li 	{ float: left; margin: 0; padding: 0 0 0 2em; }
	

-->
</style>

<ul>
	<li><a href="javascript:showrange1(1)">Beschreibung</a></li>
    <li><a href="javascript:showrange1(2)">Beschreibung lang</a></li>
    <li><a href="javascript:showrange1(3)">Service</a></li>
    <li><a href="javascript:showrange1(4)">Kontakt</a></li>
    <li><a href="javascript:showrange1(5)">Zubeh&ouml;r</a></li>   
</ul>
<div style="clear: both;">

<div id="1range1" style="display: block;">
    <ul>
        <li><a href="javascript:showrange2(1)">Beschreibung Artikel 1</a></li>
        <li><a href="javascript:showrange2(2)">Beschreibung Artikel 2</a></li>
        <li><a href="javascript:showrange2(3)">Beschreibung Artikel 3</a></li>
        <li><a href="javascript:showrange2(4)">Beschreibung Artikel 4</a></li>
        <li><a href="javascript:showrange2(5)">Beschreibung Artikel 5</a></li>      
    </ul>
    <div style="clear: both;">
    <div id="2range1" style="display: none;">Beschreibung Artikel 1</div>
    <div id="2range2" style="display: none;">Beschreibung Artikel 2</div>
    <div id="2range3" style="display: none;">Beschreibung Artikel 3</div>
    <div id="2range4" style="display: none;">Beschreibung Artikel 4</div>
    <div id="2range5" style="display: none;">Beschreibung Artikel 5</div>
</div>

<div id="1range2" style="display: none;">
    <ul>
        <li><a href="javascript:showrange3(1)">Beschreibung lang Artikel 1</a></li>
        <li><a href="javascript:showrange3(2)">Beschreibung lang Artikel 2</a></li>
        <li><a href="javascript:showrange3(3)">Beschreibung lang Artikel 3</a></li>
        <li><a href="javascript:showrange3(4)">Beschreibung lang Artikel 4</a></li>
        <li><a href="javascript:showrange3(5)">Beschreibung lang Artikel 5</a></li>      
    </ul>
    <div style="clear: both;">
    <div id="3range1" style="display: none;">Beschreibung lang Artikel 1</div>
    <div id="3range2" style="display: none;">Beschreibung lang Artikel 2</div>
    <div id="3range3" style="display: none;">Beschreibung lang Artikel 3</div>
    <div id="3range4" style="display: none;">Beschreibung lang Artikel 4</div>
    <div id="3range5" style="display: none;">Beschreibung lang Artikel 5</div>
</div>

<div id="1range3" style="display: none;">Service</div>

<div id="1range4" style="display: none;">Kontakt</div>

<div id="1range5" style="display: none;">
    <ul>
        <li><a href="javascript:showrange4(1)">Zubeh&ouml;r Artikel 1</a></li>
        <li><a href="javascript:showrange4(2)">Zubeh&ouml;r Artikel 2</a></li>
        <li><a href="javascript:showrange4(3)">Zubeh&ouml;r Artikel 3</a></li>
        <li><a href="javascript:showrange4(4)">Zubeh&ouml;r Artikel 4</a></li>
        <li><a href="javascript:showrange4(5)">Zubeh&ouml;r Artikel 5</a></li>      
    </ul>
    <div style="clear: both;">
    <div id="4range1" style="display: none;">Zubeh&ouml;r Artikel 1</div>
    <div id="4range2" style="display: none;">Zubeh&ouml;r Artikel 2</div>
    <div id="4range3" style="display: none;">Zubeh&ouml;r Artikel 3</div>
    <div id="4range4" style="display: none;">Zubeh&ouml;r Artikel 4</div>
    <div id="4range5" style="display: none;">Zubeh&ouml;r Artikel 5</div>
</div>