dynamisches menü

[Benedikt]

Hi,

ich bastel zur Zeit an einem Menü für meine Seite im Stil von Office 2007.

<div class="menu">
  <div onMouseOver="menuAction('1')">Datei</div>
  <div onMouseOver="menuAction('2')">Bearbeiten</div>
  <div onMouseOver="menuAction('3')">Suchen</div>
</div>
<div class="items">
  <div class="item" id="item_1">
    <div>Neu</div>
    <div>Öfnnen</div>
    <div>Schließen</div>
  </div>
  <div class="item" id="item_2">
    <div>Kopieren</div>
    <div>Ausschneiden</div>
    <div>Einfügen</div>
  </div>
  <div class="item" id="item_3">
    <div>nach Dateien</div>
    <div>nach Ordnern</div>
  </div>
</div>

Das ist mein HTML Code. Im 1. layer stehen alle verfügbaren Menüeinträge. In "items" stehen der Reihe nach für jeden Menüeintrag Untermenüs zur Verfügung.
Mit folgendem Javascript Code blende ich die Layer ein bzw. aus.

function menuAction(id) {
  var i = 1;
  while (document.getElementById("item_"+i) != null) {
    hideItem(document.getElementById("item_"+i++));
  }
  showItem(document.getElementById("item_"+id));
}
function showItem(obj) {
  obj.style.visibility="visible";
  obj.style.position="relative";
}
function hideItem(obj) {
  obj.style.position="absolute";
  obj.style.visibility="hidden";
}

Es blendet erst alle Layer aus und schiebt sie aus dem Grundgerüst und blendet den einen gebrauchten wieder ein. Dies funktioniert im FF auch wunderbar aber der Internet Explorer 7 spielt da nicht mit.

Ich habe es dann danmit probiert. Das funktioniert auch in beiden allerdings ist die Geschwindigkeit im Internet Explorer sehr langsam.

function showItem(obj) {
  obj.style.display="block";
}
function hideItem(obj) {
  obj.style.display="none";
}

aktueller Stand des Testmenüs: http://www.apptype.de/test/index3.htm

Wie kann man das statt dessen realisieren, oder warum ist der Internet Explorer so langsam?

[Felix Riesterer]

Lieber Benedikt,

<div class="menu">
  <div onMouseOver="menuAction('1')">Datei</div>
  <div onMouseOver="menuAction('2')">Bearbeiten</div>
  <div onMouseOver="menuAction('3')">Suchen</div>
</div>
<div class="items">
  <div class="item" id="item_1">
    <div>Neu</div>
    <div>Öfnnen</div>
    <div>Schließen</div>
  </div>
  <div class="item" id="item_2">
    <div>Kopieren</div>
    <div>Ausschneiden</div>
    <div>Einfügen</div>
  </div>
  <div class="item" id="item_3">
    <div>nach Dateien</div>
    <div>nach Ordnern</div>
  </div>
</div>

[ ] Du hast schon einmal von Div-Suppe bzw. Divitis gehört
[X] Du scherst Dich nicht um semantisches Markup
[ ] Du kennst den SELFHTML-Artikel, in dem steht, wie man es richtig macht

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Benedikt]

[ ] Du hast schon einmal von Div-Suppe bzw. Divitis gehört
[X] Du scherst Dich nicht um semantisches Markup
[ ] Du kennst den SELFHTML-Artikel, in dem steht, wie man es richtig macht

Liebe Grüße aus Ellwangen,

Felix Riesterer.

1. Ist es absolut egal ob ich ein div object oder eine Liste verwende. Der Code sieht genauso aus.
2. Keine Ahnung was es da auszusetzen gibt.
3. möchte ich kein herkömmliches Pulldownmenü so wie es in der Seite beschrieben wird. Den Lösungsansatz über display.none habe ich ebenfals verwendet.

Bleibt noch die Frage warum der Internet Explorer so lagsam ist.

[Felix Riesterer]

Lieber Benedikt,

1. Ist es absolut egal ob ich ein div object oder eine Liste verwende. Der Code sieht genauso aus.

Da irrst Du dich gewaltig! Denn:

2. Keine Ahnung was es da auszusetzen gibt.

Diese Ahnung solltest Du Dir schleunigst beschaffen! Semantischer Code ist heute wichtiger denn je, wenn Du Deine Seite besonders gut zugänglich machen möchtest. Tipp, was "semantisch" meinen könnte: Eine Navigation ist eine _Liste_ von Links, also sollte das HTML-Element diese strukturelle Eigenschaft ausdrücken (nimm <ul> oder <ol>!).

3. möchte ich kein herkömmliches Pulldownmenü so wie es in der Seite beschrieben wird. Den Lösungsansatz über display.none habe ich ebenfals verwendet.

Bleibt noch die Frage warum der Internet Explorer so lagsam ist.

