mobiles Menü mit navigation_top und navigation_main

[farina]

Hallo,

ich benutzte die beiden Naviagtionen navigation_top und navigation_main aus dem Beispielmandanten. Die Suchfunktion und den language_changer benutze ich nicht.

Nun würde ich gan gerne bei der mobilen Navigation, die ja in der media.js definiert ist beide Module, also navigation_top und navigation_main anhängen. Das bekomme ich aber nicht hin. Bei mir beschränkt sich das mobile Menü auf die navigation_main mit Untermenüpunkten.
Kann mir jemand einen Tipp geben wie ich das andere Modul einfügen kann?

Gruß farina

[Faar]

Du musst im jQuery-Javascript, mit dem das Mobile-Menü angesprochen wird (nicht das Menüscript selbst), beide Menüs miteinander kombinieren.
In eine Variablen das erste Menü zuweisen, dann in einer zweiten Variablen das zweite Menü.
var var1 = $('#main').clone();
var var2 = ...
http://www.w3schools.com/jquery/html_clone.asp
Dann hängst du mit appendTo() die zweite Variable an die erste Variable: http://www.w3schools.com/jquery/html_appendto.asp
Und mit dieser Varaiblen, die nun beide Menüs enthält, rufst du das eigentliche Menü-Script auf.
var1.menuscript({ ...

[Oldperl]

Servus,

man kann natürlich auch beide Menüs in einen gemeinsamen div-Tag packen und je nach View per CSS entsprechend positionieren. Dann spart man sich dafür unnötiges Javascript.

Gruß aus Franken

Ortwin

[farina]

Danke für die Tipps. Bis jetzt habe ich es noch nicht umsetzen können.
Der Tipp von Faar hat dazu geführt, dass auch in der Desktop-Version beide Menüs in einen div-Tag geladen wurden.

Beim Tipp von Oldpearl muss ich zuviel im Layout umstellen. Die Site ist aber schon online.

Wenn ich mehr Zeit habe, setze ich mich da wieder dran.
Falls ich zu einer Lösung komme , schreibe ich sie hier auf.
Gruß farina

[Faar]

Der Tipp von Faar hat dazu geführt, dass auch in der Desktop-Version beide Menüs in einen div-Tag geladen wurden.

Ich kenne Deine genauen Umstände nicht, aber dass beide Menüs geladen werden, ist schon einmal ein Erfolg.
Eigentlich wird in der Desktop Anzeige das Script-Menü ausgeschaltet, so dass nur die normalen Menüs angezeigt werden.
Bei mobiler Ansicht ist es genau andersrum.

Es kann sein, dass du bei var2.appendTo(var1) noch etwas zusätzlich angeben muss, je nachdem wie dein Script-Menü arbeitet.
In var2 steht ja das komplette Meta-Menü, aber oft wird nur z.b. das <li> von einer <ul> Menüliste benötigt.
Dann sähe es so aus:

Code: Alles auswählen

var2.children('li').appendTo(var1);

https://api.jquery.com/children/
Natürlich, wenn vor dem <ul> noch ein <div> steht, wird es komplizierter.

Es gibt verschiedene Wege, um eine Mobile Ansicht mehrere Menüs zu gestalten.
Bei einem Projekt habe ich ein Menü-Modul entwickelt, das mir mehr als einen Kategoriebaum gleichzeitig auslesen kann.
Damit habe ich zwei Bäume mit einem Modul in einer Template-Ausgabe.
Bleibt trotzdem das Problem mit der Zusammenführung zweier <ul> Listen, das wie oben mit dem Script möglich ist.

[farina]

Im Beispielmandanten funktioniert das doch auch.
Bei meiner Site wird das 2. Menü nun im Quelltext bei kleinen Bildschirmbreiten eingefügt und unter dem ersten Menü platziert. Alles wie im Beispielmandanten.
Doch es wird im Display nicht angezeigt.

Da das Menü im Quelltext eingefügt ist, klappt das Javascript. Es muss also ein css-Fehler sind.
Nun habe ich alle stylesheets überprüft, aber ich kann den Fehler nicht finden.

Mache ich eine Denkfehler? Kann mir jemand helfen?
LG

[homtata]

Das ist natürlich ohne jeglichen Quellcode, CSS und Seitenansicht schwierig, dir da zu helfen.
Grundfragen sind:

- hast du die nötigen Dateien eingebunden (main.js, media.css) und auch so, dass nachfolgende css-Dateien Befehle aus der media.css nicht überschreiben?
- ist die Verschachtelung der ganzen Navigationen (Desktop und mobil) genauso wie im Demomandanten? Heißen alle Klassen genauso wie dort? Wenn nicht, müssen hier und Namen und Deklarationen im CSS oder Quellcode angepasst werden.
- Ist für das Erscheinen der mobilen Navigation überhaupt der korrekte Sprungpunkt angegeben? Ab welcher Pixelzahl schlägt das Umhängen der Navigation per JS, ab wo das CSS fürs mobile Menü an?

LG

[farina]

Danke homtata,
Sorry, du hast natürlich Recht.
Also, es handelt sich um folgende Site http://www.mueller-maschinentechnik.de.

Mit Sprungpunkt meinst du doch sicher das Erscheinen des mobilen Menüs. Der ist bei kleiner gleich 768 px.
Das mobile Menü klappt, allerdings nur mit Main-Navigation . Es klappt nur nicht, dass die Top-Naviagation sichtbar ist. Im Quelltext ist sie da.
main.js und media.js sind eingebunden.
Bei kleiner Bildschirmbreite ist der Quellcode des Beispielmandanten und meiner nahezu identisch. Ich habe nur die Suchfunktion aus der media.js rausgenommen. Daran kann es aber nicht liegen, denn mit den Abfragen für die Suchfunktion hat es auch nicht besser geklappt.

Hilft das weiter? Oder bracuhst du noch mehr?
LG Siggi

[homtata]

Also wenn man sich mit Firebug den Quellcode der mobilen Version anschaut, dann steht unter dem ul des Hauptmenüs noch ein weiteres ul, und dort steht:

Code: Alles auswählen

<ul id="navigation_header_mobile" class="hide_desktop">

Der class-Aufruf ist hier möglicherweise der Bösewicht. Je nach CSS-Einstellung wird hier was in der Desktopversion verborgen, aber nicht notwendigerweise in der responsiven wieder eingeblendet ,-) Außerdem scheint das Ding eine Ebene zu tief verschachtelt. Der o.g. ul mit der id navigation_header_mobile hat ein li, und DARUNTER liegt dann wiederum die eigentliche Navigation in einem ul, wenn ich mich nicht ganz täusche. Vielleicht ist einfach das Umkopieren noch nicht perfekt, und alles muss eine Ebene "höher".

[Faar]

In mainmüller.css in Zeile 131 ist das hier:

#menu ul li ul {
display: none;
z-index: 100;
}

Das muss natürlich per media-query auch auf display:block oder :inline geschaltet werden.
Aber dann ist da immer noch eine <ul><li> Verschachtelung zuviel.
Entweder wird das vom Menütemplate erzeugt oder vom Menüprogramm, aber es sollte besonders für das Javascript-Menü in der gleichen Level-Ebene sein wie das Hauptmenü.

Code: Alles auswählen

<ul>hauptmenü</ul>
<ul>metamenü</ul>

Denn wahrscheinlich wird es sonst schwierig für das Javascript, dieses Meta-Menü richtig anzuzeigen.
Manche haben das auch per Javascript gelöst, indem sie nur bestimmte ul-li Level in die Variable übernommen haben.
Aber vielleicht erst einmal im Template nachschauen.

[farina]

Hallo,

das mobile Menü klappt nun.
Die Verdoppelung des ul-Tags hat dafür gesorgt , dass diese css-Regel "display: none;" in Kraft trat. Diese Verdoppelung habe ich nun aus dem Layout raus genommen.
Vielen Dank für die Hilfe. Ihr habt mir beide auf die Sprünge geholfen.
LG farina

[Käferli]

Hallo,
ich habe folgendes Problem.

Ich setze die "Navigation_Correct" mit dem Template ulclass -> sf-menu ein.
Es gibt dazu horizontales Menü mit 4 unterschiedlich farbigen Button, die spreche ich wie folgt an:

Code: Alles auswählen

.sf-menu li:nth-child(1)  {
   background-color: #5a006d;
}

.sf-menu li:nth-child(2) {
   background-color: #f46208;
	
}
...................................

Das klappt soweit, die Unterrubriken bringen zwar im Hintergrund die passende Farbe mit,
die einzelnen Listenpunkte werden dann aber zusätzlich in der Reihenfolge eingefärbt, wie oben die Hauptlistenpunkte oben.
Was so nicht gewollt ist...

Hier der Code zu den Unterrubriken mit Hover-Effekt:

Code: Alles auswählen

.sf-menu li:nth-child(1):hover > ul,li
.sf-menu li:nth-child(1).sfHover > ul {
	display: block;
	 background-color: #5a006d;
}

.sf-menu  li:nth-child(2):hover > ul,li
.sf-menu li :nth-child(2).sfHover > ul {
	display: block;
	 background-color: #f46208;
}

Ich habe jetzt soviel gelesen und probiert, stehe aber irgendwie auf dem Schlauch...

Bin für jeden Tipp dankbar!

Wollte nicht extra ein neues Thema aufmachen, hoffe, das passt an dieser Stelle etwas.

Viele Grüße
Käferli

[homtata]

Huhu! Ja, kleiner Denkfehler. Du willst ja, dass der Hauptmenüpunkt UND alle seine Unterpunkte standardmäßig die gleiche Farbe haben. Das hat mit dem hover erstmal nix zu tun. Der kommt erst zum Zug, wenn man über einen konkreten Menüpunkt fährt.
Daher kommentiere die hover-Dinger erstmal aus, und das CSS sieht in deinem Fall eher wie folgt aus:

Code: Alles auswählen

.sf-menu > li:nth-child(1), .sf-menu > li:nth-child(1) ul li   {
   background-color: #5a006d;
}

.sf-menu > li:nth-child(2), .sf-menu > li:nth-child(2) ul li {
   background-color: #f46208;
}

Die hover-Effekte für die ausklappbaren Untermenüs sind dann

Code: Alles auswählen

 .sf-menu > li:nth-child(1) ul li:hover   {
   background-color: #irgendwas;
}

.sf-menu li:nth-child(2) ul li:hover {
   background-color: #irgendwas;
}