Meanmenu

**stephangunnar** · 27.04.2014, 19:25

Ich habe probiere seit ca.6 Stunden in die mobile Version der Webseite http://www.folklore-wiesbaden.de/ (kann man per Toogle View umschalten) das Meanmenu von http://www.meanthemes.com/plugins/meanmenu/ einzubauen, und habe mir jetzt schon 10 Mal das Video http://www.youtube.com/watch?v=hs5f6365f8U angesehn, ich komme aber absolut nicht drauf was ich falsch gemacht habe.

1.Im Mobilen Seitenlayout in den zusätzlichen Headtags den folgenden Code eingegeben (und natürlich geprüft ob die Dateien wirklich zu erreichen sind mit den Pfaden).

Code:

<link rel="stylesheet" href="files/folklore-wiesbaden/2014/javascript/meanmenu.css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="files/folklore-wiesbaden/2014/javascript/jquery.meanmenu.js"></script>

2.Im Mobilen Seitenlayout im eigenen JavaScript Code den folgenden Code angegeben.

Code:

<script>
jQuery(document).ready(function () {
    	jQuery('meanmenu').meanmenu();
    });
</script>

3.Ein eigenes Modul vom Typ Individuelle Navigation angelegt und diesem die die CSS-ID "meanmenu" und Klasse "meanmenu" mitgegeben.

Jetzt sollte die Navigation lt. dem Youtube Video funktionieren, aber die Individuelle Navigation wird nicht als Meanmenu angezeigt wir in der Demo. Ich glaube der eigene JavaScript Code wird von Contao nicht richtig ausgeführt. Freue mich über jeden Strohhalm. Danke!

**Sabine14** · 27.04.2014, 20:18

Das Meanmenu wandelt in EINEM Seitenlayout ein bestehendes Menu, z.B. eine Superfish-Nav in ein mobiles Menu um - siehst Du HIER. Ich denk mal, dem Menu fehlt die Basis oder auch nicht, wenn ich nochmal lese. Die Query-Bibliothek kannst Du / solltest Du im Übrigen direkt im Seitenlayout aktivieren - Hakerl
Welche Contao-Version nutzt Du? - ich 3.2.9

Style-Sheet normal als Style-Sheet eingebaut.

Mein Code sieht so aus unter eigener Java-Script-Code:

<script src="files/domain/meanmenu/js/jquery.meanmenu.js"></script>
<script>
jQuery(document).ready(function () {
jQuery('header #mainnav').meanmenu();
});
</script>

Funktioniert ganz wunderbar.

Noch eine Frage: Hast Du im Meanmenu eingestellt (JS), ab welcher Browser-Weite (Pixel) es sich einschalten soll? Nutzt nicht die Media-Queries.

Aber wenn Du mit mobilem Layout arbeitest, kannst Du auch das Dk-Mmenu einsetzen. Schickes Ding!

Sabine

**stephangunnar** · 27.04.2014, 22:03

Danke, jetzt wird das Meanmenu eingeblendet, ich bei dem eigenen Java-Script-Code, gleich das so eintragen müssen.

Code:

<script src="files/folklore-wiesbaden/2014/javascript/jquery.meanmenu.js"></script>
<script>
jQuery(document).ready(function () {
    	jQuery('header #meanmenunav').meanmenu(); 
    	});
</script>

Jetzt habe ich noch das Problem, das wenn das Meanmenu eingeblendet wird, wenn ich die Webseite zusammenschiebe, man den Rest der Webseite nicht mehr sieht. Das Problem hast du auf deiner Webseite nicht. Wie kann ich das denn mit dem CSS ändern?

**stephangunnar** · 27.04.2014, 22:13

Ich konnte das jetzt selber lösen, indem ich das CSS wie folgt geändert habe.

Code:

.mean-container .mean-bar {
    width:100%;
    min-height:42px;
    position:relative;
    float:none;
    padding:4px 0;
    background: #0c1923;
    z-index: 999999;
}

Das heißt, statt float:left einfach float:none