Artikel in Dropdown Navigation

**b-coach** · 31.10.2016, 10:50

Hallo zusammen!

Mein Vohaben: Die Navigation ist horizontal in Header angebracht. Bei einem Mouseover sollen in einem Dropdown unterhalb des Menüpunktes die Artikel der jeweiligen Seite angezeigt werden.
Fortschritt: Die Seitennavigation passt. Sie ist horizontal und macht das, was sie machen soll.
Problem: Derzeit werden die Artikel nur Angezeigt, wenn ich die Seite bereits geöffnet habe. Es werden auch nur die Artikel angezeigt, welche auf der jeweiligen Seite zu finden sind.

Die Navigation ist wie erwähnt im Header. Es gibt eine Navigation [Navigationsmenü] und eine [Artikelliste].

Könnt ihr mir helfen, wie ich mein Vohaben realisieren kann? Stehe komplett auf dem Schlauch.

Vielen Dank im Voraus und beste Grüße
b-coach

**dazzle89** · 31.10.2016, 10:58

Meinst du mit Artikel die Unterseiten?

Hast du einen Link oder den Code?

Und hast du mit CSS hover gearbeitet? Das wäre nämlich dein Stichwort.

**b-coach** · 31.10.2016, 11:28

Zitat von dazzle89

Meinst du mit Artikel die Unterseiten?

Hast du einen Link oder den Code?

Und hast du mit CSS hover gearbeitet? Das wäre nämlich dein Stichwort.

Danke für die schnelle Antwort!

Es sind Artikel, keine Unterseiten

Mit hover habe ich noch gar nicht gearbeitet. Bevor ich die mit einem hover anzeigen lasse, wollte ich erstmal die Artikel anzeigen lassen um zu sehen, ob alles passt.

HTML-Code:

<div class="header">
	<a id="logo" href="#" title="Zur Startseite"></a>
</div>

<nav class="mod_navigation nav_oben  block">
      <ul class="level_1" role="menubar">
            <li class="sibling first"><a href="index.php/Kontakt.html" title="Kontakt" class="sibling first" role="menuitem">Kontakt</a></li>
                <li class="active"><span class="active" role="menuitem">Seite_1</span></li>
                <li class="sibling"><a href="index.php/Seite_2.html" title="Seite_2" class="sibling" role="menuitem">Seite_2</a></li>
                <li class="sibling last"><a href="index.php/Seite_3.html" title="Seite_3" class="sibling last" role="menuitem">Seite_3</a></li>
      </ul>
</nav>

<div class="mod_articleList navigation  block">

  
  
  <ul>
          <li><a href="index.php/seite_1.html#artikel_1" title="Artikel_1">Artikel_1</a></li>
          <li><a href="index.php/seite_1.html#artikel_2" title="Artikel_2">Artikel_2</a></li>
          <li><a href="index.php/seite_1.html#artikel_3" title="Artikel_3">Artikel_3</a></li>
          <li><a href="index.php/seite_1.html#artikel_4" title="Artikel_4">Artikel_4</a></li>
          <li><a href="index.php/seite_1.html#artikel_5" title="Artikel_5">Artikel_5</a></li>
          <li><a href="index.php/seite_1.html#artikel_6" title="Artikel_6">Artikel_6</a></li>
          <li><a href="index.php/seite_1.html#artikel_7" title="Artikel_7">Artikel_7</a></li>
      </ul>


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

Die Homepage ist so aufgebaut, dass die Seiten keine Unterseiten haben, sondern nur aus einer Seite mit X Artikel bestehen.

Beste Grüße
b-coach

**dazzle89** · 31.10.2016, 11:42

Okay, hover würde bei diesem HTML-Aufbau auch gar nicht funktionieren. Sollen die Artikel Unterpunkte von Seite 1 (oder 2, 3 )sein? Wenn ja, wäre es optimal, wenn sich die Artikelliste auch innerhalb vom <li> des Menüpunkts befindet. Dann könnte man nämlich mit hover arbeiten.

Wenn es sich aber nicht wie beschrieben umbauen lässt sehe ich nur Lösungen mit Javascript.

**b-coach** · 31.10.2016, 11:48

Zitat von dazzle89

Okay, hover würde bei diesem HTML-Aufbau auch gar nicht funktionieren. Sollen die Artikel Unterpunkte von Seite 1 (oder 2, 3 )sein? Wenn ja, wäre es optimal, wenn sich die Artikelliste auch innerhalb vom <li> des Menüpunkts befindet. Dann könnte man nämlich mit hover arbeiten.

Wenn es sich aber nicht wie beschrieben umbauen lässt sehe ich nur Lösungen mit Javascript.

Wenn du mir sagst, wie ich das hinbekomme, dass die sich auch innerhalb des <li> des Menüpunkts befinden, dann her damit

Daran verzweifel ich wirklich. Hover sollte dann kein Problem sein

Vielleicht habe ich mich ungünstig ausgedrückt: Kann mir jemand sagen, wie ich eine Navigation hinbekomme, bei der ich eine Seitennavigation habe, bei der die Unternavigation aus den Seitenartikel besteht? Beispiel: hier

Danke

**dazzle89** · 31.10.2016, 11:56

Eine JS-Lösung wäre allerdings nicht so optimal, wenn mehrere Menüpunkte ein Dropdown bekommen sollen. Wegen der Positionierung.

Bin selbst kein Profi und öfters mal vom Best Practise entfernt

aber kannst du das Artikelmodul nicht per Inserttag im Navigationstemplate einfügen? Mit einer entsprechenden PHP-Abfrage, damit das Modul nicht bei jedem <li> auftaucht und an richtiger Stelle.

**b-coach** · 31.10.2016, 11:57

Zitat von dazzle89

...
aber kannst du das Artikelmodul nicht per Inserttag im Navigationstemplate einfügen? Mit einer entsprechenden PHP-Abfrage, damit das Modul nicht bei jedem <li> auftaucht und an richtiger Stelle.

Weiß nicht, ob das geht. Ich kann es aus dem Stehgreif nicht

**manoelo** · 31.10.2016, 12:05

https://contao.org/de/erweiterungsli...000009.de.html
vielleicht so

**dazzle89** · 31.10.2016, 12:08

Also ich persönlich würde die nav_default als Vorlage nehmen. Am besten aber umbenennen, damit sich die Änderungen nicht auf sämtliche Navigationen auf der Homepage auswirken und dann deinem Navigationsmodul dieses Template zuweisen.

Hier mal ein Beispiel von mir:

Code:

<ul class="<?= $this->level ?>">
  <?php foreach ($this->items as $item): ?>
    <?php if ($item['isActive']): ?>
      <li class="<?= $item['class'] ?>"><span class="<?= $item['class'] ?>"<?php if (!empty($item['subitems'])) echo ' aria-haspopup="true"'; ?>><?= $item['link'] ?></span><?= $item['subitems'] ?></li>
    <?php else: ?>
      <li<?php if ($item['class']) echo ' class="' . $item['class'] . '"'; ?>><a href="<?= $item['href'] ?: './' ?>" title="<?= $item['pageTitle'] ?: $item['title'] ?>"<?php if ($item['class']) echo ' class="' . $item['class'] . '"'; ?><?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"'; ?>><?= $item['link'] ?></a><?= $item['subitems'] ?></li>
    <?php endif; ?>
  <?php endforeach; ?>
  <?php if($this->level=="level_1") { ?>
  <li class="login-button">
  	Login
  	<div class="login-form">
  		{{insert_module::9}}
  	</div>
  </li>
  <?php } ?>
</ul>

Fast am Ende siehst du, wie ich ein Modul includiere. Statt der 9 setzt du die ID von deinem Artikelmodul und setzt den gesamten Inserttag innerhalb vom <li> ein. Da es eine Schleife ist, hättest du für jeden Menüpunkt nun dieses Dropdown. Um das zu verhindern kannst du mit einer PHP-Abfrage arbeiten. Ich weiß grad nicht welche Parameter jede Seite liefert, vielleicht kannst du die ID der Seite oder die CSS-Klasse abfragen.

**derRenner** · 31.10.2016, 12:12

Hallo,

[OnePageWebsite] ... ist dein Schlagwort - zumindest zeigt dein Beispiellink auf eine solchige :-)
Die verlinkte Erweiterung sollte dir da weiterhelfen bzw. kannst du dich mit entsprechenden Suchbegriffen hier im Forum mal reinlesen

**b-coach** · 31.10.2016, 12:12

Zitat von manoelo

https://contao.org/de/erweiterungsli...000009.de.html
vielleicht so

Zitat von dazzle89

Also ich persönlich würde die nav_default als Vorlage nehmen. Am besten aber umbenennen, damit sich die Änderungen nicht auf sämtliche Navigationen auf der Homepage auswirken und dann deinem Navigationsmodul dieses Template zuweisen.

Hier mal ein Beispiel von mir:

Code:

<ul class="<?= $this->level ?>">
  <?php foreach ($this->items as $item): ?>
    <?php if ($item['isActive']): ?>
      <li class="<?= $item['class'] ?>"><span class="<?= $item['class'] ?>"<?php if (!empty($item['subitems'])) echo ' aria-haspopup="true"'; ?>><?= $item['link'] ?></span><?= $item['subitems'] ?></li>
    <?php else: ?>
      <li<?php if ($item['class']) echo ' class="' . $item['class'] . '"'; ?>><a href="<?= $item['href'] ?: './' ?>" title="<?= $item['pageTitle'] ?: $item['title'] ?>"<?php if ($item['class']) echo ' class="' . $item['class'] . '"'; ?><?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"'; ?>><?= $item['link'] ?></a><?= $item['subitems'] ?></li>
    <?php endif; ?>
  <?php endforeach; ?>
  <?php if($this->level=="level_1") { ?>
  <li class="login-button">
  	Login
  	<div class="login-form">
  		{{insert_module::9}}
  	</div>
  </li>
  <?php } ?>
</ul>

Fast am Ende siehst du, wie ich ein Modul includiere. Statt der 9 setzt du die ID von deinem Artikelmodul und setzt den gesamten Inserttag innerhalb vom <li> ein. Da es eine Schleife ist, hättest du für jeden Menüpunkt nun dieses Dropdown. Um das zu verhindern kannst du mit einer PHP-Abfrage arbeiten. Ich weiß grad nicht welche Parameter jede Seite liefert, vielleicht kannst du die ID der Seite oder die CSS-Klasse abfragen.

Vielen Dank euch!
Werde mal testen und berichten bzw. weitere Fragen stellen

Viele Grüße
b-coach