Hallo,
wie schon bereits im Forum "Kunden helfen Kunden" im Thema "MegaMenu" angesprochen, möchte ich ein gleiches für die Woltlab Suite verwirklichen. Da dieses jedoch im alten Beitrag mehr und mehr vom eigentlichen Thema zur Designerstellung abweicht, erstelle ich hiermit an dieser Stelle ein neues Thema.
Zur Verwendung eines MegaMenüs griff ich auf das RubyMegaMenu (Siehe Quellcode bei Codepen.io) zurück, welches bisher auch in das Woltlab eigene Menü mit intrigiert werden konnte.
Wie auf dem Screenshot #1 zu erkennen ist, würde ich nun gerne die Funktion der Notification Badges bei neuen Einträgen hinter der Überschriften einfügen. Der auf dem ersten Screenshot hinter Forum zu sehende Badge ist lediglich manuell per CSS eingefügt worden um dieses hier zu demonstrieren, was gemeint ist (sprich: Ohne Funktion!). Das eine solche Umsetzung möglich ist, stet außer Frage, denn dazu hatte LRDE bereits erfolgreich experimentiert. Dieses habe ich Versuchsweise ins MegaMenu Template mit aufgenommen, welches nun so aussieht:
{hascontent}
{content}
<li class="active-menu-item">
<div class="grid grid-lined">
<div class="row">
<div class="col-3">
<h3 class="list-heading"></h3>
<ul>
<li><img src="https://cdn.pixabay.com/photo/2014/07/08/10/47/team-386673__340.jpg" style="width: 160px; height: 160px;"></li>
</ul>
</div>
{foreach
from=$__wcf->getBoxHandler()->getBoxByIdentifier('com.woltlab.wcf.MainMenu')->getMenu()->getMenuItemNodeList()
item=menuItemNode}
{if $menuItemNode->getOutstandingItems() > 0}
{if $menuItemNode->identifier === 'com.woltlab.wbb.BoardList'}
<div class="col-3">
<h3 class="list-heading">
<i class="fa fa-comments" aria-hidden="true"></i>
<a href="{link controller='UnreadThreadList' application='wbb'}{/link}">Forum</a>
<a href="{link controller='UnreadThreadList' application='wbb'}{/link}">
<span class="boxMenuLinkOutstandingItems badge badgeUpdate">
{#$menuItemNode->getOutstandingItems()}
</span>
</a>
</h3>
<ul>
<li><a href="#">Übersicht</a></li>
<li><a href="#">Ungelesene Beiträge</a></li>
<li><a href="#">Unenerledigte Themen</a></li>
<li><a href="#">Abbonierte Foren</a></li>
<li><a href="#">Abbonierte Themen</a></li>
<li><a href="#">Meine Themen</a></li>
</ul>
</div>
{elseif $menuItemNode->identifier === 'com.woltlab.blog.BlogList'}
<div class="col-3">
<h3 class="list-heading">
<i class="fa fa-pencil" aria-hidden="true"></i>
<a href="{link controller='UnreadEntryList' application='blog'}{/link}">Blog</a>
<a href="{link controller='UnreadEntryList' application='blog'}{/link}">
<span class="boxMenuLinkOutstandingItems badge badgeUpdate">
{#$menuItemNode->getOutstandingItems()}
</span>
</a>
</h3>
<ul>
<li><a href="#">Übersicht</a></li>
<li><a href="#">Ungelesene Artikel</a></li>
<li><a href="#">Abonnierte Artikel</a></li>
<li><a href="#">Mein Blog</a></li>
<li><a href="#">Meine Artikel</a></li>
</ul>
</div>
{elseif $menuItemNode->identifier === 'com.woltlab.gallery.Gallery'}
<div class="col-3">
<h3 class="list-heading">
<i class="fa fa-picture-o" aria-hidden="true"></i>
<a href="{link controller='UnreadImageList' application='gallery'}{/link}">Galerie</a>
<a href="{link controller='UnreadImageList' application='gallery'}{/link}">
<span class="boxMenuLinkOutstandingItems badge badgeUpdate">
{#$menuItemNode->getOutstandingItems()}
</span>
</a>
</h3>
<ul>
<li><a href="#">Übersicht</a></li>
<li><a href="#">Neue Bilder</a></li>
<li><a href="#">Meine Alben</a></li>
<li><a href="#">Meine Bilder</a></li>
<li><a href="#">Meine Videos</a></li>
</ul>
</div>
{elseif $menuItemNode->identifier === 'com.woltlab.filebase.FileList'}
<div class="col-3">
<h3 class="list-heading">
<i class="fa fa-download" aria-hidden="true"></i>
<a href="{link controller='UnreadFileList' application='filebase'}{/link}">Downloads</a>
<a href="{link controller='UnreadFileList' application='filebase'}{/link}">
<span class="boxMenuLinkOutstandingItems badge badgeUpdate">
{#$menuItemNode->getOutstandingItems()}
</span>
</a>
</h3>
<ul>
<li><a href="#">Übersicht</a></li>
<li><a href="#">Neue Downloads</a></li>
<li><a href="#">Abonnierte Dateien</a></li>
<li><a href="#">Meine Dateien</a></li>
</ul>
</div>
<div class="col-3">
<h3 class="list-heading">
<i class="fa fa-shopping-bag" aria-hidden="true"></i> Marktplatz
</h3>
<ul>
<li><a href="#">Übersicht</a></li>
<li><a href="#">Neusten Einträge</a></li>
<li><a href="#">Abonnierte Einträge</a></li>
<li><a href="#">Meine Einträge</a></li>
<li><a href="#">Neuer Eintrag</a></li>
</ul>
</div>
{elseif $menuItemNode->identifier === 'com.woltlab.calendar.Calendar'}
<div class="col-3">
<h3 class="list-heading">
<i class="fa fa-calendar" aria-hidden="true"></i>
<a href="{link controller='UnreadEventList' application='calendar'}{/link}">Kalender</a>
<a href="{link controller='UnreadEventList' application='calendar'}{/link}">
<span class="boxMenuLinkOutstandingItems badge badgeUpdate">
{#$menuItemNode->getOutstandingItems()}
</span>
</a>
</h3>
<ul>
<li><a href="#">Übersicht</a></li>
<li><a href="#">Neue Termine</a></li>
<li><a href="#">Teilnahmen</a></li>
</ul>
</div>
<div class="col-3">
<h3 class="list-heading">
<i class="fa fa-users" aria-hidden="true"></i> Mitglieder
</h3>
<ul>
<li><a href="#">Übersicht</a></li>
<li><a href="#">Neusten Mitglieder</a></li>
<li><a href="#">Aktivsten Mitglieder</a></li>
<li><a href="#">Mitgliedersuche</a></li>
</ul>
</div>
</div>
{/if}
{/if}
{/foreach}
{/content}
{/hascontent}
<span class="dropdown-toggle"></span></li>
</ul>
</div>
</div>
<span class="dropdown-toggle"></span>
</li>
Display More
Jedoch bringt mir dieses nicht den gewünschten Erfolg, sondern zeigt schlicht weg rein gar nichts mehr innerhalb des aufklappenden MegaMenüs an. Somit die Frage woran das liegt und wie diesen Abhilfe geschaffen werden kann. Ich würde mich über jegliche Hilfe freuen - Danke dafür vorab!
Gruss,
Andreas