Verwendung: Obersten Menüpunkt nicht verlinken / Mobil Menü

D.T. Mayáns's Avatar

D.T. Mayáns

11 Jan, 2021 03:36 PM

Produkt: Tao Contao
Contao-Version: 4.9
Browser und Browserversionen: aktuelle Browser / browserunabhängig / aktueller Firefox

Hallo und guten Tag,

in dieser Diskussion:

Obersten Menüpunkt nicht verlinken

geben Sie diesen Tipp:

<ul>
    <?php foreach ($this->items as $item): ?>
        <?php if ($item['isActive']): ?>
            <li class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>">
                <a <?php if ($this->level !== 'level_1' || empty($item['subitems'])): ?> href="<?php echo $item['href']; ?>"<?php endif ?> title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a>
                <?php echo $item['subitems']; ?>
            </li>
        <?php else: ?>
            <li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>>
                <a <?php if ($this->level !== 'level_1' || empty($item['subitems'])): ?> href="<?php echo $item['href']; ?>"<?php endif ?> title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a>
                <?php echo $item['subitems']; ?>
            </li>
        <?php endif; ?>
    <?php endforeach; ?>
</ul>

der ganz hervorragend im Hauptmenü funktioniert und dafür sorgt, dass der entsprechende Menüpunkt nicht verlinkt wird. Zwei Fragen dazu:

  1. Ist der Tipp (aus 2015) noch aktuell?

  2. Scheint nicht zu klappen im Mobil-Menü. Muss ich dafür noch irgendetwas anderes tun?

Vielen Dank für Ihre Hilfe!

  1. 1 Posted by D.T. Mayáns on 11 Jan, 2021 03:57 PM

    D.T. Mayáns's Avatar

    Oh, sorry ... die Mobil-Frage hat sich von selbst erledigt durch Auswahl des richtigen Templates bei den Einstellungen.

    Der Menüpunkt ist nicht mehr verlinkt in Mobil. Das Untermeü kann geöffnet werden durch Klick auf den Pfeil am Ende. Das führt zu folgender Frage:

    Ist es möglich, dass das Untermenü sich auch öffnet durch Klick auf das ganze Feld?

  2. 2 Posted by D.T. Mayáns on 11 Jan, 2021 04:01 PM

    D.T. Mayáns's Avatar

    So sieht es jetzt aus. Schön wäre es, wenn das Untermenü auch durch Klick oder gar Hover auf "mehr" öffnen würde.

  3. Support Staff 3 Posted by RockSolid Theme... on 12 Jan, 2021 09:23 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Mit folgendem CSS-Code können Sie den Click-Bereich des Pfeil-Buttons über den Text des Menüpunkts ragen lassen wodurch der Text selbst zur Klick-Fläche zum auf- und zuklappen wird:

    .main-navigation-mobile a:not([href]) + .main-navigation-mobile-expand,
    .main-navigation-mobile strong + .main-navigation-mobile-expand,
    .main-navigation-mobile span + .main-navigation-mobile-expand {
        overflow: visible;
    }
    a:not(href) + .main-navigation-mobile-expand:before,
    strong + .main-navigation-mobile-expand:before,
    span + .main-navigation-mobile-expand:before {
        content: "";
        position: absolute;
        top: 0;
        left: -100vw;
        height: 100%;
        width: 100vw;
    }
    
  4. 4 Posted by D.T. Mayáns on 12 Jan, 2021 12:13 PM

    D.T. Mayáns's Avatar

    Das hat super geklappt. Traumhaft, vielen Dank!

    Bleibt nur noch eine Frage:

    Sie hatten mir vor wenigen Wochen den folgenden Tipp gegeben, um einen kleinen Pfeil neben einen Menüpunkt mit Untermenü zu setzen:

    Markierung für Menüpunkt mit Unterpunkten

    .level_1 > .submenu > .submenu::after {
        content: "\e90d";
        position: static;
        border: 0;
    }
    

    Das funktioniert nicht mehr, seitdem der Menüpunkt kein Link mehr ist (Tipp aus erstem Beitrag auf dieser Seite). Haben Sie dafür auch eine Lösung?

  5. Support Staff 5 Posted by RockSolid Theme... on 13 Jan, 2021 09:51 AM

    RockSolid Themes's Avatar

    Diese Anpassung sollte durch die Änderung am Navigations-Template nicht gestört werden.

    Haben Sie die Anpassung am Navigations-Template nav_rsmm.html5 wie im oben verlinkten Beitrag durchgeführt und auch nur den Bereich href="<?php echo $item['href']; ?>" verändert?
    Der Rest des Templates muss unverändert bestehen bleiben um alle sonstigen Funktionen beizubehalten.

  6. 6 Posted by D.T. Mayáns on 13 Jan, 2021 11:53 AM

    D.T. Mayáns's Avatar

    Aha, mein Fehler, ein Missverständnis. Hatte das gesamte Template übernommen.

    Bin jetzt etwas feinfühliger vorgegangen. Und funktioniert tadellos.

    Nochmals vielen Dank für Ihre Mühe. Dieser Vorgang ist vorläufig abgeschlossen.

    Toller Service!

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac