Barrierefreies Megamenu

ringo

Hallo ich habe mir auf der Basis des "accessibleMegaMenu" von Adobe ein Menu für meine Joomla Insallation erstellt.
Das funktioniert super, auch mit der Tastatur und Bildschirmlesegeräten.
(z.b. http://panke.screendrive.de/wirtschaft/kauft-lokal.html)

Ich habe allerdings ein Problem. Nachdem ich einen Link des (Sub)menus betätigt habe, wir das Menu kurzzeitig unformatiert angezeigt.
Ich glaube dass, das mit einem Script (setTimeout) abgefangen werden soll. Bin mir aber nicht sicher weil es auch nicht funktioniert.

Code

if (jQuery) {
    (function ($) {
        "use strict";
        $(document).ready(function () {
            // initialize the megamenu
            $('.megamenu').accessibleMegaMenu();
            // hack so that the megamenu doesn't show flash of css animation after the page loads.
            setTimeout(function () {
                $('body').removeClass('init');
            }, 500);
        });
    }(jQuery));
}

Alles anzeigen

CSS

.init * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

.init ist hierbei eine Klasse des body, die verzögert entfernt wird.

Ich verstehe nicht richtig, was hier passiert. Es hat ja auch keinen Effekt.
Was kann ich tun dass dieses kurze Aufblitzen der unformatierten Navigation unterdrückt wird?

Vielen Dank für eure Hilfe

Holger

Sieger66

Warum wurde den das:

Code

/*
.init * {

  display:none;
}
.fertig* {
  display:block;
}*/

in der http://panke.screendrive.de/templates/scre…UR/css/main.css

auskommentiert bzw. unwirksam gemacht?

In der Konsole sehe ich außerdem folgende Warnung:

Zitat

Layout-Darstellung wurde erzwungen, bevor die Seite vollständig geladen war. Falls Stylesheet noch nicht geladen sind, kann dies zu einem kurzzeitigen Darstellung des Inhalts ohne Formatierung führen.

verursacht wohl durch:

http://panke.screendrive.de/templates/screendriverFOUR/plugins/modernizr.js

ringo

Danke für deine Antwort. Also das "init und fertig" sind noch reste von mir. hier hatte ich etwas ausprobiert. habe ich jetzt rausgenommen.

ausserdem habe ich die modernizr.js rausgenommen. Daran liegt es leider auch nicht. Hast du noch eine Idee?

Danke Holger

Sieger66

Ich würde das

Code

.init * {
  display: none;
  visibility: hidden ;
}

oder alternativ:

Code

body.init #menu {
  display: none;
  visibility: hidden ;
}

für uns zum weiteren testen mal "aktivieren".

Sieger66

Hallo Holger,

was mir noch nebenbei aufgefallen ist:

Wenn man dort im Menü:

panketal.de/

z.B. auf "Rathaus" klickt wird die folgende Website aufgerufen:

panketal.de/rathaus.html

dies ist aber dort:

panke.screendrive.de/

derzeit nicht der Fall bzw. nur per Rechtsklick auf "Rathaus" zugänglich...

ringo

Hallo Sieger66, (danke für deine hilfe)
ich habe mal die main.css angepasst. Jetzt wird die Navi nicht mehr unformatiert ausgegeben,
aber das ausklappen des Megamenu funktioniert nur einmal (es klappt aus aber nicht wieder ein)
ausserdem ist level1 zerschossen.

deshalb hatte ich das mit dem "init und fertig" ausprobiert. bin aber damit nicht weitergekommen.
(.init -> display:none; .fertig -> display:block;)

das war mein code

Code

if (jQuery) {
   (function ($) {
       "use strict";
       $(document).ready(function () {
           // initialize the megamenu
           $('.megamenu').accessibleMegaMenu();
           
           // hack so that the megamenu doesn't show flash of css animation after the page loads.
           setTimeout(function () {
               $('body').removeClass('init');
               $('body').addClass('fertig');
           }, 500);
       });
   }(jQuery));
}

Alles anzeigen

Das die oberen links nicht funktionieren weiss ich. darum wollte ich mich später kümmern:
das ist hier (panke.screendrive.de) eine testumgebung für einen barrierefreies menu.

hast du noch einen idee?

Sieger66

Das du nur in der Testumbebung das neue Menü verwendest hatte ich bereits auch zuvor schon gesehen.

An manchen Stellen funktioniert derzeit das ein- und ausklappen des Menüs:

panke.screendrive.de/freizeit/veranstaltungen.html

auf den fehlerhaften Seiten gibt es in der Konsole Fehler bezüglich fehlender .png Dateien.

Bin aber nur Laie und kann nicht sagen ob das die Ursache ist.

ringo

erstmal danke, dass dass manchmal funktioniert liegt daran dass dort ein anderes template geladen wird.
die bilder werden alle nicht geladen. (weil es eine testumgebung ist -> habe ich darauf verzichtet.)

aber daran kann es ja eigentlich nicht liegen oder?

Tags