hilfe bei menu änderung

kuma2 · 31. Mai 2005

Hallo Zusammen,
ich versuch seit Tagen verzweifelt das schöne js menü von squidfingers.com zu ändern. Leider komme ich mit meinen rudimentären js Kenntnissen nicht recht weiter. Vielleicht könnte mich jemand mal auf die richtige Lösung schubsen. hier seht ihr das menu im Einsatz http://www.squidfingers.com/code/dhtml/?id=expandingmenu beim klick auf einen sub Menupunkt wird meine seite neu aufgerufen und dabei eine get Variable übergeben. Aufgrund der Variablen wird per php dann der inhalt in ein div included. Soweit sogut. das Problem ist nur das menü ist dann natürlich wieder geschlossen.

ich müsste also den gerade angelickten Menüpunkt in einerVariablen speichern und diesen wieder öffnen. ---> genau das bekomm ich nicht hin. Unten mal der Quelltext. für jegliche Hilfe bin ich euch sehr dankbar!

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Expanding Menu</title>

<style type="text/css">

body {
background-color: #faf7ec;
margin: 0;
padding: 50px 0 0 150px;
}

ul#menu {
width: 100px;
list-style-type: none;
border-top: solid 1px #b9a894;
margin: 0;
padding: 0;
}

ul#menu ol {
display: none;
text-align: right;
list-style-type: none;
margin: 0;
padding: 5px;
}

ul#menu li, 
ul#menu a {
font-family: verdana, sans-serif;
font-size: 11px;
color: #785a3c;
}

ul#menu li {
border-bottom: solid 1px #b9a894;
line-height: 15px;
}

ul#menu ol li {
border-bottom: none;
}

ul#menu ol li:before {
content: "- ";
}

ul#menu a {
text-decoration: none;
outline: none;
}

ul#menu a:hover {
color: #539dbc;
}

ul#menu a.active {
color: #be5028;
}

</style>

<script type="text/javascript">

// ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
// 
// Coded by Travis Beckham
// http://www.squidfingers.com | http://www.podlob.com
// If want to use this code, feel free to do so, but please leave this message intact.
//
// ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
// --- version date: 06/02/03 ---------------------------------------------------------

// ||||||||||||||||||||||||||||||||||||||||||||||||||
// Node Functions

if(!window.Node){
	var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}
function checkNode(node, filter){
	return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
}
function getChildren(node, filter){
	var result = new Array();
	var children = node.childNodes;
	for(var i = 0; i < children.length; i++){
		if(checkNode(children[i], filter)) result[result.length] = children[i];
	}
	return result;
}
function getChildrenByElement(node){
	return getChildren(node, "ELEMENT_NODE");
}
function getFirstChild(node, filter){
	var child;
	var children = node.childNodes;
	for(var i = 0; i < children.length; i++){
		child = children[i];
		if(checkNode(child, filter)) return child;
	}
	return null;
}
function getFirstChildByText(node){
	return getFirstChild(node, "TEXT_NODE");
}
function getNextSibling(node, filter){
	for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
		if(checkNode(sibling, filter)) return sibling;
	}
	return null;
}
function getNextSiblingByElement(node){
	return getNextSibling(node, "ELEMENT_NODE");
}

// ||||||||||||||||||||||||||||||||||||||||||||||||||
// Menu Functions & Properties

var activeMenu = null;

function showMenu(){
	if(activeMenu){
		activeMenu.className = "";
		getNextSiblingByElement(activeMenu).style.display = "none";
	}
	if(this == activeMenu){
		activeMenu = null;
	}else{
		this.className = "active";
		getNextSiblingByElement(this).style.display = "block";
		activeMenu = this;
	}
	return false;
}
function initMenu(){
	var menus, menu, text, a, i;
	menus = getChildrenByElement(document.getElementById("menu"));
	for(i = 0; i < menus.length; i++){
		menu = menus[i];
		text = getFirstChildByText(menu);
		a = document.createElement("a");
		menu.replaceChild(a, text);
		a.appendChild(text);
		a.href = "#";
		a.onclick = showMenu;
		a.onfocus = function(){this.blur()};
	}
}

// ||||||||||||||||||||||||||||||||||||||||||||||||||

if(document.createElement) window.onload = initMenu;

</script>

</head>
<body>

<ul id="menu">
	<li>Menu Item 1
		<ol>
			<li><a href="<? echo $_SERVER['PHP_SELF']?>?a=1">Sub Item 1.1</a></li>
			<li><a href="#">Sub Item 1.2</a></li>
			<li><a href="#">Sub Item 1.3</a></li>
		</ol>
	</li>

	<li>Menu Item 2
		<ol>
			<li><a href="#">Sub Item 2.1</a></li>
			<li><a href="#">Sub Item 2.2</a></li>
			<li><a href="#">Sub Item 2.3</a></li>
		</ol>
	</li>
	<li>Menu Item 3
		<ol>

			<li><a href="#">Sub Item 3.1</a></li>
			<li><a href="#">Sub Item 3.2</a></li>
			<li><a href="#">Sub Item 3.3</a></li>
		</ol>
	</li>
	<li>Menu Item 4
		<ol>
			<li><a href="#">Sub Item 4.1</a></li>

			<li><a href="#">Sub Item 4.2</a></li>
			<li><a href="#">Sub Item 4.3</a></li>
		</ol>
	</li>
	<li>Menu Item 5
		<ol>
			<li><a href="#">Sub Item 5.1</a></li>
			<li><a href="#">Sub Item 5.2</a></li>

			<li><a href="#">Sub Item 5.3</a></li>
		</ol>
	</li>
</ul>

</body>
</html>

<?php
if ($a == 1) {
   include 'browser.php';
} else {
   echo "nichts vorhanden";
}
?>

Sven Mintel · 1. Juni 2005

Du musst da nichts speichern.... lese die aktuelle location des Fensters aus, und vergleiche sie mit den Zielen aller Links.
Findest du eine Übereinstimmung, hast du den angeklickten Link gefunden und musst dessen Eltern-<ol> sichtbar machen.

Ubrigens: Wirf bitte mal einen kurzen Blick ans Ende meiner Signatur.

kuma2 · 1. Juni 2005

Danke Dir für dein Hilfe - ich habe den vrohergehenden Beitrag nochmal editiert.
Deine Idee hört sich super an. Ich hab mich nunmal rumgepielt. Meine rudimentären js Kenntnisse haben nun ein kleines js produziert. Leider funktioniert es noch nicht so ganz. Vielleicht könntest Du mal kurz einen Blick drauf werfen? (beim weitergehenden Ausklappen des menus bin ich noch nicht - hier erstmal der link Vergleich)

HTML:

alert(window.location.pathname);
lnks = document.getElementsByTagName("a");
for(i=0; i<lnks.length; i++) {
if (lnks[i] == window.location.pathname) {
 alert('link gefunden');
 
 }
}

host und dateiname sind eigentlich identisch

Sven Mintel · 2. Juni 2005

Du musst das href-Attribut der Links zum Vergleich heranziehen:

Code:

for(i = 0; i < document.links.length; ++i) 
    {
        if (document.links[i].href == window.location) 
            {
                alert('link gefunden');
            }
    }

hilfe bei menu änderung

kuma2

Grünschnabel

Sven Mintel

Mitglied

kuma2

Grünschnabel

Sven Mintel

Mitglied

Neue Beiträge