Bootstrap Navigation - DropDown

Hallo,

ich versuche gerade mit Contao 3 eine Seite auf Bootstrap Basis aufzubauen.
Für mich mit höchstens basis php kenntnissen ist das "schrauben" an den Templates nicht sehr einfach.

Bisher habe ich fast alles geschafft was ich möchte, aber bei Dropdown Navigation scheitere ich gerade.

Ich benötige folgende Struktur der Navigation (http://twitter.github.com/bootstrap/....html#navbar):

HTML-Code:

---

<ul class="nav">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      Account
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

---

Wie muss ich das Contao Navigationstemplate dafür am Besten anpassen?

Mod Navigation:

PHP-Code:

---

<!-- indexer::stop -->
<div class="navbar transparent">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse" >
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </a>

        <div class="nav-collapse collapse">
          <a href="<?php echo $this->request; ?>#<?php echo $this->skipId; ?>" class="invisible"><?php echo $this->skipNavigation; ?></a>
           <?php echo $this->items; ?>  
          <a id="<?php echo $this->skipId; ?>" class="invisible">[nbsp]</a>
        </div>
    </div>
  </div>
</div>
<!-- indexer::continue -->

---

Nav Default:

PHP-Code:

---

<ul class="nav transparent <?php echo $this->level; ?>">
<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
<li class="active"><a href="<?php echo $item['href']; ?>"><?php echo $item['link']; ?></a></li>
<?php else: ?>
<li <?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><a href="<?php echo $item['href']; ?>" 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>

---

vielen Dank, falls sich jemand erbarmt mir zu helfen, ich benötige für das einfach ewig :(
gruß
Drapper

Hallo,

also theoretisch brauchst du gar nix umbauen, da die Navi von Contao genau so aufgebaut ist, nur die Klassen sind ein bissl anders!


fg
nicky

... von meinem iPhone mit Tapatalk gesendet!

ja, aber wie bekomme ich die Klassen rein?

Hallo,

du brauchst die Klassen nicht im Template zu ändern, ändere einfach die Klassen im CSS. :-)


fg
nicky

... von meinem iPhone mit Tapatalk gesendet!

hm, aber die Bootstrap css ist schon ganz schön komplex aufgebaut, wenn ich da die Klassen ändere funktioniert das irgendwie trotzdem nicht.

das Bootstrap-CSS würde ich nicht unbedingt anfassen - schon wenn man über den Theme-Generator eine neue CSS-Variante einläd...

mögliches Vorgehen:

* bau Dir deine komplette Navigation "zu Fuß" mit Bootstrap auf (kleine statische HTML-Seite [lokal])
* sieh Dir den Aufbau an und wann welche Elemente welche CSS-Klassen haben [FireBug]
* sieh Dir das Original-Nav-Template an
* übernimm aus dem org. Template alle Daten, die Du benötigst und setze diese in Deine BS-Navi ein

=> fertig ist das neue Template...

Ich habe das selbe Problem mit der Bootstrap Navigation wie schon erwähnt. Ich habe es so gelöst, dass ich die templates mod_navigation und nav_default so angepasst habe, dass die html struktur (bzw. eigentlich nur die Namen der Klassen und ein paar kleinigkeiten wie z.B. das caret) an das von Bootstrap vorgesehene angepasst wird. Natürlich ist das keine saubere Lösung, und es Funktioniert auch nur mit einem maximalen Navigationslevel von 2 (da ich nicht mehr benötige, habe ich mich nicht länger damit befasst die Templates für 3 oder mehr Levels zu bearbeiten). Meine Templates sehen wie folgt aus:

mod_navigation.html5

PHP-Code:

---

<!-- indexer::stop -->
<nav class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>

<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>

<a href="<?php echo $this->request; ?>#<?php echo $this->skipId; ?>" class="invisible"><?php echo $this->skipNavigation; ?></a>

  <div class="navbar-inner">
      <a class="brand" href="#">--Title--</a>
      <?php echo $this->items; ?>
  </div>

<a id="<?php echo $this->skipId; ?>" class="invisible">[nbsp]</a>

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

---

nav_default.html5

PHP-Code:

---

<ul class="<?php echo $this->level; if($this->level == level_1) echo ' nav'; else if($this->level == level_2) echo ' dropdown-menu'; ?>">
<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
  <li class="<?php echo $item['class']; if(strpos($item['class'], 'submenu') !== false) echo ' dropdown'; ?>">
    <?php if(strpos($item['class'], 'submenu') !== false): ?>
        <a class="dropdown-toggle <?php echo $item['class']; ?>" data-toggle="dropdown">
          <?php echo $item['link']; ?>
          <b class="caret"></b>
    <?php else: ?>
        <a class="<?php echo $item['class']; ?>">
          <?php echo $item['link']; ?>
        </a>
    <?php endif; ?>
          
    </a>
    <?php echo $item['subitems']; ?>
  </li>
<?php else: ?>
<li<?php if ($item['class']): ?> 
  class="<?php echo $item['class']; 
    if(strpos($item['class'], 'submenu') !== false) echo ' dropdown'; ?>"
  <?php endif; ?>>
  
  <a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> 
    class="<?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'] != ''): ?>
    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']; ?>
    <?php if(strpos($item['class'], 'submenu') !== false): ?>
  <b class="caret"></b>
    <?php endif; ?>
  </a><?php echo $item['subitems']; ?>
  </li>
<?php endif; ?>
<?php endforeach; ?>
</ul>

---

Vielleicht hilft das ja jemandem weiter. Trotzdem würde mich interessieren ob es mittlerweile eine gute Möglichkeit gibt, Bootstrap bzw. die Bootstrap Navigation in Contao 3 zu integrieren.

@bpoiss Das funktioniert ja schon ganz gut.
Um die nav_default für level_3 tauglich zu machen, müsste man doch die erste else-Abfrage verschachteln, also falls level > level_1 nochmals eine if-Abfrage einbauen. Bin in php leider nicht so bewandert - weiß hier jemand weiter?

Ich bin inzwischen auf GitHub auf ein Projekt gestoßen, dass sich auch mit der Integration von Bootstrap in Contao befasst. Hier gibt es u.a. auch ein nav_default Template: https://github.com/Tastaturberuf/Con...p_navbar.html5

Allerdings endet auch hier nach Level_2 die Dropdown-Navigation. Das mag zwar grundsätzlich genügen, aber da Bootstrap mit der <li> Klasse "dropdown-submenu" eine Klasse für Level_3 mitbringt, würde ich diese auch gerne einbinden. Ich weiß nur leider ums Verrecken nicht, wie ich das anstelle...

Theoretisch müsstest du das lösen können:

Code:

---

<li class="<?php if($this->level == 'level_2' && &item['subitems']): ?>nav-submenu</?php endif; ?>"

---

Ich habe es allerdings weder getestet, noch kenne ich mich mit Bootstrap aus. Leider ist das auch keine "schöne" Lösung.

Unter Umständen funktioniert das ganze auch mit größer gleich ">=", werde das morgen mal testen.