Menü soll aufgeklappt bleiben

waro0815

Grünschnabel
Hallo zusammen,

ich versuche in meine Homepage ein Aufklappmenü einzubauen, das ganze klappt soweit gut, aber leider scheitere ich an einem kleinen Problem.

Die Seite ist mit PHP und Divs aufgebaut, das Menü ganz normal mittels include eingebunden.

Seitenaufruf erfolg über folgende Funktion:
PHP:
<script type="text/javascript">
<!--

    var objMenu;

    //Wenn immer nur ein Punkt pro Level ausgeklappt werden soll, true...sonst false
    blnSingleMode = true;


    function toggle(objItem)
    {
     if(blnSingleMode)
        {
            arrChilds = objItem.parentNode.parentNode.childNodes;

            for(i = 0; i < arrChilds.length; ++i)
                {
                    if( arrChilds[i].nodeType == 1
                            && arrChilds[i] != objItem.parentNode
                                && arrChilds[i].tagName == 'LI')
                                    {
                                        for( j = 0 ; j < arrChilds[i].getElementsByTagName('UL').length; ++j)
                                            {
                                                arrChilds[i].getElementsByTagName('UL')[j].style.display = 'none'
                                            }
                                    }
                 }
        }

     for(i = 0; i < objItem.parentNode.childNodes.length; ++i)
        {
            if(objItem.parentNode.childNodes[i].nodeType == 1
                    && objItem.parentNode.childNodes[i].tagName == 'UL')
                        {
                            objItem.parentNode.childNodes[i].style.display =
                                (objItem.parentNode.childNodes[i].style.display=='block')
                                    ? 'none'
                                    : 'block';
                        }
        }

    }



    function init_menu()
    {
      objMenu = document.getElementById('menu');

      for(i = 0; i < objMenu.getElementsByTagName('span').length; ++i)
         {
            objMenu.getElementsByTagName('span')[i].style.cursor = 'pointer';
            objMenu.getElementsByTagName('span')[i].onclick = new Function('DM','toggle(this,false)');
        }
    }


    if(document.getElementById)
      {
        with(document)
            {
                writeln('<style type="text/css">');
                writeln('#menu ul {display:none;}');
                writeln('<\/style>');
            }
        window.onload=init_menu;
      }
//-->
</script>
<div id="navi">

    <ul id="menu">
        <li><span><a href="index.php">Startseite</a></span></li>
        <li><span><a href="?s=n">Neuigkeiten</a></span></li>

		<li><span>Termine</span>
                    <ul>
                        <li><a href="?s=t">Aktuell</a></li>
                        <li><a href="?s=t&a=archiv">Archiv</a></li>
                    </ul>
				</li>

        <li><span>Tourenberichte</span>
            <ul>
                <li><span>Südtirol 2009</span>
                    <ul>
                        <li><a href="#">Bericht</a></li>
                        <li><a href="#">Bilder</a></li>
                    </ul>
				</li>

                <li><span>Quer durch Niederbayern</span>
                    <ul>
                        <li><a href="#">Bericht</a></li>
                        <li><a href="#">Bilder</a></li>
                    </ul>
				</li>

				<li><span>Großglockner 2009</span>
                    <ul>
                        <li><a href="#">Bericht</a></li>
                        <li><a href="#">Bilder</a></li>
                    </ul>
				</li>
            </ul>
        </li>


       <li><span>Motorradweihen</span>
            <ul>
                <li><span>Fürstenfeldbruck 2009</span>
                    <ul>
                        <li><a href="#">Bericht</a></li>
                        <li><a href="#">Bilder</a></li>
                    </ul>
				</li>

                <li><span>EMF München 2009</span>
                    <ul>
                        <li><a href="#">Bericht</a></li>
                        <li><a href="#">Bilder</a></li>
                    </ul>
				</li>

            </ul>
        </li>
        <li><span><a href="?s=gb">Gästebuch</a></span></li>
        <li><span><a href="?s=w">Kontakt</a></span></li>
        <li><span><a href="?s=d">Disclaimer</a></span></li>
    </ul>
</div>


Wie schon geschrieben, die Navigation usw funktioniert perfekt, aber leider werden sobald ich einen Link in einer Unterkategorie anklicke und sich die Seite öffnet alle aufgeklappten Punkte geschlossen und die Navigation ist wieder im Anfangszustand.

Das ist allerdings genau das was ich nicht haben möchte.

Hoffe ich konnte mein Problem soweit verständlich rüberbringen.

Danke
Gruß Waro
 
Hi,

du könntest den span-Tags in der init_menu-Funktion zusätzlich eine ID verpassen. Diese schreibst du in der toggle-Funktion in einen Cookie.

Beim Laden der Seite versuchst du in der Initialisierungsfunktion den Cookie und damit die ID des zuletzt geöffneten Menüpunktes auszulesen. Ist eine ID vorhanden, wird die Funktion toggle aufgerufen.

Ciao
Quaese
 

Neue Beiträge

Zurück