Individuelle Navigation

Für ein Projekt brauchte es eine sehr individuelle Navigation, die mit den Standard-Navigationen nicht umsetzbar war >> Rocksolid Custom Elements musste her.
Sie ermöglicht eigene "level_1" mit Bezeichnung und Verlinkung und eigene Untermenüs/Dropdown mit Bezeichnung und Verlinkung für "level_2". Verlinkungen sind keine Pflichtfelder und werden bei Nichtbefüllen mit # befüllt.

Umgesetzt wird das Projekt mit Framework bulma, sodass das template und die Klassen darin bulma-like gestaltet ist.

rsce_nav_config.php

PHP-Code:

---

<?php

return array(
    'label' => [
        'de' => ['Navigation extended','Erstellt eine Navigaton mit Dropdown']
    ],
    'types' => ['module'],
    'standardFields' => ['cssID'],
    'fields' => [
        'links' => [
            'label' => [
                'de' => ['Menüpunkte',''],
            ],
            'elementLabel' => '%s. Menüpunkt',
            'minItems' => 1,
            'inputType' => 'list',
            'fields' => [
                'target' => [
                    'label' => [
                        'de' => ['Menüpunktbezeichnung',''],
                    ],
                    'inputType' => 'text',
                    'eval' => [
                        'tl_class' => 'w50 clr',
                    ],
                ],
                'url' => [
                    'label' => [
                        'de' => ['Link-URL','zum Beispiel #service, {{link_url::alias}}, https://mydomain.at'],
                    ],
                    'inputType' => 'url',
                    'eval' => [
                        'tl_class' => 'w50',
                    ],
                ],
                'dropdowns' => [
                    'label' => [
                        'de' => ['Untermenüpunkt(e)',''],
                    ],
                    'elementLabel' => '%s. Untermenüpunkt',
                    'inputType' => 'list',
                    'fields' => [
                        'targetdown' => [
                            'label' => [
                                'de' => ['Menüpunktbezeichnung',''],
                            ],
                            'inputType' => 'text',
                            'eval' => [
                                'tl_class' => 'w50 clr',
                            ],
                        ],
                        'urldown' => [
                            'label' => [
                                'de' => ['Link-URL','zum Beispiel #service, {{link_url::alias}}, https://mydomain.at'],
                            ],
                            'inputType' => 'url',
                            'eval' => [
                                'tl_class' => 'w50',
                            ],
                        ],
                    ],
                ],
            ],
        ],
    ],
);

---

rsce_nav.html5

PHP-Code:

---


<nav id="navMenu" class="navbar">
  <div id="navbarCigar" class="navbar-menu">
    <div class="navbar-start">
      <?php foreach ($this->links as $link): ?>
        <?php if ($link->dropdowns): ?>
          <div class="navbar-item has-dropdown is-hoverable">
            <a class="navbar-link" href="<?php if ($link->url): echo $link->url; else: echo '#'; endif; ?>"><?php if ($link->target): echo $link->target; endif; ?></a>
            <div class="navbar-dropdown is-boxed">
              <?php foreach ($link->dropdowns as $dropdown): ?>
                <a class="navbar-item" href="<?php echo $dropdown->urldown ?>">
                  <?php echo $dropdown->targetdown ?>
                </a>
            <?php endforeach ?>
            </div>
          </div>
        <?php else: ?>
          <a class="navbar-item" href="<?php if ($link->url): echo $link->url; else: echo '#'; endif; ?>"><?php if ($link->target): echo $link->target; endif; ?></a>
        <?php endif ?>
      <?php endforeach ?>
    </div>
  </div>
</nav>

---

Beisiel Backend
https://community.contao.org/de/atta...1&d=1601664500


Beispiel Frontend
https://community.contao.org/de/atta...2&d=1601664522

Anhang 23911
Anhang 23912