Position im Menü für nächsten Aufruf speichern

[fritzje610]

Hallo zusammen,

ich bastele seid mehreren Tagen an einem Navigationsskript, dass ich im www gefunden habe und es für meine Bedürfnisse anpassen will.
Soweit funktioniert es auch. Problem ist nur noch, wenn ich einen Link anklicke, klappt das Menü, dadurch das die Seite neu geladen wird, wieder zu. Wie kann ich es realisieren, dass das Menü offen bleibt, wenn ein Link angeklickt wird und es nur auf und zu klappt, wenn mann die Oberpunkte anklickt? Ich habe mal die Menüstruktur und das jquery dazu unten angefügt.

Es wäre toll von euch, wenn mir einer bei der Lösung des Problems helfen könnte. Mittlerweile bin ich dadurch etwas in Zeitnot geraten.


Vielen Dank im voraus ! ! !

Gruß

Michael

<div id="navi">
        <ul class="level1">
        	<li><a class="head" href="#">Wir &uuml;ber uns</a>
        		<ul class="level2">
        			<li><a class="header" href="?ziel=wir_ueber_uns">Profil</a></li>
                    <li><a class="header" href="?ziel=struktur">Struktur</a></li>
        			<li><a class="header" href="?ziel=anreise">Anreise</a></li>
				</ul>
        	</li>
            <li><a class="head" href="#">Gesch&auml;ftsfelder</a>
            	<ul class="level2">
            		<li><a class="header" href="?ziel=geschaeftsfelder"></a></li>
                    <li><a class="header" href="?ziel=automatisierung">Automatisierung</a></li>
            		<li><a class="header" href="?ziel=energie">Energie</a></li>
            		<li><a class="header" href="?ziel=engineering">Engineering</a></li>
            		<li><a class="header" href="?ziel=fertigung">Fertigung</a></li>
            		<li><a class="head" href="?ziel=software">Programmierung</a>
            			<ul class="level3">
           					<li><a class="header" href="?ziel=entwicklung">Software</a></li>
                            <li><a class="header" href="?ziel=entwicklung">Entwicklung</a></li>
            				<li><a class="header" href="?ziel=applikationen">Applikationen</a></li>
           				</ul>
                    </li>
            	</ul>
            </li>
            <li><a class="header" href="?ziel=management">Management</a></li>
            <li><a class="header" href="?ziel=prospekte">Prospekte</a></li>
            <li><a class="header" href="?ziel=news">News</a></li>
		</ul>
</div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.accordion.js"></script>
<script type="text/javascript">
	jQuery().ready(function(){
	
	var items = $("#meny2 a").click(function(){ items.removeClass("selected"); $(this).addClass("selected"); });
	
	
	        jQuery('.level1').Accordion({
			active: 'a.selected',
			header: 'a.head',
			alwaysOpen: false,
			animated: true,
   			showSpeed: "fast",
			hideSpeed: "fast"
		});
		jQuery('.level2').Accordion({
			active: 'a.selected',
			header: 'a.head',
			alwaysOpen: false,
			animated: true,
   			showSpeed: "fast",
			hideSpeed: "fast"
		});
		jQuery('.level3').Accordion({
			active: 'a.selected',
			header: 'a.head',
			alwaysOpen: false,
			animated: true,
   			showSpeed: "fast",
			hideSpeed: "fast"
		});
		
			});
		</script>

[mermshaus]

Dieser Artikel könnte dir helfen: Javascript-Wertübergabe zwischen HTML-Dokumenten

Ich habe die window.name/storage.js-Methode vor einiger Zeit in einem ähnlichen Script implementiert und sie funktioniert prinzipiell. Allerdings habe ich bislang noch nicht den Aufwand betrieben, herauszubekommen, ob sich mehrere Seiten in die Quere kommen, die nacheinander im selben Fenster aufgerufen werden und diese Technik nutzen.

(Edit: Der Vollständigkeit halber (Schleichwerbung): trunk/php/menubuilder - dockyard - Project Hosting on Google Code. Code ist größtenteils ein namespace experiment gone wrong.)

[fritzje610]

Guten Morgen,

