Bei Seite neuladen geht die ganze Navigation für 1 Sekunde auf

[frick.christian]

Hallo Contao-Freunde

Ich habe ein Problem, bei dem Ihr mir hoffentlichhelfen könnt =)

Wenn man einen Navigationspunkt anklickt, geht die ganze Navigation(Alle Menüpunkte Level_2) kurz auf, ist es möglich dies zu verhindern?

Link

Danke für eure Hilfe und Tipps!
Gruss
Chrigi

[andreas.schempp]

Hallo Chrigi,

Das kommt wohl auf den Browser an. Ich vermute du siehst das im Internet Explorer? Bei Safari sehe ich keine Verzögerung. Leider kann ich da nicht viel tun, denn sonst funktioniert der Non-Javascript-Fallback nicht.

[Thoni]

Beim IE7 ist zum Beispiel zuerst das ganze Menü auf.
Es wird wohl mit JS minimiert.

Eine Möglichkeit wäre, die Unterpunkte per display:none auszuschalten und die selben Punkte im <noscript> anzuzeigen, damit das Menü auch ohne JS sichtbar ist.

Gruß
Thoni

[andreas.schempp]

Ich finde der zusätzliche Dateninhalt lohnt sich nicht, um nur den IE7 zu unterstützen ;-)
Mit Template-Anpassungen kannst du das ev. erreichen. Aber soviel zum Thema "Progressive Enhancements"

[Thoni]

Vielleicht sollte man erst mal auflisten, in welchen Browsern das so ist.

Im Safari ist es auch so.
Weitere?

Man kann nur Tipps geben, was frick.christian daraus macht, muss er selbst entscheiden.

Wegen der Barrierefreiheit würde ich auf JS-Menüs verzichten. Das ist aber nur meine persönliche Einstellung und weder Aufforderung noch Tipp.

Gruß
Thoni

[frick.christian]

Vielleicht sollte man erst mal auflisten, in welchen Browsern das so ist.

Im Safari ist es auch so.
Weitere?

Man kann nur Tipps geben, was frick.christian daraus macht, muss er selbst entscheiden.

Wegen der Barrierefreiheit würde ich auf JS-Menüs verzichten. Das ist aber nur meine persönliche Einstellung und weder Aufforderung noch Tipp.

Gruß
Thoni

Hallo Danke schonmal für eure Feedbacks!
Diese Problem tritt bei jedem Browser auf, je nach lade Geschwindigkeit des Scripts wird es bei mir (Chrome) manchmal angezeigt und manchmal nicht.

Wenn es durch eine Scriptänderung möglich wäre und nicht anders, würde ich dies gern mal testen =)
Bin nicht so JS gelehrt, darum bräuchte ich da ein wenig Unterstützung =)

Danke für eure weiteren Antworten!
Chrigi

[Thoni]

Kannst du die <noscript> Bereiche einbauen und die normale 2. Ebene auf display:none setzen?

Ich kenne das Script nicht so genau, vielleicht funktioniert es ja auch ohne Anpassungen.

Ich helfe gern weiter, wenn du Hilfe brauchst - melde dich einfach.

Gruß
Thoni

[schman]

ev hängt es aber auch damit zusammen das die ganze webseite (die Texte) ebenfalls Bilder sind. Wenn es normaler Text ist wird die Seite wahrscheinlich schneller geladen. Vielleicht "löst" das auch das Problem mit der Navi.

PS: Ich konnte keinen "ruckler" feststellen
mit FF und Chrome unter Win7

[frick.christian]

ev hängt es aber auch damit zusammen das die ganze webseite (die Texte) ebenfalls Bilder sind. Wenn es normaler Text ist wird die Seite wahrscheinlich schneller geladen. Vielleicht "löst" das auch das Problem mit der Navi.

PS: Ich konnte keinen "ruckler" feststellen
mit FF und Chrome unter Win7

Der Kunde will die Corporate Schrift verwenden und ich sehe keine andere Lösungen ausser dies mit image_headline zu lösen.
Aber möglich ist es, werde trotzdem mal mit Thoni seine Lösungsidee versuchen.

[Thoni]

Die Bilder kann man noch 'verkleinern'.

Wenn man zu schnell über das Menü geht und auf einem Punkt stehen bleibt, öffnet es nicht immer korrekt.

[Thoni]

Ich habe es mir nochmal genauer angesehen.

Mit ...

li.sibling ul.level_2 {
    FILTER: alpha(opacity=0);
    HEIGHT: 0px;
}

... müßte das Menü beim Start erst mal weg sein und die aktiven Punkte ggf. offen lassen.

Falls das so funktioniert, wäre das die eleganteste Lösung, meine ich.

Ohne JS muss man allerdings erst den Haupt-Menüpunkt anklicken, um die Unterpunkte zu sehen.

Gib bitte Rückmeldung, ob es so funktioniert.

Gruß
Thoni

[frick.christian]

Lösung

Habe nun die ul.level_2 auf standardmässig display:none gesetzt und bei li:hover ul.level_2, li.trail ul.level_2, li.active ul.level_2 auf display:block

Funktioniert so in allen Browsern.

[andreas.schempp]

Der Kunde will die Corporate Schrift verwenden und ich sehe keine andere Lösungen ausser dies mit image_headline zu lösen.

Bilder als Text sind seeehr veraltet... Da gibt es Cufón, @font-face und noch ein paar andere Möglichkeiten, vielleicht solltest du besser die verwenden.

[Thoni]

Bilder als Text sind seeehr veraltet... Da gibt es Cufón, @font-face und noch ein paar andere Möglichkeiten, vielleicht solltest du besser die verwenden.

Hallo Andreas,

du machst mich neugierig.
Ich nutze @font-face, aber da machen nicht alle Browser mit.
Was funktioniert denn in allen Browsern?
D.h. auch ohne JavaScript, CSS3 und HTML5.
Kannst du mir da Tipps geben?

Danke
Thoni

[andreas.schempp]

Das optimale wäre aus meiner Sicht ein @font-face mit Cufón-Fallback. Das Modul habe ich aber noch nicht fertiggestellt ;-)

Font-Face funktioniert eigentlich nur in älteren Browsern nicht, und in den meisten Fällen sind die wohl eher vernachlässigbar. Stichwort "Progressive Enhancements".