[HTML/Javascript] Ein Aufklapp-Menü erstellen, das bei allen Browsern läuft?

[theHacker]

was soll eigentlich die var show... müsste die nich id heißen?

Stimmt Ich hatte den Code doch bei mir getestet. Wundert mich, dass es trotzdem funktioniert hat

Na, kann mir beim letzten Schritt noch jemand helfen?

Jetzt schieb halt ned die ganze Zeit Ruhig auch mal selber versuchen, etwas zu schaffen, auch wenn keiner dabei is.

Du hast die Stelle, an der initial das default-Menü geöffnet wird ? An dieser Stelle schließt du vorher alle vorhandenen Menüs. Hierzu setzt du den display-Style bei allen Menüs auf 'none', genauso wie es auch die Funktion show() macht.

 

[BartTheDevil89]

Du hast die Stelle, an der initial das default-Menü geöffnet wird ? An dieser Stelle schließt du vorher alle vorhandenen Menüs. Hierzu setzt du den display-Style bei allen Menüs auf 'none', genauso wie es auch die Funktion show() macht.

Du meinst nach diesem Punkt hier, oder?:


if(currentshown != 'none'){


Und dort eben drunter dann:

document.getElementById('menu_foo).style.display='none';
document.getElementById('menu_foobar).style.display='none';
document.getElementById('menu_foobar2).style.display='none';
document.getElementById('menu_bar).style.display='none';

Oder wie meinst du das?

Denn so, wie oben genannt gehts irgendwie nicht.

 

[theHacker]

Du meinst nach diesem Punkt hier, oder?:


if(currentshown != 'none'){

Ne, den mein ich ned.
Nochmal kurz abschalten, Brain neu booten und dann ganz logisch rangehen: Wo zeigst du das Menü, welches per PHP ausgewählt wird, an ?

Nur mal als Denkanstoß: Werden die Menüs bei jedem Klick alle geschlossen ?

document.getElementById('menu_foo).style.display='none';
document.getElementById('menu_foobar).style.display='none';
document.getElementById('menu_foobar2).style.display='none';
document.getElementById('menu_bar).style.display='none';

Da fehlen btw überall die Hochkommata, d.h. das gibt dir eh nur Syntaxfehler.
Das sind zumindest die korrekten Zeilen, wenn du das ausgebessert hast. Nur noch an die richtige Stelle hinschrieben.

 

[tleilax]

Falls das Ganze etwas generischer gelöst werden soll, hätte ich die folgende Klasse im Angebot:

/*  MenuToggler JavaScript framework, version 0.9
 *  (c) 2007 Jan-Hendrik Willms <[email protected]>
 *
 *  Permission is hereby granted, free of charge, to any person obtaining a
 *  copy of this software and associated documentation files (the "Software"),
 *  to deal in the Software without restriction, including without limitation
 *  the rights to use, copy, modify, merge, publish, distribute, sublicense,
 *  and/or sell copies of the Software, and to permit persons to whom the
 *  Software is furnished to do so, subject to the following conditions:
 *
 *  The above copyright notice and this permission notice shall be included in
 *  all copies or substantial portions of the Software.
 *
 *  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 *  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 *  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
 *  THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 *  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 *  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
 *  DEALINGS IN THE SOFTWARE.
 */
Function.prototype.bind = function(object) {
	var method = this;
	return function() {
		return method.apply(object, arguments);
	}
}

MenuToggler = function(id, header_class, items_class, active_class) {
	this.navigation_element = document.getElementById(id || 'navigation');
	this.header_class = header_class || 'header';
	this.items_class = items_class || 'items';
	this.active_class = active_class || 'active';
	this.active_item = null;

	for (i=0, nodes=this.navigation_element.getElementsByTagName('*'); i<nodes.length; i++) {
		if (nodes[i].nodeType!=1 || (nodes[i].className!=this.header_class && nodes[i].className!=this.items_class)) {
			continue;
		}
		if (nodes[i].className==this.header_class) {
			if (this.active_item==null) {
				nodes[i].className += ' '+this.active_class;
			}
			this.observe(nodes[i], 'click', this.toggle.bind(this));
		} else {
			if (this.active_item == null) {
				this.active_item = nodes[i];
			} else {
				nodes[i].style.display = 'none';
			}
		}
	}
}
MenuToggler.prototype.toggle = function(event) {
	event = event || window.event;
	var header_element = event.target || event.srcElement;
	var menu_element = header_element;
	do {
		menu_element = menu_element.nextSibling;
	} while (menu_element && (menu_element.nodeType!=1 || menu_element.className!=this.items_class));

	menu_element.style.display = (menu_element.style.display=='none') ? 'block' : 'none';
	if (this.active_item!=menu_element) {
		this.removeActiveClass();
		header_element.className += ' '+this.active_class;

		this.active_item.style.display = 'none';
		this.active_item = menu_element;
	}

	// Stop event
    if (event.preventDefault) {
      event.preventDefault();
      event.stopPropagation();
    } else {
      event.returnValue = false;
      event.cancelBubble = true;
    }
}
MenuToggler.prototype.removeActiveClass = function() {
	for (var i=0, nodes=this.navigation_element.getElementsByTagName('*'); i<nodes.length; i++) {
		if (nodes[i].className.indexOf(this.active_class)>=0) {
			var classes = nodes[i].className.split(' ');
			for (var j=0, idx=0; j<classes.length; j++) {
				if (classes[j]==this.active_class) {
					idx=j;
				}
			}
			classes.splice(idx, 1);
			nodes[i].className = classes.join(' ');
		}
	}
}
MenuToggler.prototype.observe = function(element, event, observer) {
	if (element.addEventListener) {
		element.addEventListener(event, observer, false);
	} else if (element.attachEvent) {
		element.attachEvent('on'+event, observer);
	}
}

Aufruf erfolgt im idealen Fall über new MenuToggler();, wenn man sich an die folgenden Vorgaben hält:

• Die Navigation befindet sich in einem Container mit der ID #navigation.
• Die Überschriften der Menüpunkte befinden sich in einem Element mit der Klasse header.
• Die Menüblöcke befinden sich in einem Container mit der Klasse items.
• Überschrift und Menüblock befinden sich im DOM auf der gleichen Ebene und die Überschrift ist vor dem Menüblock zu finden.

Ansonsten erwartet der Konstruktor die folgenden Parameter in der aufgeführten Reihenfolge:

1. ID der Navigation
2. Klassenname der einzelnen Überschriftenelemente
3. Klassenname der einzelnen Menüblöcke
4. Klassenname für aktive Menüblöcke
   Der Überschrift des Blocks wird beim Klick diese Klasse zugewiesen

Beim Laden wird der erste Menüblock geöffnet angezeigt.

Ein Beispiel, das zum Verständnis beitragen dürfte:

<script type="text/javascript" src="menutoggler.js"></script>

<script type="text/javascript">
//<![CDATA[
window.onload = function() {
	new MenuToggler();
	new MenuToggler('navigation2', 'foo', 'bar', 'aktiv');
}
//]]>
</script>
<style type="text/css">
.foobar {
	width: 200px;
	float: left;
	background-color: lightgreen;
	border: 1px solid green;
	border-collapse: collapse;

}
.aktiv {
	background-color: red;
}
</style>
<div id="navigation" style="position: absolute; left: 10px; top: 20px; background-color: orange; padding: 5px; border: 1px solid red;">
	<div class="header">Menu 1</div>
	<ul class="items">
		<li>Punkt 1</li>
		<li>Punkt 2</li>
		<li>Punkt 3</li>
		<li>Punkt 4</li>
	</ul>
	<div class="header">Menu 2</div>
	<ul class="items">
		<li>Punkt 1</li>
		<li>Punkt 2</li>
		<li>Punkt 3</li>
		<li>Punkt 4</li>
	</ul>
	<div class="header">Menu 3</div>
	<ul class="items">
		<li>Punkt 1</li>
		<li>Punkt 2</li>
		<li>Punkt 3</li>
		<li>Punkt 4</li>
	</ul>
	<a class="header" href="#">Menu 4</a>
	<ul class="items">
		<li>Punkt 1</li>
		<li>Punkt 2</li>
		<li>Punkt 3</li>
		<li>Punkt 4</li>
	</ul>
</div>

<div id="navigation2" style="position: absolute; right: 20px; top: 10px;">
	<div class="foobar">
		<div class="foo">test</div>
		<div class="bar">
			<a href="#">pi</a> |
			<a href="#">pa</a> |
			<a href="#">po</a>
		</div>
	</div>
	<div class="foobar">
		<div class="foo">test</div>
		<div class="bar">
			<a href="#">pi</a> |
			<a href="#">pa</a> |
			<a href="#">po</a>
		</div>
	</div>
	<div class="foobar">
		<div class="foo">test</div>
		<div class="bar">
			<a href="#">pi</a> |
			<a href="#">pa</a> |
			<a href="#">po</a>
		</div>
	</div>
	<br style="clear: left;"/>
</div>

Bei Anregungen einfach an mich wenden...