✔ Basic DHTML Menü

S

sindy

Grünschnabel
Hallo alle zusammen,

erst mal ein großes Lob an Sebastian Wramba, der das Basic DHTML Menü zur Verfügung gestellt hat! http://www.tutorials.de/forum/javascript-tutorials/24983-basic-dhtml-menue.html?referrerid=226791
Dieses Script funktioniert super und ist einfach zu bedienen.

Nun hätte ich noch eine Frage, bei der ich Hilfestellung benötige. Wie kann ich es bewerkstelligen, das die Subnavigation einer Categorie, bei Aufruf einer Untercategorie sichtbar bleibt, bis ich eine andere Categorie aufrufe?

Ich hoffe ich habe mich halbwegs verständlich ausgedrückt, zumindest so das man versteht was ich meine. :)

Euch allen noch einen schönen Tag!
Liebe Grüße
Sindy
 
Ich gehe mal davon aus, dass du beim Aufruf einer Subkategorie eine neue Seite lädts.
Da könntest du bspw. in der Funktion show() einen Cookie setzen mit der ID der anzuzeigenden Kategorie.

Beim onload aller Seiten mit dem Menu prüfst du diesen Cookie und rufst falls vorhanden die Funktion show() mit seinem Wert als Parameter auf.
Das wäre die einfache Variante...diese setzt aber vorraus, dass du nur über das Menu navigierst.

Etwas komplizierter:
Beim onload durchlaufe alle Links im Menu und vergleiche ihr Ziel mit der aktuellen URL.
Bei einem Treffer rufe ebenfalls show() auf, mit der ID der Kategorie, zu der der Link gehört.
 
Hallo Sven,

lieben Dank für deine Antwort.
Ich gehe mal davon aus, dass du beim Aufruf einer Subkategorie eine neue Seite lädts.
Zum Vergrößern anklicken....
Das ist richtig, bei jedem Aufruf wird eine neue Seite geladen.
Da könntest du bspw. in der Funktion show() einen Cookie setzen mit der ID der anzuzeigenden Kategorie.
Zum Vergrößern anklicken....
Nur habe ich noch nie einen Cookie gesetzt :confused: Kannst du mir das anhand eines kleinen Beispiels verständlich machen? Leider bin ich blutiger Anfänger in Sachen JavaScript.

Vielen Dank und liebe Grüße
Sindy
 
..vielen Dank für den Link...werde mich umgehend damit auseinandersetzen. :)

dir noch einen schönen Tag!
Liebe Grüße
Sindy
 
also ich habe es wirklich versucht.....aber das ist einfach eine Nummer zu hoch für mich.
Ich verstehe das setzen der cookies und das aufrufen überhaupt nicht. sorry :(
die cookies habe ich wie folgt versucht einzubinden:

HTML: 
<script type="text/javascript">
<!--

function show(divid) {
d=document;
d.getElementById("cat1").style.display="none";
d.getElementById("cat2").style.display="none";
d.getElementById("cat3").style.display="none";

d.getElementById(divid).style.display="inline";

}
function get_cookie('cat1')
{
    strValue = false;

    if( strCookie = document.cookie )
        {
            if( arrCookie = strCookie.match( new RegExp( cookieName + '=([^;]*)', 'g')))
                {
                    strValue=RegExp.$1;
                }
        }
    return(strValue);
}
function set_cookie('cat1','cat1sub',1)
{
    if(!is_cookie_enabled())
        {
            return false;
        }

    objNow = new Date();
    strExp = new Date( objNow.getTime() + ( intDays * 86400000) );
    document.cookie = cookieName + '=' +
                      cookieValue + ';expires=' +
                      strExp.toGMTString() + ';';
    return true;
}

//-->
</script>

und im body so...

HTML: 
<body>
.......
<a href="#" onclick="show(cookie:'cat1')"><br/>   Kategorie 1   </a><br />
<div id="cat1" style="display:none"> 
<a href="#">  Subkategorie 1.1  </a><br />
<a href="#">  Subcategorie 1.2  </a><br />
<a href="#">  Subkategorie 1.3  </a><br />
</div>
<br />
<a href="#" onclick="show('cat2')">   Kategorie 2   </a><br />
<div id="cat2" style="display:none"> 
<a href="#">    Subkategorie 2.1   </a><br />
<a href="#">    Subkategorie 2.2   </a><br />
</div>
<br />
<a href="#" onclick="show('cat3')">   Kategorie 3   </a><br />
<div id="cat3" style="display:none"> 
<a href="#">    Subkategorie 3.1   </a><br />
</div>......

ich hoffe ihr könnt mir auf die Sprünge helfen...
Lieben Dank und liebe Grüße
Sindy
 
Hi,

den entsprechenden Cookie setzt du am besten in der Funktion show. Als Name des Cookies kannst du id wählen und zugewiesen bekommt er die entsprechende ID (cat1, cat2 oder cat3).

Wird das Dokument geladen, wird im onload-Event versucht der Cookie auszulesen. Existiert ein Element zur ermittelten ID, wird die Funktion show mit dem entsprechenden String als Parameter aufgerufen.
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<script language="javascript">
<!--
function show(divid) {
  d=document;
  d.getElementById("cat1").style.display="none";
  d.getElementById("cat2").style.display="none";
  d.getElementById("cat3").style.display="none";

  d.getElementById(divid).style.display="inline";

  // Cookie setzen
  set_cookie('id', divid, 1);
}

function get_cookie( cookieName )
{
    strValue = false;

    if( strCookie = document.cookie )
        {
            if( arrCookie = strCookie.match( new RegExp( cookieName + '=([^;]*)', 'g')))
                {
                    strValue=RegExp.$1;
                }
        }
    return(strValue);
}

function set_cookie(cookieName, cookieValue, intDays)
{

    objNow = new Date();
    strExp = new Date( objNow.getTime() + ( intDays * 86400000) );
    document.cookie = cookieName + '=' +
                      cookieValue + ';expires=' +
                      strExp.toGMTString() + ';';
    return true;
}

window.onload = function(){
  // Cookie auslesen
  strID = get_cookie('id');
  // Falls das Element mit der ID existiert
  if(document.getElementById(strID) != null)
    show(strID);
}
//->
</script>
</head>
<body>
<a href="#" onclick="show('cat1')"><br/>   Kategorie 1   </a><br />
<div id="cat1" style="display:none">
<a href="#">  Subkategorie 1.1  </a><br />
<a href="#">  Subcategorie 1.2  </a><br />
<a href="#">  Subkategorie 1.3  </a><br />
</div>
<br />
<a href="#" onclick="show('cat2')">   Kategorie 2   </a><br />
<div id="cat2" style="display:none">
<a href="#">    Subkategorie 2.1   </a><br />
<a href="#">    Subkategorie 2.2   </a><br />
</div>
<br />
<a href="#" onclick="show('cat3')">   Kategorie 3   </a><br />
<div id="cat3" style="display:none">
<a href="#">    Subkategorie 3.1   </a><br />
</div>
</body>
</html>
Ciao
Quaese
 
Hallo Quaese,
vielen lieben Dank für deine Antwort, ohne die ich das nicht geschafft hätte.
Jetzt kann ich das alles nachvollziehen, was auch Sven mir schon versucht hat verständlich zu machen. Ich habe alles befolgt und es funktioniert prima :-)

Nochmal ganz lieben Dank!
und liebe Grüße
Sindy
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück