Menü wie hier im Forum

U

ultra-tester

Grünschnabel
Hallo !

Ich weiß leider auch nicht wie ich es beschreiben soll.
Wenn ich hier im Forum auf
Code: 
Forum-Optionen
und auf
Code: 
Dieses Forum durchsuchen

klicke dan kommt ein Menü und soetwas suche ich.

Bin für jede hilfe dankbar.
 
Hi,

das ist nichts anderes als ein zunächst verstecktes Element (display:none), das beim Klick eingeblendet wird (display:block).
 
Das Element wird mit einer dokumentweit eindeutigen ID ausgezeichnet und mittels der getElementById()-Methode angesprochen.

Im JS-Tutorial Basic DHTML Menü kannst du nachlesen, wie sich das Ein- und Ausblenden eines Elements umsetzen lässt.
 
Code: 
function showhide(divid) {
obj = document.getElementById(divid);
obj.style.display = obj.style.display == 'none' ? 'block' : 'none';
}
Code: 
<a href="#" onclick="showhide('box')">Box</a>
<div id="box" style="display:none;">
...
</div>
 
Jetzt nur noch das die Box uber denn text fährt dann bin ich glücklich.
Also darf der text nicht nachunten rutschen wenn die Box auf geht.
 
Code: 
<div id="controller" style="position:relative;">
     <a href="#" onclick="showhide('box')">Box</a>
     <div id="box" style="position:absolute;left:0;top:20px;display:none;">
          ...
     </div>
</div>
<!-- Hier folgt der Text, der sich nun nicht mehr nach unten verschiebt -->
 
Hallo,

habe jetzt noch ein problem.
Habe jetzt das

HTML: 
<html>
<head>
<script type="text/javascript">
	NS4 = (document.layers) ? 1 : 0;
	IE4 = (document.all) ? 1 : 0;
	NS6 = (document.getElementById) ? 1 : 0;

	activmenu = false;

	function show(menu) {
		if(activmenu) {
			if(NS4) document.layers[activmenu].display = "none";
			if(NS6) document.getElementById(activmenu).style.display= "none";
			if(IE4) document.all(activmenu).style.display = "none";
			activmenu = false;
		}

		if(menu) {
			if(NS4) {
				document.layers[menu].display = "show";
				document.layers[menu].bgColor = "FFFFFF";
			}

			if(IE4) {
				document.all(menu).style.display = "inline";
			}

			if(NS6) {
				document.getElementById(menu).style.display = "inline";
			}
			activmenu = menu;
		}
	}

	function hide(menu) {
		if(NS4) document.layers[menu].display = "none";
		if(NS6) document.getElementById(menu).style.display = "none";
		if(IE4) document.all(menu).style.display = "none";
		activmenu = false;
	}
</script>
</head>
<body>
<a href="#" onclick="javascript:show('1');">Suche  <img src="images/ascmenu.gif" alt="" title="" border="0" /></a> <a href="#" onclick="javascript:show('2'); return false;">Men&uuml;  <img src="images/ascmenu.gif" alt="" title="" border="0" /></a>
<div id="1" style="position:absolute;left:0;top:20px;display:none;">
Test 1<br />
Test 2<br />
Test 3<br />
Test 4<br />
Test 5<br />
Test 6<br />
Test 7<br />
Test 8<br />
</div>
<div id="2" style="position:absolute;left:0;top:20px;display:none;">
Test 9<br />
Test 10<br />
Test 11<br />
Test 12<br />
Test 13<br />
Test 14<br />
Test 15<br />
Test 16<br />
</div>
<br />
test test
</body>
</html>

aber wenn ich jetzt ein Menü auswähle dann bleibt dieses offen.
Ich kann zwar zwichen denn Menüs hin und her klicken aber keines schließen.
Hätte es auch gerne so das wenn ich ein Menü offen habe und dann über das
andere mit der maus fahre das es dann wechselt so das ich nur ein menü nur einmal anklicke.

Danke
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück