✔ Navigationsproblem: Menü verschwindet nicht mehr

RealBluescreen · 21. Februar 2007

Ich habe ein Problem mit einer von mir selbst gebastelten Navigation.

Der Code, um den es hier geht, ist nur für die Navigation und enthält auchnicht die DOCTYPS (Strict), um das ein bisschen übersichtlicher zu machen.

Das wünsche ich mir:
Ich wollte eine Navigation erstellen, bei der die Unterpunkte mit Mausklick angezeigt werden (was auch funktioniert), bei einem weiteren klick, oder dem Klick auf eine andere Kategorie wieder verschwinden (klappt nicht).

So habe ich's gemacht:
Wenn man auf die Kategorie klickt, wird eine JS-Funktion aufgerufen.
In der wird geprüft (if...), in welchem Zustand das Menü gerade ist (aus- oder eingeklappt?).
Dann sollte es je nach dem aus- bzw. eingeklappt werden, was durch das ändern der Style-Klasse geschieht.
Auf die einzelnen Elemente wird per ID zugegriffen.

Das Problem:
Das Menü klappt auf, bleibt dann aber offen.
Die Variable, die bestimmt, ob das Menü offen oder zu ist, hat immer den Wert "zu".

Mein Vermuteter Grund:
Die Variable bleibt in der Funktion nicht gespeichert?

Hat jemand ne Idee?

Code 1: Die CSS-Styles

Code:

.untergrnormal, .normaleinfach, .gruppenormal {
   background-color:#55C;
   color: #fff;
   font: bold 0.94em sans-serif;
   text-decoration: none;
   display:block;
   padding: 3px 10px;
   border: 1px solid #05b;
   margin: 0;
   width: 165px;
   -moz-border-radius:5px;
/*   border-radius:5px; */
}

.normaleinfach {
    background-color:#65C;
}

.untergrnormal {
   background-color:#5252B5;
}

.untergruppeaus {
 display:none;
}

#navigation LI {
   background-color: transparent;
   padding: 0;
   margin: 0;
   list-style: none;
   width: 165px;
   }

#navigation UL {
   background-color: transparent;
   padding: 0;
   margin: 0;
   }

#navigation A:link, #navigation A:visited {
   border: 1px solid #333399;
   }

#navigation A:hover, #navigation A:focus {
   border: 1px solid #c7c88d;
   }

Code 2: Der HTML Text (im Body-Bereich, innerhalb eines DIV-Tags mit der ID="navigtion")

HTML:

<li><a title="Kategorie 1" class="gruppenormal" id="gruppe1" onclick="kat1()" href="#">Kategorie 1</a><ul>
	<li><a title="Unterkategorie 1-1" class="untergruppeaus" id="gruppe1a" href="#">&nbsp;&nbsp;&nbsp;Unterkategorie 1.1</a></li>
	<li><a title="Unterkategorie 1-2" class="untergruppeaus" id="gruppe1b" href="#">&nbsp;&nbsp;&nbsp;Unterkategorie 1.2</a></li>
	<li><a title="Unterkategorie 1-3" class="untergruppeaus" id="gruppe1c" href="#">&nbsp;&nbsp;&nbsp;Unterkategorie 1.3</a></li>
	<li><a title="Unterkategorie 1-4" class="untergruppeaus" id="gruppe1d" href="#">&nbsp;&nbsp;&nbsp;Unterkategorie 1.4</a></li>
	<li style="visibility:hidden;" title="Platzhalter">&nbsp;</li>
</ul>

Code 3: Der JavaScript Container

Code:

