[phpBB Debug] PHP Warning: in file [ROOT]/ext/tas2580/seourls/event/listener.php on line 213: Undefined array key "FORUM_NAME"
Main-Navigation trennen – Probleme Responsive Drop Down Menu - REDAXO Forum
Hallo,

Wir haben in letzter Zeit festgestellt, dass die Kommunikation via Slack viel schneller und zielführender ist als ein Beitrag im Forum. Aufgrund der neuen und besseren Möglichkeiten der Kommunikation haben wir uns entschlossen das Forum nur noch als Archiv zur Verfügung zu stellen. Somit bleibt es weiterhin möglich hier nach Lösungen zu suchen. Neue Beiträge können nicht mehr erstellt werden.

Wir empfehlen, für deine Fragen/Probleme Slack zu nutzen. Dort sind viele kompetente Benutzer aktiv und beantworten jegliche Fragen, gerne auch von REDAXO-Anfängern! Slack wird von uns sehr intensiv und meistens "rund um die Uhr" benutzt :-)
Selbst einladen kannst Du dich hier: https://redaxo.org/slack/
Kucki2
Beiträge: 146
Registriert: 18. Feb 2008, 22:12

Main-Navigation trennen – Probleme Responsive Drop Down Menu

27. Nov 2015, 11:24

Ich hoffe, ich schaffe es, mich verständlich auszudrücken, ansonsten bitte unbedingt nachfragen :-)

Ich habe bisher in einem Projekt eine Haupt-Navigation mit 9 Menupünkten im Einsatz. Diese Navigation soll jetzt optisch getrennt werden: Die 4 wichtigsten Punkte sollen anders dargestellt werden (andere Optik und Position) als die 5 weniger wichtigen Punkte. Grundsätzlich alles kein Problem, wäre da nicht das "Responsive Select Nav" Menü, in dem natürlich weiterhin alle 9 Menüpunkte angezeigt werden sollen.

Mein erster Ansatz war, einfach 2 verschiedene Menüs zu erstellen, was definitiv der einfachste Weg wäre. Da allerdings "Select Nav" nur die erste ul-id "nav" darstellt, habe ich dann auch nur eines der beiden Menüs in meiner Responsive-Navigation. Blöd! :-(

Zweiter Ansatz war, den Navigationspunkten bereits über das Navigationstemplate li-Klassen zuzuweisen. Auch das funktioniert soweit, nur bin ich dann in der Gestaltung und Positionierung der 2 Menüs sehr eingeschränkt (oder ich stelle mich eingeschränkt an :-))...

Habt ihr vielleicht noch eine Idee, wie ich vorzugsweise Lösungsansatz 1 doch noch irgendwie vernünftig umsetzen kann?

Danke und Grüße, Kucki2.

Benutzeravatar
RexDude
Beiträge: 2543
Registriert: 22. Apr 2010, 11:24

Re: Main-Navigation trennen – Probleme Responsive Drop Down

27. Nov 2015, 11:28

Hi,

kannst du mal das Html Markup deiner 2 Menüs posten?

Kucki2
Beiträge: 146
Registriert: 18. Feb 2008, 22:12

Re: Main-Navigation trennen – Probleme Responsive Drop Down

27. Nov 2015, 11:39

Code: Alles auswählen

<div id="navigation">
   <ul id="nav">
      <li>
         <a href="/produkte/">Produkte</a>
         <ul>
            <li><a href="/produkte/produktneuheiten/">Produktneuheiten</a></li>
            <li><a href="/produkte/getriebemotoren/">Getriebemotoren</a></li>
            <li><a href="/produkte/bldc-motoren/">BLDC-Motoren</a></li>
            <li><a href="/produkte/elektromotorische-spindelantriebe/">Elektromotorische Spindelantriebe</a></li>
            <li><a href="/produkte/manuelle-spindelantriebe/">Manuelle Spindelantriebe</a></li>
            <li><a href="/produkte/hubsysteme-bildschirm-schrank/">Hubsysteme Bildschirm / Schrank</a></li>
            <li><a href="/produkte/kegelradgetriebe/">Kegelradgetriebe</a></li>
            <li><a href="/produkte/schneckenradgetriebe/">Schneckenradgetriebe</a></li>
            <li><a href="/produkte/zubehoer/">Zubehör</a></li>
            <li><a href="/produkte/kundenspezifische-loesungen/">Kundenspezifische Lösungen</a></li>
            <li><a href="/produkte/basistechnologien/">Basistechnologien</a></li>
         </ul>
      </li>
      <li>
         <a href="/anwendungsbereiche/">Anwendungsbereiche</a>
         <ul>
            <li><a href="/anwendungsbereiche/ergonomie-professional/">Ergonomie Professional</a></li>
            <li><a href="/anwendungsbereiche/ergonomie-home-und-care/">Ergonomie Home & Care</a></li>
            <li><a href="/anwendungsbereiche/building-drives/">Building Drives</a></li>
            <li><a href="/anwendungsbereiche/industrial-drives/">Industrial Drives</a></li>
         </ul>
      </li>
      <li>
         <a href="/downloads/">Downloads</a>
         <ul>
            <li><a href="/downloads/produktdatenblaetter/">Produktdatenblätter</a></li>
            <li><a href="/downloads/anleitungen/">Anleitungen</a></li>
            <li><a href="/downloads/erklaerungen-und-zertifikate/">Erklärungen & Zertifikate</a></li>
            <li><a href="/downloads/software/">Software</a></li>
         </ul>
      </li>
      <li><a href="/wissen/">Wissen</a></li>
      <li class="right">
         <a href="/news/">News</a>
         <ul>
            <li><a href="/news/termine/">Termine</a></li>
         </ul>
      </li>
      <li class="right">
         <a href="/unternehmen/">Unternehmen</a>
         <ul>
            <li><a href="/unternehmen/ueber-ketterer/">Über Ketterer</a></li>
            <li><a href="/unternehmen/vision-und-leitbild/">Vision & Leitbild</a></li>
            <li><a href="/unternehmen/qualitaet-und-umwelt/">Qualität & Umwelt</a></li>
            <li><a href="/unternehmen/regionalpresse/">Regionalpresse</a></li>
            <li><a href="/unternehmen/fachpresse/">Fachpresse</a></li>
         </ul>
      </li>
      <li class="right">
         <a href="/karriere/">Karriere</a>
         <ul>
            <li><a href="/karriere/offene-stellen/">Offene Stellen</a></li>
            <li><a href="/karriere/infos-fuer-arbeitnehmer/">Infos für Arbeitnehmer</a></li>
         </ul>
      </li>
      <li class="right">
         <a href="/ausbildung/">Ausbildung</a>
         <ul>
            <li><a href="/ausbildung/ausbildung-bei-ketterer/">Ausbildung bei Ketterer</a></li>
            <li><a href="/ausbildung/ausbildungsstellen/">Ausbildungsstellen</a></li>
            <li><a href="/ausbildung/unsere-azubis-unterwegs/">Unsere Azubis unterwegs</a></li>
            <li><a href="/ausbildung/bewerbungstipps/">Bewerbungstipps</a></li>
            <li><a href="/ausbildung/girlsday/">Girls'Day</a></li>
         </ul>
      </li>
      <li class="right">
         <a href="/kontakt/">Kontakt</a>
         <ul>
            <li><a href="/kontakt/anschrift-deutschland/">Anschrift Deutschland</a></li>
            <li><a href="/kontakt/niederlassung-usa/">Niederlassung USA</a></li>
            <li><a href="/kontakt/vertretungen-weltweit/">Vertretungen weltweit</a></li>
            <li><a href="/kontakt/anfahrt/">Anfahrt</a></li>
         </ul>
      </li>
   </ul>
</div>

Benutzeravatar
Oliver.Kreischer
Beiträge: 2508
Registriert: 17. Dez 2004, 00:03
Wohnort: Velbert - LA
Kontaktdaten: Website

Re: Main-Navigation trennen – Probleme Responsive Drop Down

27. Nov 2015, 11:49

Hi,

kannst du nicht unterschiedliche IDs für die Navigationen vergeben und das "Responsive Select Nav" (kenne ich nicht) zwei mal aufrufen??

LG
Oliver

P.S.: Habe den Doppelpost gelöscht.
> Friends Of REDAXO Gemeinsame REDAXO-Entwicklung!
> REDAXO Agenturen. Eintragen erwünscht!
> Komm in den Slack Channel Es lohnt sich!

Kucki2
Beiträge: 146
Registriert: 18. Feb 2008, 22:12

Re: Main-Navigation trennen – Probleme Responsive Drop Down

27. Nov 2015, 12:01

Das hatte ich schon überlegt bzw. recherchiert. Da ich mich aber mit den Scripts absolut garnicht auskenne, wäre das der letzte Schritt, den ich gehen möchte :-( Ich habe das Thema schon gegoogelt und bin in diversen Foren auch schon auf diese Frage gestoßen. Leider habe ich allerdings bisher dazu keinen Lösungsansatz gefunden.

Aber wahrscheinlich komm ich wohl nicht drumherum, das Script zu verändern... :-)

PS: Habe den Doppelpost auch (versucht) zu löschen.

Benutzeravatar
runstop64
Beiträge: 369
Registriert: 23. Okt 2012, 21:34
Wohnort: Hamburg
Kontaktdaten: Website Facebook Twitter

Re: Main-Navigation trennen – Probleme Responsive Drop Down

27. Nov 2015, 13:53

Hi,

ich nehme an, das Responsive Select Nav sich auf die Mobildarstellung bezieht? In dem Fall wäre das einfachste, die Menüstruktur in zwei Versionen auszugeben. Eine für die optisch differenzierte Desktop Version, eine für die Mobilvariante. Die jeweils nicht benötigte müsste dann über CSS ausgeblendet werden. Ansonsten könntest du die Navigationsgruppen per JavaScript (oder jQuery) manipulieren.
Viele Grüße,
Daniel


studio-ahoi.de | Referenzen | Friends Of REDAXO

Kucki2
Beiträge: 146
Registriert: 18. Feb 2008, 22:12

Re: Main-Navigation trennen – Probleme Responsive Drop Down

27. Nov 2015, 17:08

Hi Daniel,

