Mobile Contao.org-Seite Navigation. Wie funktioniert das?

[Goody]

Liebes Forum,
die mobile Contao.org-Seite hat finde ich eine schicke Navigation. Wenn man oben rechts auf den Button klickt, wird die Navigation eingeblendet.
Wie wird sowas umgesetzt? Habe das Javascript:toggleMobile() kopiert und eingebunden. Aber bei mir passiert nichts, wenn ich auf den Button klicke.
Über einen Tipp wäre ich dankbar.

Gruß Goody

[schman]

Was hast du genau kopiert.
Einfach nur den Link?

Umgesetzt wird das ganze mit MooTools, also muss MooTools im Frontend geladen werden, zusätzlich brauchst du noch die MooTools.More. Das Skript selbst findest du in der contao.js.

[Goody]

Was hast du genau kopiert.
Einfach nur den Link?

Umgesetzt wird das ganze mit MooTools, also muss MooTools im Frontend geladen werden, zusätzlich brauchst du noch die MooTools.More. Das Skript selbst findest du in der contao.js.

Hallo Schman,

MooTools wird im Frontend geladen. Wo finde ich die MooTools.more und was mache ich mit dem Script?
Finde nur im Ordner assets/mootools/core/1.4.5/mootools-more.js. Ist die das?

Gruß Goody

[schman]

Finde nur im Ordner assets/mootools/core/1.4.5/mootools-more.js. Ist die das?

Jap, dass ist sie.

[comanche]

Hallo,

ich möchte das Theme nochmal aufgreifen, da ich auch schon einige Zeit damit verbringe, nach einer Lösung für ein Smartphone/iPhone-Menü zu suchen.

In einer Contao 3 Installation habe ich testweise ein auf-/zuklappbares Menü per Accordion erstellt. Das funktioniert soweit prima.

In einer Contao 2.11.6 Installation kann ich ein Accordion-Menü nicht anwenden, da es sich nicht ohne weiteres mit den übrigen Mouseover-Accordions auf der Seite verträgt. Ein per CSS aufklappbares, in der Höhe animiertes Menü funkioniert in der Desktop-Version mit der Maus prima, jedoch habe ich dann auf dem iPhone das Problem, dass es nicht mehr einklappbar ist (wenn man auf der Seite verweilen möchte).

Verwende ich nun testhalber die aktuelle auf contao.org eingesetzte Funktion "toggleMobileMenu()", dann klappt das Ein-/Ausfahren des Menüs einwandfrei – jedoch funktionieren dann die verwendeten Mootools-Scripte (Accordion und Mediabox) und das MenuMatic-Script nicht mehr! *heul*

Am Liebsten wäre mir eine onclick-Funktion, die die Transition-Effekte eines CSS auslösen kann:
- Klick auf Button -> Menü nimmt die gewünschte Höhe (z.B. 400px) an
- Erneuter Klick bei geöffnetem Menü -> Menü nimmt wieder die Höhe "0" an

Hat jemand eine (auch gerne alternative) Lösung parat?

Danke und Grüße,
Andreas

[Madob]

Auch ich möchte mich hier noch anhängen.

Mir ist jetzt noch nicht recht klar, wie ich das Menü so umsetzen kann.

Moo-Tools im Frontend ist geladen, ok. Nur wie geht es nun weiter?
Erforderd diese mobile Navi auch noch eine Templateanpassung?

[comanche]

Auch ich möchte mich hier noch anhängen.

Mir ist jetzt noch nicht recht klar, wie ich das Menü so umsetzen kann.

Moo-Tools im Frontend ist geladen, ok. Nur wie geht es nun weiter?
Erforderd diese mobile Navi auch noch eine Templateanpassung?

Für die momentan verwendete Funktion "toggleMobileMenu()" benötigst Du das folgende Script:
https://cdn.contao.org/files/js/contao2.js

Aufgerufen wird die Funktion dann über einen Link:

<a href="javascript:toggleMobileMenu()">Hier ein Bild oder Text rein</a>

Templates musst du keine anpassen, aber du benötigst eine Navigation mit der ID "mainmenu" und setzt diese auf die Position -800 Pixel:

#mainmenu {
left: -800px;
top: 0;
position: fixed;
overflow: auto;
display: block;
... usw. ...
}

Ob das Script bei dir problemlos läuft und ob du das Script überhaupt verwenden darfst, weiß ich nicht.

Gruß,
Andreas

[Madob]

danke für die Antwort.

will leider nicht klappen.

Aber ich denk mal, deine gepostete Vorgehensweise ist für Contao 2 oder?
Ich verwende hier Contao 3.

[comanche]

danke für die Antwort.

will leider nicht klappen.

Aber ich denk mal, deine gepostete Vorgehensweise ist für Contao 2 oder?
Ich verwende hier Contao 3.

Das ist eigentlich egal. Sollte mit Contao 3 funktionieren. Bei mir gab es - wie schon erwähnt - unter Contao 2.11 Probleme mit den übrigen MooTools-Scripten. Das "toggleMobileMenu" funktionierte prima.

Hast Du den Verweis auf das Script in den Head-Tag eingefügt?
Hast Du die korrekte ID (mainmenu) vergeben?
Hast Du mainmenu auf Position left -800px top 0 gesetzt?

Gruß,
Andreas

[Madob]

hallo,

ja hab das alles so eingebunden.

Das Menü ist durch die CSS Anweisung ja auch ausserhalb der Bildfläche, nur beim Klick auf den Link, der die Funktion aufruft passiert leider nix.

Hier ist es mal online, weiss aber nciht ob man daraus einen Fehler erkennen kann.


PS: habs zum Testen nur mal bei der Kontaktformular Seite eingebaut.

[Flex]

Das JavaScript ist auf deinem Server nicht vorhanden?

http://www.doblmayr.at/test/files/js/contao2.js

[comanche]

Hier ist es mal online, weiss aber nciht ob man daraus einen Fehler erkennen kann.

Ja, den Fehler kann man erkennen: das Script wird nicht gefunden:
http://www.doblmayr.at/test/files/js/contao2.js

Musst nochmal den Pfad prüfen, wo du das Script abgelegt hast.

Edit: Flex war schneller ...

Der Rest ist auch noch etwas seltsam. Angefangen damit, dass das Menü (2. Ebene?) sichtbar und NICHT auf die Minus-Position verschoben ist. Und wo hast du die ID vergeben? Und welche?

[Madob]

au Backe, ich hatte die Datei conato.js statt contao2.js benannt.

Die Datei wird nun zwar gefunden, es tut sich aber trotzdem nix beim Klick.

Ich nehme mal an du betrachtest die seite gerade mit einem Gerät mit geringer Auflösung?

Die sichtbare 2. Ebene ist nämlich der Versuch, die Hauptnavigation anders zu gestalten bei kleinen Auflösungen. Das kannst du aber momentan ignorieren. Hätte ich vielleicht erwähnen sollen.

Ich habe die neue Navi unter dem Link eingefügt, der die JS Funktion auslöst. Momentan einfach als Liste.

Die neu anglegteNavigation nennt sich dann

<nav class="mod_navigation block" id="mainmenu">

[kayyy]

Für diejenigen, die kein mootools nutzen, ist selectnav.js die Lösung https://github.com/pixelianer/selectnav.js

[comanche]

Evtl. musst du noch Mootools verwenden. Aktiviere mal die Mootools Mediabox im Seiten-Layout.

[Madob]

danke für den Tip,

die Mootools Mediabox war schon aktiv, benötige ich für die Lightbox.

Hab jetzt mal testweise JQuery deaktiviert und nun funktionierts. Woran sich das wohl stößt?

[Madob]

Für diejenigen, die kein mootools nutzen, ist selectnav.js die Lösung https://github.com/pixelianer/selectnav.js

danke dafür, aber eine Select Drop-Down Navi möchte ich eher nicht benutzen. Gefällt mir nicht wirklich

[Madob]

Naja zumindest weiss ich schonmal, dass es funktioniert, mit aktiviertem JQuery halt nicht, warum auch immer.

Nur was mir noch auffällt, wenn ich das Menü reinfahren lasse, werden die Level 2 Menüs erstmal nicht angezeigt, erst wenn ich den Hauptmenüpunkt hovere.

Ich dachte erst, dass ist ne CSS Sache, ist aber noch genauso, wenn ich sämtliche CSS Daten deaktiviere.

EDIT: am iPhone wird aber sofort das komplette Menü angezeigt. Nur am Desktopbrowser nicht. Getestet vorerst mit Safari 6 und FF 21

[Madob]

habs nun hinbekommen.

Hab durch den Firebug entdeckt, dass das Script in der contao2.js den ul´s mit der Klasse level_2 einen Style mit visibility: hidden; und einen mit opacity: 0; hinzufügt.

Habs auf opacity: 1; geändert und nun sind alle Untermenüpunkte sofort bei dem einfahrenden Menü sichtbar.

Wieso das Script dann aber bei der contao.org Seite den ul.level_2 diese Styles nicht hinzufügt, ist mir ein Rätsel.


Ich hoffe nur, dass man das Script auch nutzen darf


EDIT: diese Menü funktioniert halt nur mit aktivem JS. Sieht man aber immer öfters, dass Seiten ohne JS nicht mehr funktionieren. Darf man also vorraussetzen, dass JS aktiviert wird? Als ich vor 3 Jahren mit HTML und ein bisschen JS angefangen habe, wurde einem noch immer eingetrichtert, dass man unbedingt ne Fallback Lösung benötigt, falls jemand JS nicht aktiviert hat.

[kischd]

Ich hab auf meiner Seite leider schon jQuery laufen und würde gerne auch diese Funktion benutzen.
Wie beschrieben funktioniert Sie wohl nur ohne jQuery.

In der Konsole tritt folgender Fehler auf:
SCRIPT438: Das Objekt unterstützt die Eigenschaft oder Methode "getStyle" nicht
contao2.js, Zeile 1 Zeichen 49

und markiert: e.getStyle("left")=="-800px"

Oder gibt es da noch ne Möglichkeit dies so abzuwandeln, dass es auch in Kombination mit jQuery laufen kann?

[Dj-Harem]

Oder gibt es da noch ne Möglichkeit dies so abzuwandeln, dass es auch in Kombination mit jQuery laufen kann?

Oder direkt in jquery umsetzen, dann müsste nicht unbedingt nur für das toggleMenu Mootools geladen werden.
Ich denke, das sollte für einige hier im Forum kein Problem sein, das umzusetzen, einfach mal lieb nachfragen ;-)
Oder du liest dich in jquery ein und versucht es selbst umzusetzen.
Da ich momentan nicht die Zeit dazu habe, kann ich dir nicht weiterhelfen, und ich bin mit der Mootools Variante bis jetzt immer ausgekommen :-)

Grüße
Dj-Harem

[kischd]

Das wäre natürlich nett, wenn das jmd zufällig schon umgesetzt hat. Bzw. das einfach umsetzen kann.
Ansonsten schau ich mich mal im Netz um ob ich das hinbekomme. Falls nicht neuen Slider suchen ;-)

[kischd]

Ich Netz hab ich jetzt dieses JQuery gefunden.

jQuery(document).ready(function($){

	/* prepend menu icon  */
	$('#navi').prepend('<div id="menu-icon">Menu</div>');

	
	/* toggle nav */
	$("#menu-icon").on("click", function(){
		$(".level_1").slideToggle();
		$(this).toggleClass("active");
	});

});

also bisschen auf Contao angepasst.

[Bas]

Empfehlung: Implementing Off-Canvas Navigation For A Responsive Website

Ich hab dank des Artikels ne Menge gelernt, allerdings gehört nen solides CSS- und JS-Verständnis dazu, da die Erklärungen sich eher auf das dahinterstehende Prinzip beziehen.

[kischd]

Das JS-Verständnis ist das Problem...

Bei meiner Version hab ich jetzt ein Problem festgestellt. Wenn ich die Seite auf meinem Smartphone lade, ist die Navi immer geöffnet

Gibts da nen Trick mit dem ich dem Teil sagen kann, sei zuerst geschlossen?

[bizon]

Gibts da nen Trick mit dem ich dem Teil sagen kann, sei zuerst geschlossen?

ich hab das Script so eingebaut und funktioniert

jQuery(document).ready(function($){

	/* prepend menu icon */
	$('#nav-wrap').prepend('<div id="menu-icon"></div>');
	
	/* toggle nav */
	$("#menu-icon").on("click", function(){
		$("#navi").slideToggle();
		$(this).toggleClass("active");
	});

});

Das nav_default Template musst du anpassen
mit einem alles umschließenden <div id="nav-wrap"> ... </div>
und ul braucht id="navi"

[wulf]

@kischd vielleicht wäre http://www.meanthemes.com/plugins/meanmenu/ ja was für dich.

[Bas]

Das JS-Verständnis ist das Problem...

Du findest auf der von mir verlinkten Seite 4 Demos .. wobei die erste der Fallback ist - komplett ohne Javascript. Wenn man nun noch ein paar CSS-Transitions hinzufügt kriegt man das auch animiert.

In der zweiten Demo ist nur ganz wenig Javascript. Zum einen wird (wenn der Browser Javascript kann) eine Klasse gesetzt auf deren Basis die Navigation umgestylt wird.
Hier das Klasse-setzen mal auf jQuery-Basis:

$(document).ready(function () {       //wenn das Dokument fertig geladen ist
    $('html').addClass("js-ready");    //wird dem HTML-Object die Klasse js-ready hinzugefügt
})

Des Weiteren wird ein Script benötigt welches den Toggel auf den Buttons realisiert. jQuery:

$(document).ready(function () {              //wenn das Dokument fertig geladen ist
    $('#nav-btn').click(function(event) {    //wird dem Button mit der ID nav-btn bei Klick die folgende Funktion zugewiesen 
        event.preventDefault();                 //verhindert das Default-Verhalten (Aufrufen des Links)
        togglenav();                                 // ruft die Funtkion togglenav auf.
    });
})

