Contao-Camp 2024
Ergebnis 1 bis 34 von 34

Thema: Aufklappmenü ähnlich Superfish

  1. #1
    Contao-Fan
    Registriert seit
    10.11.2010.
    Beiträge
    471

    Standard Aufklappmenü ähnlich Superfish

    Hallo,

    gibt es für Contao 4.4.X ein funktionierendes horizontales DropDown-Menü? Hatten bisher bei Contao 3.X immer Superfish im Einsatz - das wird aber allem Anschein nach nicht weitergeführt.

    Danke für Tipps!

  2. #2
    Contao-Fan Avatar von jscholtysik
    Registriert seit
    19.06.2009.
    Ort
    München
    Beiträge
    366

    Standard

    Das lässt sich mit CSS und ohne Erweiterung relativ einfach selbst umsetzen. Ich habe vor Kurzem eine Seite für eine Schule mit einem 3-Level-Menü per CSS und Flexbox umgesetzt, das ging gut...
    Joachim
    *** Kein Backup, kein Mitleid ***

  3. #3
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Dublay Beitrag anzeigen
    Hatten bisher bei Contao 3.X immer Superfish im Einsatz - das wird aber allem Anschein nach nicht weitergeführt.
    Ja, weil es unter anderem nicht für Touch-Displays geeignet ist.

    Schau dir mal [mobile_menu] an. Das ist von nem verlässlichen Entwickler und gefällt vielen hier gut. Das ist zwar erstmal für ein sogenanntes mobile oder responsive menu gedacht, aber mit dein paar Anpassungen kann man die Ansicht auf breiten Viewports anpassen ohne die Funktionalität zu verlieren.

    Die Funktionalität besteht unter anderem darin, dass man beim ersten Klick/Touch auf einen Menülink die Unterpunkte aufklappt und erst beim 2. Klick/Touch zu der Seite gelangt.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  4. #4
    Contao-Fan
    Registriert seit
    10.11.2010.
    Beiträge
    471

    Standard

    Zitat Zitat von Andreas Beitrag anzeigen
    Ja, weil es unter anderem nicht für Touch-Displays geeignet ist.

    Schau dir mal [mobile_menu] an. Das ist von nem verlässlichen Entwickler und gefällt vielen hier gut. Das ist zwar erstmal für ein sogenanntes mobile oder responsive menu gedacht, aber mit dein paar Anpassungen kann man die Ansicht auf breiten Viewports anpassen ohne die Funktionalität zu verlieren.
    Hi Andreas,

    danke für den Tipp. Hierzu zwei Fragen: Ich würde die Erweiterung gerne mal testen, auf dem 1&1 Unlimited Hosting-Paket hat der Composer wohl nicht genug RAM zur Verfügung. Kann ich das auch manuell installieren?

    Und - hast Du zufällig im Kopf, welche Änderungen ich machen muss? Das erspart mir vielleicht stundenlanges herumgewusel

  5. #5
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Das ist echt doof mit dem RAM. Hier zeigt LF glaube ich unter anderem, wie man jede C3.5 Erweiterung auch manuell in C4 installieren kann https://www.youtube.com/watch?v=rwC8xfdO3Ao.

    Hier mal das CSS aus meiner Spielwiese, ist nicht ausgearbeitet, aber ein Ansatz. Die Importants sind glaube ich das Wichtigste, man braucht aber nicht alles von diesem CSS, wie gesagt, nur ein Ansatz. Siehe auch hier https://github.com/codefog/contao-mobile_menu/issues/12
    PHP-Code:
    @media (min-width960px) {
      
    #wrapper {
        
    padding-top80px;
      }
      .
    mobile_menu {
        
    width100% !important;
        
    heightauto !important;
        
    transformnone !important;
        
    displayblock !important;
        
    /** position: relative; else it is fixed */
      
    }
      .
    mobile_menu .inner {
        
    heightauto;
        
    overflowvisible;
      }
      .
    mm-close {
        
    displaynone;
      }
      .
    mainnav li {
        
    floatleft;
      }
      .
    mainnav li.submenu_hide ul {
        
    displaynone;
      }
      .
    mainnav ul ul {
        
    positionabsolute;
        
    left0;
      }
      .
    mainnav .level_2 a
      .
    mainnav .level_2 span,
      .
    mainnav .level_3 a
      .
    mainnav .level_3 span {
        
    padding-left1em;
      }

    Der "Custom breakpoint (px)" im Modul steht bei mir bei 959px.
    Geändert von Andreas (25.10.2017 um 17:03 Uhr) Grund: Selektoren geändert nach .mainnav
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  6. #6
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Vielleicht ist die Anleitung bzgl. "Umgehung" des Memory Limits von @Spooky auch interessant für Dich

    https://community.contao.org/de/show...l=1#post454002
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  7. #7
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Habe meiner Navigation jetzt mal die Klasse "mainnav" gegeben. Hier noch ein wenig Styling.
    PHP-Code:
    /* ... mainnav (mobile_menu) ...
    -------------------------------------------------------------------------------------------------*/
    nav ul {
      list-
    stylenone;
      
    margin0;
      
    padding0;
      
    displayblock;
    }
    nav li a,
    nav span {
      
    displayblock;
    }
    .
    mainnav li a,
    .
    mainnav span {
      
    color#00768b;
      
    padding0 1em;
      
    positionrelative;
      
    font-size1rem;
      
    line-height40px;
      
    transitionall .25s ease 0s;
    }
    .
    mainnav li a:focus,
    .
    mainnav li a:active,
    .
    mainnav li a:hover {
      
    background-colorrgba(255255255.1);
    }
    .
    mainnav span,
    .
    mainnav a.trail {
      
    background-colorrgba(255255255.2);
    }
    .
    mainnav .submenu a::after,
    .
    mainnav .submenu span::after {
      
    content'›';
      
    displayinline-block;
      
    width40px;
      
    height40px;
      
    line-height36px;
      
    text-aligncenter;
    }
    .
    mainnav .submenu_show a::after,
    .
    mainnav .submenu_show span::after {
      
    transformrotate(90deg);
    }
    .
    mainnav .level_2 a,
    .
    mainnav .level_2 span {
      
    padding-left2em;
    }
    .
    mainnav.level_3 a,
    .
    mainnav .level_3 span {
      
    padding-left3em;
    }
    .
    submenu_hide,
    .
    mobile_menu_trigger {
      
    cursorpointer;
    }
    /* ... mainnav (mobile_menu) ... END
    -------------------------------------------------------------------------------------------------*/ 
    Geändert von Andreas (25.10.2017 um 17:20 Uhr)
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  8. #8
    Contao-Fan
    Registriert seit
    10.11.2010.
    Beiträge
    471

    Standard

    Zitat Zitat von Andreas Beitrag anzeigen
    Das ist echt doof mit dem RAM. Hier zeigt LF glaube ich unter anderem, wie man jede C3.5 Erweiterung auch manuell in C4 installieren kann https://www.youtube.com/watch?v=rwC8xfdO3Ao.
    Danke für den Hinweis mit dem Video. Ich habe den Ordner "mobile_menu" aus einer bestehenden Contao 3.X-Version in meine 4.4. in /system/modules kopiert und das Installtool domain.de/contao/install aufgerufen, allerdings scheint er von dem Modul nichts mitbekommen zu haben. Hat sich da was geändert seit der Konferenz?

    Edit 1: Über den Contao-Manager muss noch der Cache geleert werden, dann klappt auch die Datenbankaktualisierung.
    Edit 2: Noch eine kurze Frage an jemanden, der das Menü schon nutzt: Wie binde ich das in den Header ein? Aktuell packt er es mir unter den Wrapper, obwohl im Seitenlayout die Kopfzeile ausgewählt ist.
    Geändert von Dublay (26.10.2017 um 12:11 Uhr)

  9. #9
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    828

    Standard

    Noch eine kurze Frage an jemanden, der das Menü schon nutzt: Wie binde ich das in den Header ein? Aktuell packt er es mir unter den Wrapper, obwohl im Seitenlayout die Kopfzeile ausgewählt ist.
    Das habe ich mich auch gefragt, es wird per JS dem body hinzugefügt. Das könnte man ja ändern und es dem header oder einer definierten Klasse hinzufügen.

    So wie es original ist , ist es für mich auch nicht so sehr geeignet, denn ich möchte z.B. keine zusätzliche (wenn auch im body versteckte) Navigation haben, sondern eine, die dann per Media Queries verändert wird, also so wie das z.B. Bootstrap macht.
    In dem Zusammenhang würde mich auch interessieren, ob jemand das mobile menu als einzige Navigation über alle Viewports nutzt und wenn ja, wie dann das Einbinden in den header gemacht wird, vorausgesetzt man möchte nicht per css die Navigation position:fixed oder :absolute irgendwo "hinzwingen"

  10. #10
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Bennie Beitrag anzeigen
    ...ob jemand das mobile menu als einzige Navigation über alle Viewports nutzt und wenn ja, wie dann das Einbinden in den header gemacht wird...
    Ja, ich. Schau dir das Ticket an (oben verlinkt). Du kannst also entweder auf das Feature warten, einen Pull-Request anbieten, im Core die Zeile ausdokumentieren, oder nachträglich das Menü wieder zurückschieben.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  11. #11
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ihr könnt in dem Ticket auch alle einen "Daumen hoch" hinterlassen, wenn ihr dieses Feature-Request gut findet.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  12. #12
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    828

    Standard Dropdown bleibt geöffnet

    Ich möchte das mobile_menu als einzige Navigation einbauen, also über die Breakpoints entscheiden wann was gezeigt wird.
    Das klappt soweit einwandfrei auch durch die Eigenschaft "Keep menu in place" kann ich sie direkt in den Header bringen.

    Was aber nicht funktioniert bzw. stört ist , dass bei Klick auf level_1 sich zwar das Untermenü level_2 öffnet, aber beim Klick auf einen der Unterpunkte auf der dann aktiven neuen Seite geöffnet bleibt, ebenso wenn man außerhalb des geöffneten Menüs klickt schließt sich dieses nicht wie z.B. bei Bootstrap o.ä. Dropdown Menüs.
    Da das Menü als mobiles Menü entwickelt wurde ist verständlich, dass es in der mobilen Ansicht sinnvoll ist das Untermenü aufgeklappt zu lassen aber als "Desktop Navigation" unpraktisch.

    Wie kann ich das am besten ändern?

  13. #13
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zeig am besten mal einen Link zu deiner Seite.

    Ich hatte damit mal angefangen, weil ich werde dem Kazmil wenn ich dazu komme ein Feature als Pullrequest anbieten, damit man rechts neben dem Text noch ein Icon hat, welches alleine für das Auf/Zuklappen zuständig sein soll.

    Hier unten siehst du einen Teil meines Ansatzes. Man muss die Klassen submenu_show und submenu_hide oberhalb des Breakpoints manipulieren. Das Schließen, wenn man neben das Menü klickt, ist auch mit dabei.
    PHP-Code:
    <script>
      (function($){
        $(
    document).ready(function(){

          
    // [mobile_menu] - hide submenus on desktop
          
    var
            
    menuBreakPoint 768,
            
    mobileMenuNav  = $('.mobile_menu nav'),
            
    togglers       mobileMenuNav.find('li.submenu'),
            
    hideSubmenus   = function(){
              if($(
    window).width() >= menuBreakPoint){
                
    togglers.removeClass('submenu_show');
                
    togglers.addClass('submenu_hide');
              }
            };

          
    hideSubmenus();

          $(
    window).resize(hideSubmenus);

          $(
    'body').on('click', function(ev){
            if($(
    ev.target).closest(mobileMenuNav).length === 0) {
              
    hideSubmenus();
            }
          });

        });
      })(
    jQuery);
    </script> 
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  14. #14
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    828

    Standard

    Funktioniert schon mal super, danke Andreas!
    Ich weiß noch nicht ob ich so 100% zufrieden bin mit dem Menü, habe mir alternativ die nav_default für Bootstrap4 angepasst, das hat natürlich den Charme, dass alles auf Anhieb funktioniert.
    Was nutzt Du denn außer dem mobile_menu , oder kommt es bei Dir immer zum Einsatz?
    Ich frage nur, weil ich öfter hier Fragen zu Dropdown Menüs lese die auch auf'm Touchpad gut funktionieren und letztlich landet man dann hier beim mobile_menu (was ohne Deine Lösung auch noch nicht optimal ist) oder bei Bootstrap

  15. #15
    Alter Contao-Hase
    Registriert seit
    20.03.2010.
    Ort
    Hannover
    Beiträge
    1.041

    Standard

    Als Optionen zu "mobile_menu" und Bootstrap gibt es noch rein via CSS den checkbox-hack (wenn es passt) oder beliebige andere Scripte, die Du einbauen kannst.
    Man ist also nicht ausschließlich an diese zwei Optionen gebunden.

  16. #16
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    828

    Standard

    Das es x-beliebige Optionen gibt ist klar, mir fiel nur auf, dass die Fragen danach oftmals mit eben den o.g. Optionen beantwortet werden.

  17. #17
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ziel für mich ist es, ein "Mobile Menu" zu haben, welches ich überall einsetzen kann und zwar als einzige Navigation. Individuelle Anpassungen je nach Projekt sollten damit einfach möglich sein. Bis jetzt hatte ich so einiges ausprobiert und habe mal dieses mal jenes benutzt. Ich denke, dass [mobile_menu] sich jetzt für mich als zuverlässiger Standard entwickeln wird. Zumal Kamil auch bereit ist Wünsche mit einfließen zu lassen.

    [mobile_menu] ist im Prinzip schon "optimal" solange man es nur als 2. Menü benutzt, welches nur ab bestimmten Breakpoints zum Einsatz kommt. Man benötigt kein angepasstes Template und kann noch anderen Content darin unterbringen. Kamil sehe ich als zuverlässigen sehr guten Entwickler, welcher höchstwahrscheinlich noch viele Jahre dabei sein wird und seine Erweiterungen immer uptodate hält. Außerdem ist der Code sehr gut und somit könnten seine Erweiterungen auch leicht übernommen werden.

    Das Mmenu http://mmenu.frebsite.nl/ [dk_mmenu] ist auch sehr gut. Scheint mir aber etwas zu komplex zu sein. Hier muss man sich darauf verlassen, dass der Core von Mmenu innerhalb von [dk_mmenu] immer aktuell gehalten wird, was in den letzten 2 Jahren nicht der Fall war. Habe aber gesehen, dass @Spooky die letzte Zeit so einiges da commited hatte. Im Gegensatz zum mobile_menu hat man hier also nicht nur 3rdParty, sondern auch 4thParty zu handhaben.

    Bootstrap hatte ich mir mal angesehen, aber als ich feststellte, dass Bootstrap eine Ebene, welche Unterseiten enthält, nie als eigenständige Seiten benutzt (nur als Toggler zum Auf/Zuklappen), habe ich da nicht mehr weiter nachgesehen. Das kann man auch leicht selber umsetzen. Außerdem benötigt man da ein angepasstes Template und CSS von Bootstrap.

    Es wäre natürlich schön, wenn man [mobile_menu] direkt out of the box als einziges Menü benutzen könnte, aber daran können wir ja arbeiten. Ich hatte bereits erfolgreich begonnen das Auf/Zuklappen auf ein separates Element (Icon, Pfeil) rechts neben dem Linktext auszulagern. Ist bei mir leider spurlos verschwunden.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  18. #18
    Alter Contao-Hase
    Registriert seit
    20.03.2010.
    Ort
    Hannover
    Beiträge
    1.041

    Standard

    Für mich sind externe mobile Navigationen aus dem Grund herausgefallen, da diese meist als mobile-only eingesetzt werden. Ich möchte jedoch nur eine Navigation nutzen und eine Anpassung dieser mobilen Lösungen ist zumindest nicht mal so eben kurz gemacht.

    Wenn man jedoch das Modul zB von Kamil oft einsetzt, wäre es natürlich eine Option, so wie von Andreas gestartet, die Anpassungen zu machen und diese Kamil zum Einbau zur Verfügung zu stellen.

  19. #19
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    828

    Standard

    Die Erweiterung von Kamil gefällt mir auch recht gut, aber wie gesagt will ich auch nur ein Menü haben und nicht unbedingt noch eines extra für kleine viewports. Mit den entsprechenden Einstellungen bzw. dem Script von Andreas kann man es schon gut nutzen. Da es weiterentwickelt wird, kommt es sicher noch mehr bei mir zum Einsatz als bisher.
    @Andreas
    Bootstrap hatte ich mir mal angesehen, aber als ich feststellte, dass Bootstrap eine Ebene, welche Unterseiten enthält, nie als eigenständige Seiten benutzt (nur als Toggler zum Auf/Zuklappen), habe ich da nicht mehr weiter nachgesehen.
    Das stimmt aber genau das finde ich wiederum gut, eben weil es "touchfriendly" ist. Das ist auch nicht unüblich die obere Seite als reinen toggler zu nutzen, wobei ich das Problem natürlich kenne, manchmal benötigt man auch diese Seite für Inhalte bzw. Übersichtseite für die Unterseiten - ihr kennt sicher alle die Diskussionen ob man die benötigt oder nicht usw...
    Wenn man dennoch die Seite aufrufen können soll lässt sich das auch in Bootstrap ändern, auch dahingehend, dass es bei z.B. viewports < 768px touch-only ist ansonsten eben "hover" per Maus.
    Dazu gibt's diverse Anleitungen - aber zugegeben es ist grundsätzlich so gedacht wie Du sagtest.
    Geändert von Bennie (19.02.2018 um 19:54 Uhr)

  20. #20
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ich weise die Kunden immer darauf hin, dass dies ne schöne Lösung wäre, sie aber dann auf diese Seite verzichten müssten. Danach wollen die das nicht mehr. Weil meistens steht die Seitenstruktur mit den Inhalten schon und niemand hat Lust das Konzept nochmal zu überdenken.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  21. #21
    Contao-Nutzer
    Registriert seit
    27.11.2013.
    Beiträge
    63

    Standard

    Zitat Zitat von Andreas Beitrag anzeigen
    Ja, weil es unter anderem nicht für Touch-Displays geeignet ist.
    Das ist nicht ganz richtig.
    Richtig ist: Superfish ist für Touch-Displays geeignet.

    Siehe auch: https://superfish.joelbirch.co

    "Supports touch devices. On Android, iOS, Windows Phone 7 and IE10 (with touchscreen), first touch will open an associated submenu, second will follow the link. Mouse and keyboard accessibility works as normal. Note that you currently need to include Brian Cherne’s hoverIntent plugin to support certain Android browsers' and IE10's touch interaction. This may change."

    Ich denke, dass es auch in Contao 4 möglich sein sollte Superfish einzubinden, auch ohne Erweiterung. Man müsste nur das bzw. die entsprechenden CSS und das entsprechende js einbinden und das Template anpassen.

  22. #22
    Contao-Nutzer
    Registriert seit
    27.11.2013.
    Beiträge
    63

    Standard nav_default.html5 anpassen

    Zitat Zitat von reinweiss Beitrag anzeigen
    ... und das Template anpassen.
    Da geht es aber schon los:
    Weiß jemand wie man das Template so ändert, dass nur das erste <ul> die class "sf-menu" bekommt und nicht alle folgenden <ul> ebenfalls?

    So geht es jedenfalls nicht:
    -----
    <ul class="<?= $this->level ?> sf-menu">
    <?php foreach ($this->items as $item): ?>
    <?php if ($item['isActive']): ?>
    <li class="<?= $item['class'] ?>"><strong class="<?= $item['class'] ?>"<?php if (!empty($item['subitems'])) echo ' aria-haspopup="true"'; ?> itemprop="name"><?= $item['link'] ?></strong><?= $item['subitems'] ?></li>
    <?php else: ?>
    <li<?php if ($item['class']) echo ' class="' . $item['class'] . '"'; ?>><a href="<?= $item['href'] ?: './' ?>" title="<?= $item['pageTitle'] ?: $item['title'] ?>"<?php if ($item['class']) echo ' class="' . $item['class'] . '"'; ?><?php if ($item['accesskey']) echo ' accesskey="' . $item['accesskey'] . '"'; ?><?php if ($item['tabindex']) echo ' tabindex="' . $item['tabindex'] . '"'; ?><?php if ($item['nofollow']) echo ' rel="nofollow"'; ?><?= $item['target'] ?><?php if (!empty($item['subitems'])) echo ' aria-haspopup="true"'; ?> itemprop="url"><span itemprop="name"><?= $item['link'] ?></span></a><?= $item['subitems'] ?></li>
    <?php endif; ?>
    <?php endforeach; ?>
    </ul>

    -----

    Das ergibt:

    <ul class="level_1 sf-menu">
    <li class="active submenu first">
    <strong class="active submenu first" aria-haspopup="true" itemprop="name">
    </strong>
    <ul class="level_2 sf-menu">
    <li class="first">
    <a href="#" title="" class="first" itemprop="url">
    <span itemprop="name">
    </span>
    </a>
    </li>
    <li class="">
    <a href="#" title="" class="" itemprop="url">
    <span itemprop="name">
    </span>
    </a>
    </li>
    <li class="">
    <a href="#" title="" class="" itemprop="url">
    <span itemprop="name">
    </span>
    </a>
    </li>
    </ul>
    </li>
    <li class="submenu sibling last">
    <a href="#" title="" class="submenu sibling last" aria-haspopup="true" itemprop="url">
    <span itemprop="name">
    </span>
    </a>
    <ul class="level_2 sf-menu">
    <li class="first">
    <a href="#" title="" class="first" itemprop="url">
    <span itemprop="name">
    </span>
    </a>
    </li>
    </ul>
    </li>
    </ul>

  23. #23
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.060
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Da musst du oben abfragen ob $this->level gleich "level_1" und nur dann die Klasse sf_menu ausgeben.

  24. #24
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    828

    Standard

    PHP-Code:
    <ul class="<?php echo $this->level . (($this->level == "level_1") ? " sf-menu" ""); ?>">
    das sollte gehen

  25. #25
    Contao-Nutzer
    Registriert seit
    27.11.2013.
    Beiträge
    63

    Standard

    Zitat Zitat von Bennie Beitrag anzeigen
    PHP-Code:
    <ul class="<?php echo $this->level . (($this->level == "level_1") ? " sf-menu" ""); ?>">
    das sollte gehen
    Das geht!

    Prima, vielen Dank ...
    ... sagt der, dem php sonst nicht viel sagt

  26. #26
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Wenn du Superfish benutzt, dann setzt du ja auf JavaScript und kannst die Klassen auch direkt mit JS da rein bringen, das spart dir ein angepasstes Template.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  27. #27
    Contao-Nutzer
    Registriert seit
    27.11.2013.
    Beiträge
    63

    Standard

    Zitat Zitat von Andreas Beitrag anzeigen
    Wenn du Superfish benutzt, dann setzt du ja auf JavaScript und kannst die Klassen auch direkt mit JS da rein bringen, das spart dir ein angepasstes Template.
    Das ist eine gute Idee!

    Allerdings würde Superfish dann ohne JS nicht funktionieren.
    Superfish verwendet JS aber nur als Ergänzung. Es ist nicht Voraussetzung und funktioniert auch als reine CSS-Lösung ebenfalls sehr gut.

    Im Übrigen löst es einige Probleme unter IOS und Android die z.B. das Aufklappmenü in der Contao 4 Demo noch aufweist wie z.B. Abfangen des ersten touch unter Android um das Aufklappen überhaupt zu ermöglichen ohne dass sofort der auslösende Link ausgeführt wird und unter IOS das Problem dass das Menü nicht aufklappt wenn man bereits auf der übergeordneten Seite ist etc. Das allerdings nur mit aktiviertem JS.

    Daher ziehe ich es vor ein angepasstes Template nav_default-sf.html5 zu verwenden:

    <ul class="<?php echo $this->level . (($this->level == "level_1") ? " sf-menu" : ""); ?>">
    <?php foreach ($this->items as $item): ?>
    <?php if ($item['isActive']): ?>
    <li class="<?= $item['class'] ?>"><strong class="<?= $item['class'] ?>"<?php if (!empty($item['subitems'])) echo ' aria-haspopup="true"'; ?> itemprop="name"><?= $item['link'] ?></strong><?= $item['subitems'] ?></li>
    <?php else: ?>
    <li<?php if ($item['class']) echo ' class="' . $item['class'] . '"'; ?>><a href="<?= $item['href'] ?: './' ?>" title="<?= $item['pageTitle'] ?: $item['title'] ?>"<?php if ($item['class']) echo ' class="' . $item['class'] . '"'; ?><?php if ($item['accesskey']) echo ' accesskey="' . $item['accesskey'] . '"'; ?><?php if ($item['tabindex']) echo ' tabindex="' . $item['tabindex'] . '"'; ?><?php if ($item['nofollow']) echo ' rel="nofollow"'; ?><?= $item['target'] ?><?php if (!empty($item['subitems'])) echo ' aria-haspopup="true"'; ?> itemprop="url"><span itemprop="name"><?= $item['link'] ?></span></a><?= $item['subitems'] ?></li>
    <?php endif; ?>
    <?php endforeach; ?>
    </ul>

  28. #28
    Contao-Nutzer
    Registriert seit
    27.11.2013.
    Beiträge
    63

    Standard Superfish in Contao 4.4 verwenden (auf die Schnelle)

    Damit Superfish in Contao 4.4 funktioniert, muss eigentlich nur die Navigation für das erste <ul> die Klasse "sf-menu" bekommen.

    Ich habe mir mit dem Contao-Manager ein Contao 4.4.17 mit dem Paket contao/official-demo (Version 4.0.0) installiert.

    Dann habe ich mir Superfisch runtergeladen und entpackt: https://superfish.joelbirch.co

    Im Contao-Backend:

    System / Filemanager:
    Ich habe einen Ordner superfish mit zwei Unterordnern css und js angelegt.
    Dann habe ich die Dateien aus superfish-master/dist dorthin kopiert.

    JS anlegen:
    Als eigenes .js habe ich unter files/contaodemo/theme/js/ ein main.js angelegt.
    Dort wird Superfish mit allen gewünschten Optionen gestartet:

    jQuery(document).ready(function() {
    jQuery('ul.sf-menu').superfish();
    });

    Nav-Template:
    Nav-Template duplizieren:
    Unter Layout/Templates habe ich mit New Template "nav_default.html5" nach contaodemo kopiert und in "nav_default-sf.html5" umbenannt.

    Nav-Template editieren:
    In nav_default-sf.html5 habe ich die erste Zeile angepasst:
    vorher: <ul class="<?= $this->level ?>">
    nachher: <ul class="<?php echo $this->level . (($this->level == "level_1") ? " sf-menu" : ""); ?>">
    (Vielen Dank an tab und Bennie)

    Layout / Themes / Modules:
    Ich habe dem Nav-Modul das neue Template zugeordnet:
    Modul "Navigation - Main navigation [Navigation menu]" duplizieren, z.B. als "Navigation - Main navigation Superfish [Navigation menu]".

    Im neuen "Navigation - Main navigation Superfish [Navigation menu]" habe ich dann unter Navigation template das angepasste "nav_default-sf" ausgewählt.

    Layouts anpassen:
    Layout ergänzt, z.B. "1 colum" und "2 columns - [ default ]":

    External style sheets:
    files/contaodemo/theme/superfish/css/superfish.css auswählen.

    Custom JavaScript code:
    <script type="text/javascript" src="files/contaodemo/theme/superfish/js/hoverIntent.js"></script>
    <script type="text/javascript" src="files/contaodemo/theme/superfish/js/superfish.min.js"></script>
    <script type="text/javascript" src="files/contaodemo/theme/js/main.js"></script>

    Das war es eigentlich schon.

    Damit das Menü in der Contao-Demo aufklappen kann, habe ich noch das superfish.css ergänzt:
    .nav-main.block { overflow: visible !important; }

    Ich hoffe, dass ich nichts vergessen habe zu notieren. Das Ergebnis sollte eine Contao-4.4-Demo mit einem ungestylten Superfish sein, das auch unter IOS und Android funktioniert.

  29. #29
    Contao-Fan
    Registriert seit
    10.11.2010.
    Beiträge
    471

    Standard

    Ich krame mal meinen alten Beitrag wieder raus. Danke reinweiss für die Anleitung, allerdings wird bei mir damit nur level_1 befüllt. Unterseiten werden nicht hinzugezogen. Hat jemand zufällig eine Idee, woran das liegen könnte?

    EDIT: Dummer Fehler - vergesst die Frage...
    Geändert von Dublay (04.06.2018 um 13:06 Uhr)

  30. #30
    Contao-Fan
    Registriert seit
    10.11.2010.
    Beiträge
    471

    Standard

    Nochmal Danke an reinweiss - funktioniert prächtig so!
    Geändert von Dublay (06.06.2018 um 11:48 Uhr)

  31. #31
    Contao-Nutzer
    Registriert seit
    31.10.2012.
    Beiträge
    86

    Frage 3.5er Version einfach weiterverwenden?

    Da ich gerade eine Webseite von 3.5 zu 4.4 LTS migriert habe, in der Superfish ebenfalls verwendet wird, folgende Frage: ist es nachteilig, wenn man Superfish einfach aus Contao 3.5 weiterverwendet? Das funktioniert nämlich prima (liegt wie gehabt im /system/modules Ordner) - bis jetzt

    Ich könnte mir halt vorstellen, dass irgendwann der Support für die alten 3.5er-Module eingestellt wird und dann die Navigation nicht mehr funktioniert, bzw. ich dann nach dieser Anleitung hier, die Navigation neu einbauen müsste ... oder sehe ich das falsch?

    Danke schon mal!

  32. #32
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Superfish ist ja eine Erweiterung und hat mit dem Auslauf der Unterstützung für Contao 3.5 nichts zu tun.
    Wenn die Erweiterung bei Dir unter Contao 4 problemlos läuft (was bei vielen Contao3 Erweiterungen der Fall ist), solltest Du das dem Entwickler der Erweiterung hier im Forum bzw. besser bei Github mitteilen. Dann kann er die Erweiterung für Contao 4 freigeben und die Erweiterung kann dann über Composer bzw. den Contao Manager installiert und upgedatet werden.

    Bleibt es bei der manuellen Installation, musst Du selbst für Updates bei dieser Erweiterung (manuell) sorgen. Außerdem wird eine manuell installierte Erweiterung nicht in die Auflösung der Abhängigkeiten einbezogen. Damit kann es auch irgendwann Probleme geben.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  33. #33
    Contao-Nutzer
    Registriert seit
    31.10.2012.
    Beiträge
    86

    Standard

    Ok, super, vielen Dank für die ausführliche Antwort!

    Wie ich gerade bei Github gelesen habe, wird es wohl nicht weiter aktualisiert, somit werd ich wohl nach der Anleitung hier, die Navi umbauen. Die mobile Version löse ich derzeit schon mit Sidr.
    Geändert von MoSaG (29.10.2018 um 11:25 Uhr)

  34. #34
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Bringt Superfish ein angepasstes Navigationstemplate mit? Wenn nicht, dann dürfte das ja auch nur ein wenig CSS und evtl. noch ein paar Zeilen JS sein. Wenn ein angepasstes Template dabei ist, dann solltest du sicherstellen, dass die Basis auf dem Coretemplate fußt. Angepasste Templates sind für sowas eigentlich nicht erforderlich.

    Achte auch auf eine touchfähige Bedienung. Anhand der Browserbreite kann man nicht darauf schließen, dass das Display beim Besucher ne Maus hat.

    Was ist "Sidr"?
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •