Archivlink: javarea.de Forum > JavaScript > Foldoutmenue Horizontal
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Foldoutmenue Horizontal

Pages: [1]
geschrieben von weissnicht.com am 21.11.2006 - 15:02
Hällou!

Ich versuchte gerade längere Zeit vergebens das Foldoutmenue anzupassen.
Liegt wohl daran, dass ich nicht viel von js verstehe...


Folgende Fragen:

1. (Wie) kann ich eine dritte Ebene einbauen?

z.B. 1.1.1


2. Wie mache ich das ganze dann vertikal?

Ich versuchte die Tabelle im Layout (GoLive) zu verändern. Jedoch ist das keine normale Tabelle...


Hier der Link zu dieser Navigation:
http://www.javarea.de/index.php3?op....amp;id=469

Danke im Voraus!

geschrieben von Klaush am 21.11.2006 - 18:00
Ein Vertikales Script findest du hier:
http://www.javarea.de/index.php3?op....amp;id=470

ansonsten ist das nur ein Formatierungsproblem mit vertikal und horizontal.

Bsp:
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: 
109: 
110: 
111: 
112: 
113: 
114: 
115: 
116: 
117: 
118: 
119: 
120: 
121: 
122: 
123: 
124: 
125: 
126: 
127: 
128: 
129: 
130: 
131: 
132: 
133: 
134: 
135: 
136: 
137: 
138: 
139: 
140: 
141: 
142: 
143: 
144: 
145: 
146: 
147: 
148: 
149: 
150: 
151: 
152: 
153: 
154: 
155: 
156: 
157: 
158: 
159: 
160: 
161: 
162: 

<style type="text/css" media="screen">
<!--
body
{
	font-family: Verdana, sans-serif;
	font-size: 14px;
	overflow: auto;
	padding: 10px;
	margin: 0px;
}

ul, li
{
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}

.menu
{
	position: absolute;
	z-index: 3;
	top: 10px;
}

.menu li
{
	width: 140px;
}

.menu a
{
	border: 1px solid #888;
	background-color: #fff;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
	cursor: default;
	margin: 0px 2px;
	display: block;
	height: 20px;
	color: #000;
}

.menu a:hover
{
	background-color: #ccc;
}

#smenu1, #smenu2, #smenu3, #smenu4
{
	font-size: 12px;
	display: none;
	width: 140px;
	left: 100px;
	position: absolute;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a
{
	font-weight: normal;
	padding-top: 2px;
	border-top: 0px;
	cursor: pointer;
}

#ssmenu1, #ssmenu2, #ssmenu3, #ssmenu4
{
	font-size: 12px;
	display: none;
	width: 140px;
	left: 120px;
	position: absolute;
}

#ssmenu1 a, #ssmenu2 a, #ssmenu3 a, #ssmenu4 a
{
	font-weight: normal;
	padding-top: 2px;
	border-top: 0px;
	cursor: pointer;
}

//-->
</style>

<script type="text/javascript">
<!--
function montre(id)
{
	with (document)
	{
		if (getElementById)
			getElementById(id).style.display = 'block';
		else if (all)
			all[id].style.display = 'block';
		else
			layers[id].display = 'block';
	}
}

function cache(id)
{
	with (document)
	{
		if (getElementById)
			getElementById(id).style.display = 'none';
		else if (all)
			all[id].style.display = 'none';
		else
			layers[id].display = 'none';
	}
}
//-->
</script>

</head>
<body>

<div class="menu">
  <ul>
    <li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Menu 1</a>
      <ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
        <li><a href="javascript:void(0);" onmouseover="montre('ssmenu1');" onmouseout="cache('ssmenu1');">Subkategorie 1.1</a>
             <ul id="ssmenu1" onmouseover="montre('ssmenu1');" onmouseout="cache('ssmenu1');">
				<li><a href="">Subkategorie 1.1.1</a></li>
				<li><a href="">Subkategorie 1.1.2</a></li>
				<li><a href="">Subkategorie 1.1.3</a></li>
		      </ul>
		 </li>
		<li><a href="">Subkategorie 1.1</a></li>
        <li><a href="">Subkategorie 1.2</a></li>
        <li><a href="">Subkategorie 1.3</a></li>
      </ul>
    </li>

    <li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Menu 2</a>
      <ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
        <li><a href="">Subkategorie 2.1</a></li>
        <li><a href="">Subkategorie 2.2</a></li>
      </ul>
    </li>

    <li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Menu 3</a>
      <ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
        <li><a href="">Subkategorie 3.1</a></li>
        <li><a href="">Subkategorie 3.2</a></li>
        <li><a href="">Subkategorie 3.3</a></li>
        <li><a href="">Subkategorie 3.4</a></li>
        <li><a href="">Subkategorie 3.5</a></li>
      </ul>
    </li>

    <li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Menu 4</a>
      <ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
        <li><a href="">Subkategorie 4.1</a></li>
        <li><a href="">Subkategorie 4.2</a></li>
        <li><a href="">Subkategorie 4.3</a></li>
      </ul>
    </li>
  </ul>
</div>


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.