responsives {NAV_LIST_UL:F/FP/P,n,m}

[juergen]

Ich habs geschafft Kontakt zu bekommen und angeboten das alles komplett zu übernehmen. In dem Account hier würde es auch niemanden auffressen.

Nur mal als Erläuterung zum "State of the Art ".

Antwort steht noch aus, falls du weiter bist Oliver, lass es mich bitte wissen. Meine Mail Adresse hast du ja

[Oliver Georgi]

Ich hatte mehrfach Kontakt (FB) und ein soweitiges OK, seitdem wieder Funkstille. Keine Ahnung wo das Problem ist, er äußert sich nicht dazu.

[juergen]

Damit du das auch weisst: Ich habe zugesagt es abzulösen "as it is" .....

[kukki]

Mit etwas Herumprobieren bin ich auch auf einige gewollte/ ungewollte Reaktionen gestoßen. Die ganze Sache ist immerhin etwas tricky, wenn man sich mit "learning by doing" abgeben muss , weil halt keine richtige Dokumentation vorliegt .... und mir war bis dato auch nicht bewusst, dass diese Art der Menüführung "fest verdrahtet" ist mit phpWCMS.

Am besten funktioniert das Beispiel von OG bei mir mit

Code: Select all

{NAV_LIST_UL:PF,0,n,active|slick-nav, active}

da ich "HOME" immer als höchsten Punkt auf meinem Turm einsetze und alle anderen Projekte dadrunter installiere. Gerade bei einer Portal-Installation befindet sich an der Stelle HOME die Routine zum Abtesten der TLD einzelner Nutzer. Da dieser dann nicht im Menü auftauchen soll, werden weitere Haupteintrittspunkt deklariert:

HOME------- ------(0)
----WEB1------------(1)
-------bereich1----(2)
-------bereich2----(2)
-------bereich3----(2)

----Web2 -----------(1)
-------bereich4----(2)
-------bereich5----(2)
-------bereich6----(2) usw

[kukki]

Eine ungewollte Reaktion bekomme ich mit der Lösung von oben, die OG so praktikabel einstellte - nicht hin:

Die Struktur ist wie folgt und ich brauche bei SlikNav auch die Funktion des Öffnens des Menüs UND das Öffnen dieses Links auf der Website selber.



Wie bekommt man das nun gebacken. Im "normalen" Desktopmodus funktioniert das genauso, aber hier ... Ist das "nur" ein CSS-Problem oder sind bei der Initialisierung von Slignav noch ein zwei Parameter umzuschalten? Wenn ja, welche

[Oliver Georgi]

SlickNav übersetzt nur Deine normale UL/LI in eine mobile Variante. Dein Beispiel ist in keiner Weise nachvollziehbar — deswegen auch nicht zu beantworten.

[kukki]

Vorlage:

Code: Select all

...
{NAV_LIST_UL:PF,0,3,active|slick-nav, active}
...

Quelltext:

Code: Select all

<nav style="..." class="drop_down">
<ul class="slick-nav">
	<li class="sub_no sub_first"><a href="start.html" >Start</a></li>
...
...
	<li class="sub_ul active active"><a href="aktuelles.html" >Aktuelles</a>
	<ul class="active">
		<li class="sub_no sub_first"><a href="info-vom-adac.html" >Info Auto-Recht</a></li>
		<li class="sub_no sub_last"><a href="info-vom-bvsk.html" >Info vom BVSK</a></li>
	</ul>
	</li>
	<li class="sub_ul"><a href="internes.html" title="Internes">Internes</a>
	<ul>
		<li class="sub_no sub_first"><a href="qualifikation.html" ">Qualifikation</a></li>
		...
		<li class="sub_no sub_last"><a href="impressum.html">Impressum</a></li>
	</ul>
	</li>
	<li class="sub_no sub_last"><a href="links.html" >Links ins WWW</a></li>
</ul>
</nav>

Daraus entsteht das obige Abbild. und das "normale" Abbild für DropDown:



In der Statuszeile des Browsers wird bei Mouseover auf den Titel "AKTUELLES" im SlikNavMenü ein Link mit .../aktuelles.html angezeigt und bei Mouseover das Dreieck .../#.
Beim Klick im Slignavmenü auf sowohl Titel als auch Dreieck öffnet sich nur das Untermenü zur Ansicht, der eigentliche Link wird aber nicht ausgeführt.

Beim normalen Drobdown wird alles richtig ausgeführt - das ist im Moment mein Problem.

[Oliver Georgi]

das liegt dann aber an Deiner Config des SlickNav Menüs. Also dort mal schauen. Oder es läuft sonst noch Javascript, dass das verbockt.

[kukki]

Um alle Irrtümer auszuschließen habe ich RC 1.8 installiert und schnell ein paar Menü-Punkte angelegt und {NAV_LIST_UL: PF,0,3 ..} verwendet - und dabei das normale Menü nur per F12 "display: none" ausgeblenden (zur Kontrolle)
Beim Klick auf MENÜ B gehen nur die Untermenü-Punkte auf, OHNE das Link für MENÜ B als CONTENT anzuzeigen.
Beim normalen Menü ohne Slik-Nav funktioniert das. Ich habe dann versucht die JS-Initialisierung mit dem Parameter "allowParentLink" durchzuführen, in der Hoffnung, das der Link den Content anzeigt ... aber nix da. Welcher der 11 Parameter von "SlickNav-com" soll denn wie angewendet werden, dass das Links des Elternelements geöffnet wird und nicht nur die Untermenüs freigibt

