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

REDAXO Forum

Diskussionen, Fragen rund um das CMS REDAXO
https://redaxo.org/forum/

Main-Navigation trennen – Probleme Responsive Drop Down Menu

https://redaxo.org/forum/viewtopic.php?t=20786

Seite 1 von 1

Main-Navigation trennen – Probleme Responsive Drop Down Menu

Verfasst: 27. Nov 2015, 11:24
von Kucki2
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.

Re: Main-Navigation trennen – Probleme Responsive Drop Down

Verfasst: 27. Nov 2015, 11:28
von RexDude
Hi,

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

Re: Main-Navigation trennen – Probleme Responsive Drop Down

Verfasst: 27. Nov 2015, 11:39
von Kucki2

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>

Re: Main-Navigation trennen – Probleme Responsive Drop Down

Verfasst: 27. Nov 2015, 11:49
von Oliver.Kreischer
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.

Re: Main-Navigation trennen – Probleme Responsive Drop Down

Verfasst: 27. Nov 2015, 12:01
von Kucki2
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.

Re: Main-Navigation trennen – Probleme Responsive Drop Down

Verfasst: 27. Nov 2015, 13:53
von runstop64
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.

Re: Main-Navigation trennen – Probleme Responsive Drop Down

Verfasst: 27. Nov 2015, 17:08
von Kucki2
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!

Re: Main-Navigation trennen – Probleme Responsive Drop Down

Verfasst: 27. Nov 2015, 17:36
von runstop64
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.
Alle Zeiten sind UTC+02:00
Seite 1 von 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/