nachdem ich mich nun den ganzen Samstag mit diesem Menü abgeplagt habe und zu keinem Ergebnis kam, hab ich nochmal verschärft gegoogelt und was anderes gefunden. Das passt von Hause aus sogar noch besser, hat aber auch einen kleinen Schönheitsfehler. Zumindest für den von mir beabsichtigten Gebrauch. Hier erstmal der Link zu dem Originalmenü.

Hier der Code der Menüstruktur:

echo "<ul id='containerul'>";

	if ($akt == "wir_ueber_uns")
	{
		echo "<li><span>Wir &uuml;ber uns</span>";
	}
	else
	{
		echo "<li><a href='?ziel=wir_ueber_uns'>Wir &uuml;ber uns</a>";
	}
		echo "<ul>";
    		if ($akt == "struktur")
			{
				echo "<li><span>Struktur</span></li>";
			}
			else
			{	
				echo "<li><a href='?ziel=struktur'>Struktur</a></li>";
    		}
			if ($akt == "anreise")
			{
				echo "<li><span>Anreise</span></li>";
			}
			else
			{
				echo "<li><a href='?ziel=anreise'>Anreise</a></li>";
    		}
		echo "</ul>";
	echo "</li>";
	if ($akt == "geschaeftsfelder")
	{
		echo "<li><span>Gesch&auml;ftsfelder</span>";
	}
	else
	{
		echo "<li><a href='?ziel=geschaeftsfelder'>Gesch&auml;ftsfelder</a>";
    }
		echo "<ul>";
    		if ($akt == "automatisierung")
			{
				echo "<li><span>Automatisierung</span></li>";
			}
			else
			{
				echo "<li><a href='?ziel=automatisierung'>Automatisierung</a></li>";
    		}
			if ($akt == "energie")
			{
				echo "<li><span>Energie</span></li>";
			}
			else
			{
				echo "<li><a href='?ziel=energie'>Energie</a></li>";
    		}
			if ($akt == "engineering")
			{
				echo "<li><span>Engineering</span></li>";
			}
			else
			{
				echo "<li><a href='?ziel=engineering'>Engineering</a></li>";
    		}
			if ($akt == "fertigung")
			{
				echo "<li><span>Fertigung</span></li>";
			}
			else
			{
				echo "<li><a href='?ziel=fertigung'>Fertigung</a></li>";
    		}
			if ($akt == "software")
			{
				echo "<li><span>Software</span>";
			}
			else
			{
				echo "<li><a href='?ziel=software'>Software</a>";
           	}
			echo "<ul>";
       			if ($akt == "entwicklung")
				{	
					echo "<li><span>Entwicklung</span></li>";
				}
				else
				{
					echo "<li><a href='?ziel=entwicklung'>Entwicklung</a></li>";
       			}
				if ($akt == "applikationen")
				{
					echo "<li><span>Applikationen</span></li>";
				}
				else
				{
					echo "<li><a href='?ziel=applikationen'>Applikationen</a></li>";
       			}
			echo "</ul>";
    		echo "</li>";
    	echo "</ul>";
	echo "</li>";
	if ($akt == "management")
	{
		echo "<li><span>Management</span></li>";
	}
	else
	{
		echo "<li><a href='?ziel=management'>Management</a></li>";
    }
	if ($akt == "prospekte")
	{
		echo "<li><span>Prospekte</span></li>";
	}
	else
	{
		echo "<li><a href='?ziel=prospekte'>Prospekte</a></li>";
    }
	if ($akt == "news")
	{
		echo "<li><span>News</span></li>";
	}
	else
	{
		echo "<li><a href='?ziel=news'>News</a></li>";
	}
echo "</ul>";
?>

<script type="text/javascript">
initiate();                // This must be placed immediately after the menu in order to format it properly.
</script>

Das ist das JS dazu:

var temp, temp2, cookieArray, cookieArray2, cookieCount;

function initiate(){

  cookieCount=0;

  if(document.cookie){

    cookieArray=document.cookie.split(";");
    cookieArray2=new Array();

    for(i in cookieArray){
      cookieArray2[cookieArray[i].split("=")[0].replace(/ /g,"")]=cookieArray[i].split("=")[1].replace(/ /g,"");
    }

  }

  cookieArray=(document.cookie.indexOf("state=")>=0)?cookieArray2["state"].split(","):new Array();

  temp=document.getElementById("containerul");

  for(var o=0;o<temp.getElementsByTagName("li").length;o++){

    if(temp.getElementsByTagName("li")[o].getElementsByTagName("ul").length>0){

      temp2                                = document.createElement("span");
      temp2.className                        = "symbols";
      temp2.style.backgroundImage        = (cookieArray.length>0)?((cookieArray[cookieCount]=="true")?"url(minus01.gif)":"url(plus01.gif)"):"url(plus01.gif)";
      temp2.onclick=function(){
        showhide(this.parentNode);
        writeCookie();
      }

      temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild)

      temp.getElementsByTagName("li")[o].getElementsByTagName("ul")[0].style.display = "none";

      if(cookieArray[cookieCount]=="true"){
        showhide(temp.getElementsByTagName("li")[o]);
      }

      cookieCount++;

    }
    else{

      temp2                                = document.createElement("span");
      temp2.className                        = "symbols";
      temp2.style.backgroundImage        = "url(page01.gif)";

      temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild);

    }

  }

}



function showhide(el){

  el.getElementsByTagName("ul")[0].style.display=(el.getElementsByTagName("ul")[0].style.display=="block")?"none":"block";

  el.getElementsByTagName("span")[0].style.backgroundImage=(el.getElementsByTagName("ul")[0].style.display=="block")?"url(minus01.gif)":"url(plus01.gif)";

}



function writeCookie(){                // Runs through the menu and puts the "states" of each nested list into an array, the array is then joined together and assigned to a cookie.

  cookieArray=new Array()

  for(var q=0;q<temp.getElementsByTagName("li").length;q++){

    if(temp.getElementsByTagName("li")[q].childNodes.length>0){
      if(temp.getElementsByTagName("li")[q].childNodes[0].nodeName=="SPAN" && temp.getElementsByTagName("li")[q].getElementsByTagName("ul").length>0){

        cookieArray[cookieArray.length]=(temp.getElementsByTagName("li")[q].getElementsByTagName("ul")[0].style.display=="block");

      }
    }

  }

  document.cookie="state="+cookieArray.join(",")+";expires="+new Date(new Date().getTime() + 365*24*60*60*1000).toGMTString();

}

Schick wäre es nun, wenn vor den einzelnen Links dieses Symbol nicht mehr angezeigt würde. Momentan habe ich die Bilddatei einfach umbenannt, so das es zumindest nicht mehr angezeigt wird.
Wie man aber im Menücode sehen kann, werden ausgewählte Links per <span>-Tag anders dargestellt.

Hier der Auszug aus der css-Datei

#containerul li
	{                
		color: #00fff0;
		font-size:12px;
		padding: 3px 3px 3px 20px;   
		display: block;
		text-decoration: none;                        
	}
	
#containerul .symbols
	{             
	 	float:left;
 		width:12px;
  		height:1em;
  		background-position:0 50%;
  		background-repeat:no-repeat;
		text-decoration: none;
	}

#containerul a
	{
		padding-left: 20px;
		color: #232323;
		text-decoration: none;
		background-image: url(../images/pfeil_sw.gif);
		background-repeat: no-repeat;
		background-position: 5px;
		
	}

#containerul a:hover
	{
		
		color: #f00;
		text-decoration: none;
		background-image: url(../images/pfeil_rot.gif);
		background-repeat: no-repeat;
		
	}

#containerul span
	{
		color: #00f;
		text-decoration: none;
		font-size:1.2em;
		border: 1px solid #00f;
		font-weight: bold;
	}

Beim span wird dann, um alle Objekte ein Border gemacht. Ich brauche diesen aber nur um Links. Sprich weder um die Plus und Minus Bildchen, die vom Menü zur Anzeige der evtl. Untermenüs genommen werden, noch um die momentan ausgeblendeten Seitensymbole.

Momentan hab eich Tomaten auf den Augen. Ich habe dann gestern Abend spät aufgegeben und mir gedacht schlaf erstmal drüber, vielleicht sieht du es ja morgen früh. Aber was soll ich sagen, ich seh's immer noch nicht.
Ich bin nicht so der js-Könner, ich vermute hier das Problem, so dass ich micht über konkrete Hilfe von euch freuen würde.


Vielen Dank ! ! !



Gruß

Michael