function kat1() {

var gruppe1a = document.getElementById("gruppe1a");
var gruppe1b = document.getElementById("gruppe1b");
var gruppe1c = document.getElementById("gruppe1c");

if (dgruppe1 == 1) {
gruppe1a.className = "untergrnormal";
gruppe1b.className = "untergrnormal";
gruppe1c.className = "untergrnormal";
alert("1 - "+dgruppe1);
var dgruppe1 = 2;
alert("1b - "+dgruppe1);

} else if (dgruppe1 == 2) {
gruppe1a.className = "untergruppeaus";
gruppe1b.className = "untergruppeaus";
gruppe1c.className = "untergruppeaus";
alert("2 - "+dgruppe1);
var dgruppe = 1;
alert("2b - "+dgruppe1);

} else {
gruppe1a.className = "untergrnormal";
gruppe1b.className = "untergrnormal";
gruppe1c.className = "untergrnormal";
alert("3");
var dgruppe1 = 1;
}

}

Ich danke für deine Kompetente Hilfe!!

Quaese · 22. Februar 2007

Hi,

vielleicht wäre es geschickter, das Vorhaben anders zu organisieren.

Die Untermenues werden über ihren UL-Tag aus- bzw. eingeblendet.
Die Funktion durchläuft alle LI-Tags des navigation-Elements
Beim Durchlauf werden die Menuepunkt ausgeblendet (bis auf das aktivierte)
Zum Schluss wird das aktivierte Element ein- bzw. ausgeblendet (abhängig vom aktuellen Zustand)

Der Funktion wird über die this-Referenz immer das auslösende Element übergeben.

Beispiel (die IDs der Unterkategorien habe ich abgeändert):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style type="text/css">
  <!--
.untergrnormal, .normaleinfach, .gruppenormal {
   background-color:#55C;
   color: #fff;
   font: bold 0.94em sans-serif;
   text-decoration: none;
   display:block;
   padding: 3px 10px;
   border: 1px solid #05b;
   margin: 0;
   width: 165px;
   -moz-border-radius:5px;
/*   border-radius:5px; */
}

.normaleinfach {
    background-color:#65C;
}

.untergrnormal {
   background-color:#5252B5;
   background: #ccc;
}

.untergruppeaus {
 display:none;
}

/* Klassen zum Ein- bzw. Ausblenden der Unterkategorien */
.toggleOff{ display: none;}
.toggleOn{ display: block;}


#navigation LI {
   background-color: transparent;
   padding: 0;
   margin: 0;
   list-style: none;
   width: 165px;
   }

#navigation UL {
   background-color: transparent;
   padding: 0;
   margin: 0;
   }

#navigation A:link, #navigation A:visited {
   border: 1px solid #333399;
   }

#navigation A:hover, #navigation A:focus {
   border: 1px solid #c7c88d;
   }
 //-->
</style>

<script type="text/javascript">
  <!--
function kat1(objKat){
  var objFirst = document.getElementById("navigation").getElementsByTagName("li")[0];
  var objKat = objKat.parentNode;

  // Alle Menuepunkte der obersten Navigationsebene durchlaufen
  while(objFirst){
    // Falls es sich um ein LI-Tag handelt, nichtt aber um die aktive Kategorie
    if((objFirst.nodeName.toLowerCase()=="li") && (objFirst!=objKat)){
      objFirst.getElementsByTagName("ul")[0].className = "toggleOff";
    }
    // Nächstes Element auf gleicher Ebene holen
    objFirst = objFirst.nextSibling;
  }

  // Aktives Element anhand des aktuellen Zustandes ein- bzw. ausblenden
  with(objKat.getElementsByTagName("ul")[0])
    className = (className=="toggleOn")?"toggleOff":"toggleOn";
}
 //-->
</script>
</head>
<body>
<ul id="navigation">
	<li><a title="Kategorie 1" class="gruppenormal" id="gruppe1" onclick="kat1(this)" href="#">Kategorie 1</a>
	  <ul class="toggleOff">
	    <li><a title="Unterkategorie 1-1" class="untergrnormal" id="gruppe1a_0" href="#">&nbsp;&nbsp;&nbsp;Unterkategorie 1.1</a></li>
	    <li><a title="Unterkategorie 1-2" class="untergrnormal" id="gruppe1b_0" href="#">&nbsp;&nbsp;&nbsp;Unterkategorie 1.2</a></li>
	    <li><a title="Unterkategorie 1-3" class="untergrnormal" id="gruppe1c_0" href="#">&nbsp;&nbsp;&nbsp;Unterkategorie 1.3</a></li>
	    <li><a title="Unterkategorie 1-4" class="untergrnormal" id="gruppe1d_0" href="#">&nbsp;&nbsp;&nbsp;Unterkategorie 1.4</a></li>
	    <li style="visibility:hidden;" title="Platzhalter">&nbsp;</li>
	  </ul>
	</li>
	<li><a title="Kategorie 1" class="gruppenormal" id="gruppe2" onclick="kat1(this)" href="#">Kategorie 2</a>
	  <ul class="toggleOff">
	    <li><a title="Unterkategorie 1-1" class="untergrnormal" id="gruppe1a_1" href="#">&nbsp;&nbsp;&nbsp;Unterkategorie 1.1</a></li>
	    <li><a title="Unterkategorie 1-2" class="untergrnormal" id="gruppe1b_1" href="#">&nbsp;&nbsp;&nbsp;Unterkategorie 1.2</a></li>
	    <li><a title="Unterkategorie 1-3" class="untergrnormal" id="gruppe1c_1" href="#">&nbsp;&nbsp;&nbsp;Unterkategorie 1.3</a></li>
	    <li><a title="Unterkategorie 1-4" class="untergrnormal" id="gruppe1d_1" href="#">&nbsp;&nbsp;&nbsp;Unterkategorie 1.4</a></li>
	    <li style="visibility:hidden;" title="Platzhalter">&nbsp;</li>
	  </ul>
	</li>
	<li><a title="Kategorie 1" class="gruppenormal" id="gruppe3" onclick="kat1(this)" href="#">Kategorie 3</a>
	  <ul class="toggleOff">
	    <li><a title="Unterkategorie 1-1" class="untergrnormal" id="gruppe1a_2" href="#">&nbsp;&nbsp;&nbsp;Unterkategorie 1.1</a></li>
	    <li><a title="Unterkategorie 1-2" class="untergrnormal" id="gruppe1b_2" href="#">&nbsp;&nbsp;&nbsp;Unterkategorie 1.2</a></li>
	    <li><a title="Unterkategorie 1-3" class="untergrnormal" id="gruppe1c_2" href="#">&nbsp;&nbsp;&nbsp;Unterkategorie 1.3</a></li>
	    <li><a title="Unterkategorie 1-4" class="untergrnormal" id="gruppe1d_2" href="#">&nbsp;&nbsp;&nbsp;Unterkategorie 1.4</a></li>
	    <li style="visibility:hidden;" title="Platzhalter">&nbsp;</li>
	  </ul>
	</li>
</ul>
</body>
</html>

Das Ein- bzw. Ausblenden der Unterkategorien erfolgt mit Hilfe der CSS-Klassen toggleOn und toggleOff.

Vielleicht hilft Dir das weiter.

Ciao
Quaese

RealBluescreen · 25. Februar 2007

Super

Ich danke dir!

Allerdings bräuchte ich noch eine Alternativ-Version für den IE5(.5), da die Abstände dort echt katastrophal aussehen, mit Broswerweiche.
Haste ne Idee?

Könnte man auch die Farbe der aktuell gewählten Kategorie (bzw. Gruppe) einstellen? Bild

Quaese · 25. Februar 2007

Hi,

versuch es mal mit folgenden zusätzlichen CSS-Angaben:

Code:

#navigation LI {
   background-color: transparent;
   padding: 0;
   margin: 0;
   list-style: none;
   width: 165px;
   float: left;
   clear: left;}

Ciao
Quaese

✔ Navigationsproblem: Menü verschwindet nicht mehr

RealBluescreen

Mitglied

Anhänge

Quaese

Moderator

RealBluescreen

Mitglied

Quaese

Moderator

Neue Beiträge