navopen = false;                                //Variable zur Speicherung des aktuellen Navigationszustandes (offen oder zu)
navclass = 'js-nav';                             //Name der einzufügenden Klasse

function togglenav() {                         //Initialiserung Funktion
    if (navopen && $('html').hasClass(navclass)) {   // Wenn die Vairable Navoben true ist und das HTML die Klasse js-nav hat
        $('html').removeClass(navclass);                  // entferne die Klasse  
        navopen = false;                                         // und merk Dir das die Navigation zu is :)
    } else {                                                           // ansonsten
        $('html').addClass(navclass);                        //füge Klasse hinzu
        navopen = true;                                          // und merk Dir das die Navigation offen ist.
    }
}

Nun kannst Dich ganz auf CSS konzentrieren. Das Durcharbeiten und Nachvollziehen des Artikels ist zwar echte Arbeit ... aber danach hat man es verstanden.

Edit // hier nochmal der Link zum Artikel: Implementing Off-Canvas Navigation For A Responsive Website

[kischd]

Hallo Bas,

boah danke für deine Mühe... saustark
Ich find aber irgendwie deine Verlinkte Seite nicht.

Jetzt noch eine kleine Verständnisfrage:
Ich hab ne Seite gefunden bei der alles mit CSS gemacht wurde. Kann das ohne JS funktionieren?
http://webdesignerwall.com/tutorials...avigation-menu

[wulf]

geh doch einfach auf die demoseite http://webdesignerwall.com/demo/responsive-menu/, deaktiviere js und du siehst, dass es funktioniert. stellt sich nur die frage, ob es auch mit unternavigationen klar kommt.

[kischd]

Hab das mal ausprobiert. Auf dem PC läuft das alles auf verschiedenen Browsern, doch das iPhone klappt bei meiner Seite die Navi nicht auf.
Die Demo macht das doch...

[wulf]

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

hier mal die semikolons durch kommas ersetzen und user.scalable benötigt ein yes oder no also

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

vielleicht hilft es ja

[kischd]

Hab ich mal geändert,.. Danke
Leider wars das aber wohl nicht.

Ich bin eigentlich den Anweisungen des Tutorials gefolgt. http://webdesignerwall.com/tutorials...avigation-menu

Natürlich die Klassen angepasst .current = .active .....
aber dass auf dem iphone gar aktion beim drücken passiert ist sch...

[kischd]

Konnte das mal auf einem Samsung testen. Dort funktioniert es.
Ist wohl irgendwas bzw es fehlt etwas bei mir was das iPhone nicht mag

[wulf]

schon komisch, ich kann deine seite ja nur auf verschiedenene simulatoren testen, dort sieht alles gut aus. chrome schmeißt zwar noch einige forbidden fehler für fast.font, aber das sollte die navigation nicht beeinflussen.
Mal ne blöde Iphone frage, hast du deine seite mal mit einem anderen browser auf dem iphone getestet (sofern das überhaupt geht)

[kischd]

Ja, bei den Simulatoren gehts komischerweise.
Der Safari ist halt bei jedem iPhone in der Favoritenleiste. Hab ich mir auch noch nie Gedanken darüber gemacht.
Ich find aber von der Demoseite auch keinen Großen unterschied warum dies dort funktioniert.
Kann ja nicht an der HTML-Struktur liegen...

[wulf]

hab mal weiter rumgetestet und konnte den fehler bei http://www.testiphone.com/ tatsächlich mal reproduzieren, also dauerhaft aufgeklapptes menü.
habe mal

.mod_navigation li {display:none;}

gesetzt, danach sah es gut aus.

edit: natürlich nur im mediaquerie

[kischd]

das hab ich auch rausgefunden
Dann ist es aber immer offen ;-(

Ich glaub das iPhone ignoriert die Klasse

#navi ul:hover li

aber was will das iPhone haben???

[kischd]

Hab auf verschiedenen Seiten öfters von dem hover-Problem beim iPhone gelesen.
Beim Link von Bas versucht der das mit :target zu lösen.
Das macht aber bei mir keinen Unterschied, außer dass es dann auf dme PC auch nimmer geht.

Ich versteh nur nicht warum es hier funktioniert http://webdesignerwall.com/tutorials...avigation-menu

[bizon]

Der Unterschied zwischen dem von Contao generierten Menu und der Demo auf webdesignerwall ist der, dass der aktive Link bei Contao keinen <a> Tag mehr hat, sondern ein <span> ist.

Die I-Family braucht zum Verarbeiten eines Links ein <a>.