Animierte CSS-Navigation in 3.1.4 (Forum vs. B3-Portal)

[Talk19zehn]

Lösung im unteren Bereich des Beitrages

Hi, wie füge ich jenes genannte Menu--> http://cssmenumaker.com/menu/animated-r ... -down-menu in einem phpBB-3.1.4 ein, so dass es auch im B3/Portal Version: 2.1.0-rc2 responsive funktioniert?

Was ist an dem Vorgehen falsch?
overall_header.html vor </head> eingefügt: *)

Code: Alles auswählen

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="./styles/meinstyle/template/script.js" type="text/javascript"></script>

Verzeichnisse:
... theme heraufgeladen=hinzugefügt -> styles.css
... stylesheet.css heraufgeladen=hinzugefügt-> @import url("styles.css");
... template heraufgeladen=hinzugefügt-> script.js
... template heraufgeladen=hinzugefügt-> myowncssnavigation.html

Dann in der overall_header.html zum Beispiel nach <div id="wrap"> eingefügt:

Code: Alles auswählen

<!-- INCLUDE myowncssnavigation.html -->

Im Forum funktionierts, im Portal ist die Funktion und auch das Hamburger-Icon responsive "defekt". Ich bin mir eigentlich ziemlich sicher, dass es mal funktionierte und "nu isses" kaputt. Update auf 3.1.4 verlief fehlerfrei.

Hat jemand einen Rat, was sollte ich an dem Vorgehen ändern, anderes tun? Ist das Vorgehen grundsätzlich falsch? Mir gingen heute nach tagelangem Suchen die Ideen aus.

LG


P.S.:
Fehlersuche, was bisher auffiel:
Das

Umschreiben von URLs aktivieren: Ja / Nein
Wenn aktiviert, werden URLs, die ‚app.php‘ enthalten, umgeschrieben, so dass sie keinen Dateinamen mehr enthalten. (z. B. wird app.php/foo zu /foo). Das Modul mod_rewrite des Apache-Webservers ist notwendig, damit dies funktioniert. Wenn diese Option aktiviert wird, ohne dass mod_rewrite verfügbar ist, können URLs deines Boards ungültig werden.

steht auf NEIN!

Stelle ich JA ein, geht´s offenbar auch im Portal. Nur, das kann ja nicht des Rätsels Lösung für einen Styleautor sein.


Edit: 18.05.2015, 22:20
==============
Pfadangabe *)
==============
Lösung
Falsch:

Code: Alles auswählen

<script src="./styles/meinstyle/template/script.js" type="text/javascript"></script>

Richtig:

Code: Alles auswählen

<script src="{T_TEMPLATE_PATH}/script.js" type="text/javascript"></script>

Somit funktioniert das Menu responisv auch in responsiver Portalansicht oder z.B. in der responsiven Ansicht der AboutUs und zwar unabhängig davon, ob hier
Umschreiben von URLs aktivieren: ---> [b]Ja / Nein[/b] gesetzt ist.

LG

[Crizzo]

Hi,

wieso fügst du deinen Code nicht so ein, wie es hier für JS-Code o.ä. vorgesehen ist: https://www.phpbb.com/extensions/writin ... ludejs-css ?

Grüße

[Talk19zehn]

Hi, weil ich nicht erst eine EXT schreibe, um CSS-Code (in dem Beispiel mittels JS zu nutzen(!)) einfachster Art umzusetzen / einzusetzen. Ich greife ja in keine Systemdateien ein.

Und ich glaube auch nicht, dass dies in jenen simplen Fällen erforderlich oder gar vorgeschrieben sein kann. Ich hätte ja mein kleine EXT eines FlyOutMenus der Einfachheit halber "hineinklatschen" können, dies erscheint mir aber persönlich ungeeignet. Wenn CSS oder HTML in einer Änderung einer EXT bedarf, kann man den Support wohl zu machen. Und zwar weltweit in den Supportforen 3.1.x für den Stylebereich? Nirgends habe ich ausschließlich Extensionen im Support gefunden, die vorgeschriebener Maßen in der Form Rede und Antwort stehen. Das lässt sich in der Form auch nicht konsequent umsetzen, denke ich. Mag sein, dass das eine oder andere Style rein aus Extensionen besteht. Ich habe nur sehr sehr sehr wenige für derartig lapidare JS-Fälle gefunden.

Warum der erst genannte Pfad immer dann zu Fehlern führte, wenn andere Seiten (Portal / AboutUs) angesurft wurden, ist mir in dem genannten Zusammenhang Umschreiben von URLs aktivieren: Ja / Nein nach wie vor unklar.

LG

[Kirk]

Hallo
Ich denke es lag daran das du den Code so angelegt hattest:

Code: Alles auswählen

<script src="./styles/meinstyle/template/script.js" type="text/javascript"></script>

Wenn ich mir in meinem Testboard im Board3 Portal den Quelltext anzeigen lasse so steht bei deaktivierter URL-rewriting u.a. das hier drin:

Code: Alles auswählen

<link href="./../styles/prosilver/theme/print.css?assets_version=2979" rel="stylesheet" type="text/css" media="print" title="printonly" />

bei aktivierter URL-rewriting das hier:

Code: Alles auswählen

<link href="./styles/prosilver/theme/print.css?assets_version=2979" rel="stylesheet" type="text/css" media="print" title="printonly" />

Es haben bei aktivierter URL-rewriting die Pfade ein wenig geändert, das es bei dir "hardcoded" war sah man bei deaktivierter URL-rewriting z.b. im Portal dieses Menü nicht.
Nur was Standard in phpBB ist, dort wurde das Menü angezeigt.

[Talk19zehn]

Hm ..., es hat doch aber nur jeweils "responsive" nicht funktioniert.

[Crizzo]

Ich habe die Navigation irgendwie mehr so als Addon/Extension gesehen, als ein Problem was du nur mit einem Style hast. Dann ist die Sache natürlich klar, dass du die JS-Dateien so nicht einbinden willst.

Grüße

[Kirk]

Hm ..., es hat doch aber nur jeweils "responsive" nicht funktioniert.

Habe mich mal ein wenig mit deinem Style bzw. Menü befasst.
Wenn man in der menu.css deines Styles das hier:

Code: Alles auswählen

@media only screen and (max-width: 875px), only screen and (max-device-width: 875px) {

in

Code: Alles auswählen

@media only screen and (max-width: 200px), only screen and (max-device-width: 200px) {

ändert, wird dieses Menü angezeigt, auch ohne die beiden Einträge in der overall_header.html für die .js Dateien (abgesehen vom Layout).
Da bei deinem Menü ab 875px das responsive Layout beginnt, greifen die Einträge für die .js Dateien in der overall_header.html.

[Talk19zehn]

@ Kirk ... - "nee", - oder? Das ist und kann nicht des Rätsels Lösung sein / gewesen sein. Dann würde responsive ja erst ab jener von dir angenommenen Größe passen. Es fehlte m.E. einfach der korrekte Pfad, um das CSS anzuwenden. Bringe mich jetzt nicht durcheinander ....

Allerbeste Grüße

[Kirk]

Ich wollte damit nur zeigen das die Angaben in der menu.css greifen und das es an diesem Code

Code: Alles auswählen

<script src="./styles/meinstyle/template/script.js" type="text/javascript"></script>

in der overall_header.html lag.
Probier es mal selbst aus in dem du die beiden <script src in der overall_header.html (die für das Menü) und in der menu.css die Notationen für das responsive Design rausnimmst.

Bringe mich jetzt nicht durcheinander ....

Ist nicht meine Absicht