Der IE (Versionen vor IE7) kann das CSS nicht korrekt umsetzen. Daher brauchst Du für ihn JavaScript-Unterstützung. Diese kann je nach Komplexität der Navi etwas dauern...

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Christoph Schnauß]

hallo,

1. Ist es absolut egal ob ich ein div object oder eine Liste verwende. Der Code sieht genauso aus.

Nein, das tut er nicht. Probiere es einfach.

2. Keine Ahnung was es da auszusetzen gibt.

Dann belies dich. DIVs _können_ nützlich sein, gerade für deine Zwecke. Aber das, was _innerghalb_ eines DIVs steht, muß nicht nochmals aus lauter DIs bestehen, und in deinem Fall wären Listen deutlich sinnvoller. Und genausoleicht zu formatieren, mit denselben Eigenschaften.

3. möchte ich kein herkömmliches Pulldownmenü so wie es in der Seite beschrieben wird.

Die angegebene Beispielseite versteht sich ausdrücklich alks Beispiel und will dichlediglich zum Gebrauch von CSS ermutigen. Die Effekte, die du haben möchtest, lassen sich damit sehr gut erreichen, du mußt lediglich verstehen, wie und wo du den Code für deine Zwecke abwandeln solltest.

Den Lösungsansatz über display.none habe ich ebenfals verwendet.

Ja, aber du hast übersehen, daß der IE7 mittlerweiele "li:hover" kann. Was dich allerdings auch wieder dazu zwingt, dann einen Workaround für IE6 vorzusehen, da der ja noch lange nicht "ausgestorben" ist.

Bleibt noch die Frage warum der Internet Explorer so lagsam ist.

Du scheinst da irgendwas herumgepopelt zu haben - am IE. Meiner ist sogar deutlich schneller als der IE6. Auch mit deinem Code.

Grüße aus Berlin

Christoph S.

[Benedikt]

Der Text für die Untermenüs ist nur zur Veranschaulichung. Es befinden sich dort nict direkt Links sondern z.b. Formulare, ganze Textabschnitte, usw. So wie es das "neue" Office 2007 bietet. Und das ganze soll nicht unter dem Hauptmenüpunkt angezeigt werden sondern an einer x-beliebigen Stelle. Zum Thema CSS. Selbstverständlich habe ich welches verwendet wenn man sich die "fertige" Seite im Link dazu ansieht. Man könnte zwar für die Elemene im Untermenü auch Listen verweden aber der Code würde dadurch auch nicht übersichtlicher.

[Benedikt]

Ich hätte vll noch erwähnen sollen das das jeweilige Untermenü dauerhaft angezeigt werden sollen und nicht nur bei :hover. Daher fällt CSS sowieso schon raus als Lösungsansatz.

[Felix Riesterer]

Lieber Benedikt,

Man könnte zwar für die Elemene im Untermenü auch Listen verweden aber der Code würde dadurch auch nicht übersichtlicher.

... aber deutlich semantischer!

Außerdem sehe ich folgendes "Problem":

#myID div div div div { } ist definitiv etwas anderes als #myID li ul li ul { }, besonders wenn es noch tiefere Verschachtelungen gibt, bei denen Du dann zwischen div div und div div unterscheiden müsstest, was Dir bei ul li und li ul längst noch nicht passiert. Bei Deiner Div-Suppe müsstest Du künstlich mit CSS-Klassen arbeiten, damit Du innerhalb Deines Div-Salates noch den Level der jeweiligen Hierarchie gebacken bekommst...

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Christoph Schnauß]

hallo Felix,

[ ] Du hast schon einmal von Div-Suppe bzw. Divitis gehört

Ich würde das hier sogar "Divititis" nennen - der medizinische Ausdruck für einen schmerzhaften entzündlichen Prozeß, der sich, falls unbehandelt, sogar zu einem bösartigen raumgreifenden Prozeß ("Tumor") entwickeln könnte. Da besteht dringender Behandlungsbedarf.

[X] Du scherst Dich nicht um semantisches Markup

Vielleicht weiß er gar nicht, was das ist?

[ ] Du kennst den SELFHTML-Artikel, in dem steht, wie man es richtig macht

Und es steht (noch?) nicht dabei, daß der von dir vorsorglich verlinkte Anker tatsächlich auf jenen Seitenabschnitt führt, der auch im IE7 funktioniert - aber im IE6 noch nicht. Was daran liegt, daß IE7 wenigstens :hover auch bei anderen Elementen als <a> versteht.

Grüße aus Berlin

Christoph S.

[Joachim]

Hi,

while (document.getElementById("item_"+i) != null) {
    hideItem(document.getElementById("item_"+i++));
  }

Es ist natürlich nicht grade resourcenschonend, jedesmal eine Schleife laufen zu lassen, wo doch eigentlich ein flag reichen würde, um das offene Menue zu speichern.

if (flag) {
   mach flag zu
}
mach neues menu auf;
flag =  neues menue;

Ab

Gruesse, Joachim