Hilfe bei Navi

S

schnee0712

Grünschnabel
hallo. ich und ein paar freunde haben es uns zum ziel gesetzt eine rollenspielseite zu erstellen. allerdings haben wir probleme bei der navi (rollenspielvergleich.de.vu)
wenn ich zB auf "Wow" mit dem mauszeiger fahre, dann sollte sich eine untergeordnete navileiste links neben der hauptnavi öffnen. evtl mit einer leichten graphischen spielerei. das ganze ist mit php und html geschrieben und wir haben keine ahnung, wie wir das machen sollen. haben schon unzählige leute gefragt.

http://wowhandwerk.onlinewelten.com/index.php bietet oben ein beispiel (graue buttons mit roter schrift), wie ich es gerne hätte, nur eben nach links und nicht nach unten.

ich bitte um hilfe und würde mich ausgesprochen über diese freuen.
danke
 
Hallo!

1. ist pushen hier nicht erwünscht..... Du kannst Deine Postings auch editieren.
2. de vu Domains (und ähnliche) werden hier automatisch ausgefiltert (warum und weshalb, darüber gab es schon eine Diskussion).
3. das Menü ist mit JavaScript realisiert..... Deine Frage ist im PHP-Forum also deplaziert.

Im JavaScript-Forum wirst Du sicherlich zahlreiche Beiträge zum Thema Menü finden. ;)

Gruss Dr Dau
 
Ich habe mal deine Verbesserungsversuche gelöscht und den URL in einer anderen Schreibweise eingefügt. Dieses Forum zensiert leider „.de.vu“-Adressen.
 
hm...
ich habe versucht meinen beitrag zu editieren oder gar zu löschen, es aber nicht gefunden.
du bist der meinung, dass das, was ich haben möchte nur mit einem java-script zu erreichen ist?
dann darf man dieses thema auch gerne verschieben
mfg
 
Nicht nur mit JavaScript..... sicherlich auch mit CSS..... aber ganz sicher nicht mit PHP. ;)

Zum editieren einfach bei dem entsprechenden Posting auf "Ändern" klicken.
Und halte Dich bitte an die Gross-/Kleinschreibung (siehe Netiquette).
Ich habe den Beitrag bereits zum verschieben gemeldet..... die Mods sind bloss nicht mehr die Jüngsten. *duck* ;)
 
Hallo schnee0712!

Als neu registriertes Forumsmitglied möchte ich dich darauf hinweisen, daß in diesem Forum großer Wert auf die Groß- und Kleinschreibung gelegt wird - siehe hierzu auch die Netiquette Nr.15.

Das Thema wird dann mal ins JS-Board verschoben.
 
Man mag es kaum glauben, aber ich habe es geschafft. Nun hat sich mir ein weiteres Problem geöffnet:
Alle eingebauten Sublinks in der Navi werden nach rechts geöffnet. Ich habe bereits alles durchforstet und komme einfach nicht dahinter, wie man diese nach links öffnen kann.
 
Könntest du auch den dazugehörigen Quellcode posten, damit man da einen Blick drauf werfen kann?
 
Gerne. Da ich nicht weiss, welchen Teil das betrifft werde ich alles reinkopieren.

Code: 
// Arrays for nodes and icons
var nodes		= new Array();;
var openNodes	= new Array();
var icons		= new Array(6);

// Loads all icons that are used in the tree
function preloadIcons() {
	icons[0] = new Image();
	icons[0].src = "img/plus.gif";
	icons[1] = new Image();
	icons[1].src = "img/plusbottom.gif";
	icons[2] = new Image();
	icons[2].src = "img/minus.gif";
	icons[3] = new Image();
	icons[3].src = "img/minusbottom.gif";
	icons[4] = new Image();
	icons[4].src = "img/folder.gif";
	icons[5] = new Image();
	icons[5].src = "img/folderopen.gif";
}
// Create the tree
function createTree(arrName, startNode, openNode) {
	nodes = arrName;
	if (nodes.length > 0) {
		preloadIcons();
		if (startNode == null) startNode = 0;
		if (openNode != 0 || openNode != null) setOpenNodes(openNode);
	
		if (startNode !=0) {
			var nodeValues = nodes[getArrayId(startNode)].split("|");
			document.write("<a href=\"" + nodeValues[3] + "\" onmouseover=\"window.status='" + nodeValues[2] + "';return true;\" onmouseout=\"window.status=' ';return true;\"><img src=\"img/folderopen.gif\" align=\"absbottom\" alt=\"\" />" + nodeValues[2] + "</a><br />");
		} else document.write("<img src=\"img/base.gif\" align=\"absbottom\" alt=\"\" />Navigation<br />");
	
		var recursedNodes = new Array();
		addNode(startNode, recursedNodes);
	}
}
// Returns the position of a node in the array
function getArrayId(node) {
	for (i=0; i<nodes.length; i++) {
		var nodeValues = nodes[i].split("|");
		if (nodeValues[0]==node) return i;
	}
}
// Puts in array nodes that will be open
function setOpenNodes(openNode) {
	for (i=0; i<nodes.length; i++) {
		var nodeValues = nodes[i].split("|");
		if (nodeValues[0]==openNode) {
			openNodes.push(nodeValues[0]);
			setOpenNodes(nodeValues[1]);
		}
	} 
}
// Checks if a node is open
function isNodeOpen(node) {
	for (i=0; i<openNodes.length; i++)
		if (openNodes[i]==node) return true;
	return false;
}
// Checks if a node has any children
function hasChildNode(parentNode) {
	for (i=0; i< nodes.length; i++) {
		var nodeValues = nodes[i].split("|");
		if (nodeValues[1] == parentNode) return true;
	}
	return false;
}
// Checks if a node is the last sibling
function lastSibling (node, parentNode) {
	var lastChild = 0;
	for (i=0; i< nodes.length; i++) {
		var nodeValues = nodes[i].split("|");
		if (nodeValues[1] == parentNode)
			lastChild = nodeValues[0];
	}
	if (lastChild==node) return true;
	return false;
}
// Adds a new node in the tree
function addNode(parentNode, recursedNodes) {
	for (var i = 0; i < nodes.length; i++) {

		var nodeValues = nodes[i].split("|");
		if (nodeValues[1] == parentNode) {
			
			var ls	= lastSibling(nodeValues[0], nodeValues[1]);
			var hcn	= hasChildNode(nodeValues[0]);
			var ino = isNodeOpen(nodeValues[0]);

			// Write out line & empty icons
			for (g=0; g<recursedNodes.length; g++) {
				if (recursedNodes[g] == 1) document.write("<img src=\"img/line.gif\" align=\"absbottom\" alt=\"\" />");
				else  document.write("<img src=\"img/empty.gif\" align=\"absbottom\" alt=\"\" />");
			}

			// put in array line & empty icons
			if (ls) recursedNodes.push(0);
			else recursedNodes.push(1);

			// Write out join icons
			if (hcn) {
				if (ls) {
					document.write("<a href=\"javascript: oc(" + nodeValues[0] + ", 1);\"><img id=\"join" + nodeValues[0] + "\" src=\"img/");
					 	if (ino) document.write("minus");
						else document.write("plus");
					document.write("bottom.gif\" align=\"absbottom\" alt=\"Open/Close node\" /></a>");
				} else {
					document.write("<a href=\"javascript: oc(" + nodeValues[0] + ", 0);\"><img id=\"join" + nodeValues[0] + "\" src=\"img/");
						if (ino) document.write("minus");
						else document.write("plus");
					document.write(".gif\" align=\"absbottom\" alt=\"Open/Close node\" /></a>");
				}
			} else {
				if (ls) document.write("<img src=\"img/join.gif\" align=\"absbottom\" alt=\"\" />");
				else document.write("<img src=\"img/joinbottom.gif\" align=\"absbottom\" alt=\"\" />");
			}

			// Start link
			document.write("<a href=\"" + nodeValues[3] + "\" onmouseover=\"window.status='" + nodeValues[2] + "';return true;\" onmouseout=\"window.status=' ';return true;\">");
			
			// Write out folder & page icons
			if (hcn) {
				document.write("<img id=\"icon" + nodeValues[0] + "\" src=\"img/folder")
					if (ino) document.write("open");
				document.write(".gif\" align=\"absbottom\" alt=\"Folder\" />");
			} else document.write("<img id=\"icon" + nodeValues[0] + "\" src=\"img/page.gif\" align=\"absbottom\" alt=\"Page\" />");
			
			// Write out node name
			document.write(nodeValues[2]);

			// End link
			document.write("</a><br />");
			
			// If node has children write out divs and go deeper
			if (hcn) {
				document.write("<div id=\"div" + nodeValues[0] + "\"");
					if (!ino) document.write(" style=\"display: none;\"");
				document.write(">");
				addNode(nodeValues[0], recursedNodes);
				document.write("</div>");
			}
			
			// remove last line or empty icon 
			recursedNodes.pop();
		}
	}
}
// Opens or closes a node
function oc(node, bottom) {
	var theDiv = document.getElementById("div" + node);
	var theJoin	= document.getElementById("join" + node);
	var theIcon = document.getElementById("icon" + node);
	
	if (theDiv.style.display == 'none') {
		if (bottom==1) theJoin.src = icons[3].src;
		else theJoin.src = icons[2].src;
		theIcon.src = icons[5].src;
		theDiv.style.display = '';
	} else {
		if (bottom==1) theJoin.src = icons[1].src;
		else theJoin.src = icons[0].src;
		theIcon.src = icons[4].src;
		theDiv.style.display = 'none';
	}
}
// Push and pop not implemented in IE(crap!    don´t know about NS though)
if(!Array.prototype.push) {
	function array_push() {
		for(var i=0;i<arguments.length;i++)
			this[this.length]=arguments[i];
		return this.length;
	}
	Array.prototype.push = array_push;
}
if(!Array.prototype.pop) {
	function array_pop(){
		lastElement = this[this.length-1];
		this.length = Math.max(this.length-1,0);
		return lastElement;
	}
	Array.prototype.pop = array_pop;
}
 
