Contao-Camp 2024
Ergebnis 1 bis 3 von 3

Thema: nav_default an Bootstrap 4 anpassen??

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

    Standard 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

    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
    Geändert von Bennie (21.11.2017 um 22:22 Uhr)

  2. #2
    Contao-Nutzer Avatar von afx
    Registriert seit
    17.05.2011.
    Beiträge
    25

    Frage Noch aktuell?

    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

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

    Standard

    Danke für Deine Antwort.

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

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
  •