die Navigation funktioniert schon genau so, wie von der vorgeschlagen. Der Code oben war leider nicht ganz vollständig :-(

So sieht die Navigation aus:

Code: Alles auswählen

<div id="navigation">
   <ul id="nav">
      <li class="">
         <a href="/produkte/">Produkte</a>
         <ul style="display: none;">
            <li><a href="/produkte/produktneuheiten/">Produktneuheiten</a></li>
            <li><a href="/produkte/getriebemotoren/">Getriebemotoren</a></li>
            <li><a href="/produkte/bldc-motoren/">BLDC-Motoren</a></li>
            <li><a href="/produkte/elektromotorische-spindelantriebe/">Elektromotorische Spindelantriebe</a></li>
            <li><a href="/produkte/manuelle-spindelantriebe/">Manuelle Spindelantriebe</a></li>
            <li><a href="/produkte/hubsysteme-bildschirm-schrank/">Hubsysteme Bildschirm / Schrank</a></li>
            <li><a href="/produkte/kegelradgetriebe/">Kegelradgetriebe</a></li>
            <li><a href="/produkte/schneckenradgetriebe/">Schneckenradgetriebe</a></li>
            <li><a href="/produkte/zubehoer/">Zubehör</a></li>
            <li><a href="/produkte/kundenspezifische-loesungen/">Kundenspezifische Lösungen</a></li>
            <li><a href="/produkte/basistechnologien/">Basistechnologien</a></li>
         </ul>
      </li>
      <li class="">
         <a href="/anwendungsbereiche/">Anwendungsbereiche</a>
         <ul style="display: none;">
            <li><a href="/anwendungsbereiche/ergonomie-professional/">Ergonomie Professional</a></li>
            <li><a href="/anwendungsbereiche/ergonomie-home-und-care/">Ergonomie Home & Care</a></li>
            <li><a href="/anwendungsbereiche/building-drives/">Building Drives</a></li>
            <li><a href="/anwendungsbereiche/industrial-drives/">Industrial Drives</a></li>
         </ul>
      </li>
      <li>
         <a href="/downloads/">Downloads</a>
         <ul>
            <li><a href="/downloads/produktdatenblaetter/">Produktdatenblätter</a></li>
            <li><a href="/downloads/anleitungen/">Anleitungen</a></li>
            <li><a href="/downloads/erklaerungen-und-zertifikate/">Erklärungen & Zertifikate</a></li>
            <li><a href="/downloads/software/">Software</a></li>
         </ul>
      </li>
      <li><a href="/wissen/">Wissen</a></li>
      <li class="right">
         <a href="/news/">News</a>
         <ul>
            <li><a href="/news/termine/">Termine</a></li>
         </ul>
      </li>
      <li class="right">
         <a href="/unternehmen/">Unternehmen</a>
         <ul>
            <li><a href="/unternehmen/ueber-ketterer/">Über Ketterer</a></li>
            <li><a href="/unternehmen/vision-und-leitbild/">Vision & Leitbild</a></li>
            <li><a href="/unternehmen/qualitaet-und-umwelt/">Qualität & Umwelt</a></li>
            <li><a href="/unternehmen/regionalpresse/">Regionalpresse</a></li>
            <li><a href="/unternehmen/fachpresse/">Fachpresse</a></li>
         </ul>
      </li>
      <li class="right">
         <a href="/karriere/">Karriere</a>
         <ul>
            <li><a href="/karriere/offene-stellen/">Offene Stellen</a></li>
            <li><a href="/karriere/infos-fuer-arbeitnehmer/">Infos für Arbeitnehmer</a></li>
         </ul>
      </li>
      <li class="right">
         <a href="/ausbildung/">Ausbildung</a>
         <ul>
            <li><a href="/ausbildung/ausbildung-bei-ketterer/">Ausbildung bei Ketterer</a></li>
            <li><a href="/ausbildung/ausbildungsstellen/">Ausbildungsstellen</a></li>
            <li><a href="/ausbildung/unsere-azubis-unterwegs/">Unsere Azubis unterwegs</a></li>
            <li><a href="/ausbildung/bewerbungstipps/">Bewerbungstipps</a></li>
            <li><a href="/ausbildung/girlsday/">Girls'Day</a></li>
         </ul>
      </li>
      <li class="right">
         <a href="/kontakt/">Kontakt</a>
         <ul>
            <li><a href="/kontakt/anschrift-deutschland/">Anschrift Deutschland</a></li>
            <li><a href="/kontakt/niederlassung-usa/">Niederlassung USA</a></li>
            <li><a href="/kontakt/vertretungen-weltweit/">Vertretungen weltweit</a></li>
            <li><a href="/kontakt/anfahrt/">Anfahrt</a></li>
         </ul>
      </li>
   </ul>
   <select class="selectnav" id="selectnav1">
      <option value="">Menu</option>
      <option value="/produkte/">Produkte</option>
      <option value="/produkte/produktneuheiten/">- Produktneuheiten</option>
      <option value="/produkte/getriebemotoren/">- Getriebemotoren</option>
      <option value="/produkte/bldc-motoren/">- BLDC-Motoren</option>
      <option value="/produkte/elektromotorische-spindelantriebe/">- Elektromotorische Spindelantriebe</option>
      <option value="/produkte/manuelle-spindelantriebe/">- Manuelle Spindelantriebe</option>
      <option value="/produkte/hubsysteme-bildschirm-schrank/">- Hubsysteme Bildschirm / Schrank</option>
      <option value="/produkte/kegelradgetriebe/">- Kegelradgetriebe</option>
      <option value="/produkte/schneckenradgetriebe/">- Schneckenradgetriebe</option>
      <option value="/produkte/zubehoer/">- Zubehör</option>
      <option value="/produkte/kundenspezifische-loesungen/">- Kundenspezifische Lösungen</option>
      <option value="/produkte/basistechnologien/">- Basistechnologien</option>
      <option value="/anwendungsbereiche/">Anwendungsbereiche</option>
      <option value="/anwendungsbereiche/ergonomie-professional/">- Ergonomie Professional</option>
      <option value="/anwendungsbereiche/ergonomie-home-und-care/">- Ergonomie Home & Care</option>
      <option value="/anwendungsbereiche/building-drives/">- Building Drives</option>
      <option value="/anwendungsbereiche/industrial-drives/">- Industrial Drives</option>
      <option value="/downloads/">Downloads</option>
      <option value="/downloads/produktdatenblaetter/">- Produktdatenblätter</option>
      <option value="/downloads/anleitungen/">- Anleitungen</option>
      <option value="/downloads/erklaerungen-und-zertifikate/">- Erklärungen & Zertifikate</option>
      <option value="/downloads/software/">- Software</option>
      <option value="/wissen/">Wissen</option>
      <option value="/news/">News</option>
      <option value="/news/termine/">- Termine</option>
      <option value="/unternehmen/">Unternehmen</option>
      <option value="/unternehmen/ueber-ketterer/">- Über Ketterer</option>
      <option value="/unternehmen/vision-und-leitbild/">- Vision & Leitbild</option>
      <option value="/unternehmen/qualitaet-und-umwelt/">- Qualität & Umwelt</option>
      <option value="/unternehmen/regionalpresse/">- Regionalpresse</option>
      <option value="/unternehmen/fachpresse/">- Fachpresse</option>
      <option value="/karriere/">Karriere</option>
      <option value="/karriere/offene-stellen/">- Offene Stellen</option>
      <option value="/karriere/infos-fuer-arbeitnehmer/">- Infos für Arbeitnehmer</option>
      <option value="/ausbildung/">Ausbildung</option>
      <option value="/ausbildung/ausbildung-bei-ketterer/">- Ausbildung bei Ketterer</option>
      <option value="/ausbildung/ausbildungsstellen/">- Ausbildungsstellen</option>
      <option value="/ausbildung/unsere-azubis-unterwegs/">- Unsere Azubis unterwegs</option>
      <option value="/ausbildung/bewerbungstipps/">- Bewerbungstipps</option>
      <option value="/ausbildung/girlsday/">- Girls'Day</option>
      <option value="/kontakt/">Kontakt</option>
      <option value="/kontakt/anschrift-deutschland/">- Anschrift Deutschland</option>
      <option value="/kontakt/niederlassung-usa/">- Niederlassung USA</option>
      <option value="/kontakt/vertretungen-weltweit/">- Vertretungen weltweit</option>
      <option value="/kontakt/anfahrt/">- Anfahrt</option>
   </select>
</div>
Sprich je nach Ausgabegerät wird eine Variante angezeigt und eine ausgeblendet. Was mich an dieser Lösung stört, ist, dass sich die Navigationspunkte mit li-Klasse "right" nicht flexibel genug hinsichtlich Position und Aussehen gestalten lassen. Wenn ich aber für "left" and "right" zwei getrennte Navigationen mache, wird über das Script "Select Nav" nur die Navigation berücksichtigt, die die ul id "nav" hat. Die andere fehlt.

Aber mit dem Vorschlag von Oliver hat's geklappt. Ich habe dann zwar auch zwei optisch getrennte "Responsive Select Navs" in der Mobilansicht, aber damit kann ich leben...

Danke euch und schönes Wochenende!

Benutzeravatar
runstop64
Beiträge: 369
Registriert: 23. Okt 2012, 21:34
Wohnort: Hamburg
Kontaktdaten: Website Facebook Twitter

Re: Main-Navigation trennen – Probleme Responsive Drop Down

27. Nov 2015, 17:36

Hi Kucki2,

freut mich, dass Du eine Lösung für Dich gefunden hast, ich habe es allerdings etwas anders gemeint, als von Dir ausgeführt:

Variante 1: Du gibst die Navigation über Redaxo zweimal aus, die erste Version ist die, die für das gestylte Menü benutzt wird. Die zweite Version wird genau genommen nie angezeigt und enthält die Navigation als einfache, aber zusammenhängende Liste. Auf diese Version wendest du das Script an, damit ist die Navigation vollständig.

Variante 2: Du klonst per JavaScript die Listenelemente des gestylten Menüs in eine neue, aber zusammenhängende Liste, auf die Du dann auch das Select Nav Script anwenden kannst.

Es könnte eventuell auch möglich sein, mithilfe der Redaxo Klasse rex_category_select eine Select-Navigation für das Frontend zu bauen.
Viele Grüße,
Daniel


studio-ahoi.de | Referenzen | Friends Of REDAXO

Zurück zu „Allgemeines [R4]“