Hallo.
Mir hat sich ein neues Problem eröffnet. Es ist nicht ganz einfach zu beschreiben aber ich versuche es einmal:
Wenn man auf meine Seite (oben genannte um sich das Problem selbst anzusehen) kommt und die Navi betrachtet stellt man fest, dass ein untergeordneter Teil bereits offen ist. Wenn man diesen Teil schliesst und auf einen anderen klickt aktualisiert sich die Seite bekanntlich und alles beginnt von neuem.
Ich bin auf der Suche nach dem richtigen Befehl die Navi so einstellen zu können, dass sie nur dann untergeordnetet Seite öffnet, wenn der User das auch will.

Dies ist der Code meiner Navi, ich hoffe es ist der richtige.
Code: 
// Arrays for nodes and icons
var nodes		= new Array();;
var openNodes	= new Array();
var icons		= new Array(6);

// Loads all icons that are used in the tree
function preloadIcons() {
	icons[0] = new Image();
	icons[0].src = "img/plus.gif";
	icons[1] = new Image();
	icons[1].src = "img/plusbottom.gif";
	icons[2] = new Image();
	icons[2].src = "img/minus.gif";
	icons[3] = new Image();
	icons[3].src = "img/minusbottom.gif";
	icons[4] = new Image();
	icons[4].src = "img/folder.gif";
	icons[5] = new Image();
	icons[5].src = "img/folderopen.gif";
}
// Create the tree
function createTree(arrName, startNode, openNode) {
	nodes = arrName;
	if (nodes.length > 0) {
		preloadIcons();
		if (startNode == null) startNode = 0;
		if (openNode != 0 || openNode != null) setOpenNodes(openNode);
	
		if (startNode !=0) {
			var nodeValues = nodes[getArrayId(startNode)].split("|");
			document.write("<a href=\"" + nodeValues[3] + "\" onmouseover=\"window.status='" + nodeValues[2] + "';return true;\" onmouseout=\"window.status=' ';return true;\"><img src=\"img/folderopen.gif\" align=\"absbottom\" alt=\"\" />" + nodeValues[2] + "</a><br />");
		} else document.write("<img src=\"img/base.gif\" align=\"absbottom\" alt=\"\" />Navigation<br />");
	
		var recursedNodes = new Array();
		addNode(startNode, recursedNodes);
	}
}
// Returns the position of a node in the array
function getArrayId(node) {
	for (i=0; i<nodes.length; i++) {
		var nodeValues = nodes[i].split("|");
		if (nodeValues[0]==node) return i;
	}
}
// Puts in array nodes that will be open
function setOpenNodes(openNode) {
	for (i=0; i<nodes.length; i++) {
		var nodeValues = nodes[i].split("|");
		if (nodeValues[0]==openNode) {
			openNodes.push(nodeValues[0]);
			setOpenNodes(nodeValues[1]);
		}
	} 
}
// Checks if a node is open
function isNodeOpen(node) {
	for (i=0; i<openNodes.length; i++)
		if (openNodes[i]==node) return true;
	return false;
}
// Checks if a node has any children
function hasChildNode(parentNode) {
	for (i=0; i< nodes.length; i++) {
		var nodeValues = nodes[i].split("|");
		if (nodeValues[1] == parentNode) return true;
	}
	return false;
}
// Checks if a node is the last sibling
function lastSibling (node, parentNode) {
	var lastChild = 0;
	for (i=0; i< nodes.length; i++) {
		var nodeValues = nodes[i].split("|");
		if (nodeValues[1] == parentNode)
			lastChild = nodeValues[0];
	}
	if (lastChild==node) return true;
	return false;
}
// Adds a new node in the tree
function addNode(parentNode, recursedNodes) {
	for (var i = 0; i < nodes.length; i++) {

		var nodeValues = nodes[i].split("|");
		if (nodeValues[1] == parentNode) {
			
			var ls	= lastSibling(nodeValues[0], nodeValues[1]);
			var hcn	= hasChildNode(nodeValues[0]);
			var ino = isNodeOpen(nodeValues[0]);

			// Write out line & empty icons
			for (g=0; g<recursedNodes.length; g++) {
				if (recursedNodes[g] == 1) document.write("<img src=\"img/line.gif\" align=\"absbottom\" alt=\"\" />");
				else  document.write("<img src=\"img/empty.gif\" align=\"absbottom\" alt=\"\" />");
			}

			// put in array line & empty icons
			if (ls) recursedNodes.push(0);
			else recursedNodes.push(1);

			// Write out join icons
			if (hcn) {
				if (ls) {
					document.write("<a href=\"javascript: oc(" + nodeValues[0] + ", 1);\"><img id=\"join" + nodeValues[0] + "\" src=\"img/");
					 	if (ino) document.write("minus");
						else document.write("plus");
					document.write("bottom.gif\" align=\"absbottom\" alt=\"Open/Close node\" /></a>");
				} else {
					document.write("<a href=\"javascript: oc(" + nodeValues[0] + ", 0);\"><img id=\"join" + nodeValues[0] + "\" src=\"img/");
						if (ino) document.write("minus");
						else document.write("plus");
					document.write(".gif\" align=\"absbottom\" alt=\"Open/Close node\" /></a>");
				}
			} else {
				if (ls) document.write("<img src=\"img/join.gif\" align=\"absbottom\" alt=\"\" />");
				else document.write("<img src=\"img/joinbottom.gif\" align=\"absbottom\" alt=\"\" />");
			}

			// Start link
			document.write("<a href=\"" + nodeValues[3] + "\" onmouseover=\"window.status='" + nodeValues[2] + "';return true;\" onmouseout=\"window.status=' ';return true;\">");
			
			// Write out folder & page icons
			if (hcn) {
				document.write("<img id=\"icon" + nodeValues[0] + "\" src=\"img/folder")
					if (ino) document.write("open");
				document.write(".gif\" align=\"absbottom\" alt=\"Folder\" />");
			} else document.write("<img id=\"icon" + nodeValues[0] + "\" src=\"img/page.gif\" align=\"absbottom\" alt=\"Page\" />");
			
			// Write out node name
			document.write(nodeValues[2]);

			// End link
			document.write("</a><br />");
			
			// If node has children write out divs and go deeper
			if (hcn) {
				document.write("<div id=\"div" + nodeValues[0] + "\"");
					if (!ino) document.write(" style=\"display: none;\"");
				document.write(">");
				addNode(nodeValues[0], recursedNodes);
				document.write("</div>");
			}
			
			// remove last line or empty icon 
			recursedNodes.pop();
		}
	}
}
// Opens or closes a node
function oc(node, bottom) {
	var theDiv = document.getElementById("div" + node);
	var theJoin	= document.getElementById("join" + node);
	var theIcon = document.getElementById("icon" + node);
	
	if (theDiv.style.display == 'none') {
		if (bottom==1) theJoin.src = icons[3].src;
		else theJoin.src = icons[2].src;
		theIcon.src = icons[5].src;
		theDiv.style.display = '';
	} else {
		if (bottom==1) theJoin.src = icons[1].src;
		else theJoin.src = icons[0].src;
		theIcon.src = icons[4].src;
		theDiv.style.display = 'none';
	}
}
// Push and pop not implemented in IE(crap!    don´t know about NS though)
if(!Array.prototype.push) {
	function array_push() {
		for(var i=0;i<arguments.length;i++)
			this[this.length]=arguments[i];
		return this.length;
	}
	Array.prototype.push = array_push;
}
if(!Array.prototype.pop) {
	function array_pop(){
		lastElement = this[this.length-1];
		this.length = Math.max(this.length-1,0);
		return lastElement;
	}
	Array.prototype.pop = array_pop;
}

Ich würde mich über jede Hilfe freuen, bastel schon sehr lange daran herum. Finde es aber leider nicht.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück