nav_default an Bootstrap 4 anpassen??

Ich versuche gerade die nav_default.html von CTO4 an die Bootstrap 4 Navigationstruktur anzupassen und scheitere leider als Nicht-Programmierer :o

nav_default.html sieht so aus z.Z.

PHP-Code:

---

<ul class="<? $this->level; if($this->level == level_1) echo ' navbar-nav'; else echo 'dropdown-menu'; ?>">  
<?php foreach ($this->items as $item): ?>  
<?php if ($item['isActive']): ?>  
  <li class="nav-item <? $item['class']; if(strpos($item['class'], 'submenu') !== false) echo ' dropdown'; ?>">  
    <?php if(strpos($item['class'], 'submenu') !== false): ?>  
        <a class="nav-link dropdown-toggle <? $item['class'] ?>" data-toggle="dropdown" <?php if (!empty($item['subitems'])) echo ' aria-haspopup="true" aria-expanded="false"'; ?> itemprop="name"> 
          <? $item['link'] ?>  
      <?php else: ?>  
        <a class="nav-link <?php echo $item['class']; ?>">  
         <?= $item['link'] ?>  
        </a>  
    <?php endif; ?>             
    </a>  
    <?php $item['subitems'] ?>  
  </li>  
<?php else: ?> 
 
<li<?php if ($item['class']): ?> class="nav-item <?php echo $item['class']; if(strpos($item['class'], 'submenu') !== false) echo ' dropdown'; ?>"<?php endif; ?>>  
    
  <a href="<?= $item['href'] ?: './' ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> 
    class="nav-link <?php echo $item['class']; if(strpos($item['class'], 'submenu') !== false) echo ' dropdown-toggle'; ?>"
                     
    <?php if(strpos($item['class'], 'submenu') !== false) echo 'data-toggle="dropdown"'; ?>
          
    <?php endif; ?>    

<?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" aria-expanded="false"'; ?> itemprop="url"><?= $item['link'] ?></a>    
    <?= $item['subitems'] ?>
     </li>  
<?php endif; ?>  
<?php endforeach; ?>  
</ul>

---

Die mod_navigation.html5 so:

PHP-Code:

---

<!-- indexer::stop -->
<nav class="navbar navbar-expand-md navbar-light bg-light <?= $this->class ?>"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?> itemscope itemtype="http://schema.org/SiteNavigationElement">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>



  <a href="<?= $this->request ?>#<?= $this->skipId ?>" class="invisible"><?= $this->skipNavigation ?></a>
<div class="collapse navbar-collapse" id="navbar">
  <?= $this->items ?>
 </div>
  <a id="<?= $this->skipId ?>" class="invisible">&nbsp;</a>

</nav>
<!-- indexer::continue -->

---

das Dropdown-Menü ist in BS4 in einem div anstatt einem ul, das würde ich nicht übernehmen wollen, wobei das wohl unerheblich ist aber die a tags sollen die Klasse "dropdown-item" haben.

Außerdem fehlen die Klassen bei den Listenpunkten wenn ein Unterpunkt aktiv ist. Das bekomme ich leider nicht hin, wobei die "Bastelei" schon nah dran ist - scheinbar ;-)

Hat das jemand schon gemacht mit Bootstrap 4 und zeigt wie es gehen könnte?

LG
Bennie

Hey Ho!

Ist dein Problem noch aktuell?

Ich habe gestern das gleiche Thema gehabt und nav_default für Bootstrap 4 angepasst.

Tückisch ist, dass Contao die Navigation mit Rekursivität baut. Das heißt, die tieferen Levels rufen in sich selbst wieder nav_default aus. Und das passt leider so gar nicht zur Art und Weite wie Bootstrap das will.

Daher geht folgender Code nur mit maximal 1 Untereben in der Navigation. Dieses kannst du erreichen indem du im Navi-Modul das Hart-Limit auf 1 setzen.

PHP-Code:

---

<?php if ($this->level == 'level_1'):  ?>
<ul class="navbar-nav mr-auto">
    <?php foreach ($this->items as $item): ?>

    <?php if (empty($item['subitems'])):?>

    <li class="nav-item <?= $item['class'] ?>  <?php if ($item['isActive']): ?> active <?php endif; ?>">
        <a
                class="nav-link <?php if ($item['class']) echo $item['class']; ?>"
                href="<?= $item['href'] ?: './' ?>"
                title="<?= $item['pageTitle'] ?: $item['title'] ?>">
            <?= $item['pageTitle'] ?: $item['title'] ?></a>
    </li>
    <?php else: ?>
    <li class="nav-item dropdown <?= $item['class'] ?>  <?php if ($item['isActive']): ?> active <?php endif; ?>">
        <a
                class="nav-link dropdown-toggle <?php if ($item['class']) echo $item['class']; ?>"
                href="<?= $item['href'] ?: './' ?>"
                title="<?= $item['pageTitle'] ?: $item['title'] ?>"
                id="navbarDropdown"
                role="button"
                data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
            <?= $item['pageTitle'] ?: $item['title'] ?></a>


        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <?= $item['subitems'] ?>
        </div>


    </li>
    <?php endif; ?>
    <?php endforeach; ?>
</ul>

<?php elseif($this->level == 'level_2'): ?>
<?php foreach ($this->items as $item): ?>
<a class="dropdown-item <?php if ($item['class']) echo $item['class']; ?> <?php if ($item['isActive']): ?> active <?php endif; ?>"
   href="<?= $item['href'] ?: './' ?>">
    <?= $item['pageTitle'] ?: $item['title'] ?>
</a>
<?php endforeach; ?>
<?php endif; ?>

---

Viel Erfolg

Danke für Deine Antwort.

So hatte ich das dann auch doch noch hinbekommen - läuft jedenfalls einwandfrei!