Hier kan man sich das anschauen!

[Oliver Georgi]

Code: Select all

allowParentLinks: true

[kukki]

Habe gestern abend und heute früh das alles noch einmal probiert mit

Code: Select all

<nav id="resp_nav" class="drop_down nav_menu">{NAV_LIST_UL:PF,0,3,active|slick-nav, active}</nav>

<!-- JS:
   $(function(){
      $('ul.slick-nav').slicknav({
      allowParentLinks: true,
	label: 'RC18-Menü',
      });
   });
-->

Probleme:

Zum Nachvollziehen habe ich meine RC18 unverändert gelassen.
Die Advanced Demo bei SlickNav.com reagiert teilweise etwas anders als das in der RC18-Installation unter Win 7, 10; FF 42):

PS.: [EDIT: 3.12. 10:15]
Problematisch ist die Arbeit mit WIN 10 und FF. Nach erneutem Hochfahren des PC sind die Aktionen fast so wie erwartet, aber noch mit Unterschieden.

--Aktion ------------------------------SlickNav--------------------------RC18-Install.---------------
--Klick auf Menü-Label---------------Öffnen + Schließen-------------Öffnen + Schließen -----------------------------------------
--Klick aufs Dreieck------------------Öffnen + Schließen------------ Öffnen + Schließen -----------------------------------------
--Klick auf Parent-Menübez.---------Öffnen + Schließen-------------Link zum Content + Schließen-----------------------------
--Klick Parent-MouseOverBalken----Öffnen + Schließen------------- Öffnen + Schließen -----------------------------------------
--Klick Kind-Menübez./Balken-------Link Cont.,bleibt offen--------Link Cont., Komplettes Menü schließt sich

Die Menübezeichnung muss man dann noch genau treffen, einfach mal ganz langsam die Mouse ranbewegen

So richtig zufriedenstellend ist die Ausführung {NAV_LIST_UL ...} noch nicht, vor allem für die Nutzung als responsives Menü

Unter (älteren) Android -Systemen reagiert das System ebenfalls anders, z.Bsp sind bei Touchaktionen die MouseOverBalken nur um die Bezeichner und dem Dreieck. ....

[Oliver Georgi]

Dein JS falsch, richtig abschreiben:

Code: Select all

$(function(){
    $('ul.slick-nav').slicknav({
        allowParentLinks: true,
        label: 'RC18-Menü' // kein Komma erlaubt beim letzen Element!
    });
});

UND! Es hat überhaupt nichts mit der NAV_LIST_UL zu tun! Es ist JavaScript UND CSS. Das hast Du in der Hand! Die Struktur stimmt. Ich setze seit Jahren damit alles um, was benötigt wird. Und wenn doch was ganz Spezielles erforderlich ist, nutze ich Custom Code, aber immer basierend auf den Funktionen, die hinter NAV_LIST_UL stecken.

[kukki]

Hello Oliver, danke für Deine Antwort.
Das einem Javascript das Komma an Ende der letzten Parameterzeile stört ist mir neu, warscheinlich genauso wichtig, wie (k)ein Semikolon hinter dem letzten CSS-Eigenschaft.

Aber, trotz mehrfacher Umstellung und CSS-Anpassung mittels

Code: Select all

<!-- CSS: ......... -->

bleiben einige Reaktionen bezüglich der BS Win 7,8,10 sowie Android unterschiedlich. Ist alles kein großes Problem, aber auch nicht zu vernachlässigen.

Trotzdem: Ich danke Dir für diese Lösung.
Und - dies sei mir gestattet, auch wenn DU diese Lösung erstellt hast und damit alles umsetzt, ich konnte nicht richtig nachvollziehen, wann und wo es dazu eine definitive Ansage im Forum gegeben hat. Irgend wo unter den 4827 Treffern für NAV_LIST_UL findet man einen Artikel, der eher für Programmierer gedacht ist und nicht für einen Webmaster oder so.

[kukki]

Beim umarbeiten auf responsives Layout einer alten neuen Website bin ich auf einen Android-Bug gestoßen, der mich ziemlich in Rage gebracht hat.

Bei Nutzung der Seite auf einem Touchlet mit Android 4.0.3 und dem Script für "touch friendly menu" gibt es ein Problem mit Z-index-Angaben. Für mich war erst einmal nur die Lösung, den Wert sehr hoch zu setzen wie

Code: Select all

.nav_menu { ....
    z-index: 999999 !important;

Hat da jemand mit Erfahrung und vielleicht auch eine elegantere Lösung

Erfahrung für Euch 5-6 aktive Leute:
Und um die Sache rund zu machen, die Nutzung von OGs SlikNav-Script bringt bei Nutzung der RTs

Code: Select all

<! CSS: ... -->

ein Problem in der Übersichtlichkeit bei CSS- Klassenselektoren. Diese sind teilweise bei Anpassung sehr lang und bei Zeilenumbruch schwer lesbar. Bei mir waren dann mit einem mal Leerzeichen "verschwunden" und die Interpretation der CSS-Notationen fehlerhaft. Dann lieber das entsprechende Fenster breitziehen.[/color]

[Oliver Georgi]

z-index greift sinnvoll nur bei Angabe von position!