Hallo Woltlab Gemeinde,

ist jemanden ein so genanntes Megamenü wie z.B. das Max Mega Menu (Beispiel jedoch nur für Wordpress) als Plugin für die Woltlab Suite 3.1 bekannt oder weiß wie ein solches umzusetzen ist, ohne dabei auf die Möglichkeit verzichten zu müssen, im späteren weitere Links über das ACP komfortabel hinzufügen zu können? Natürlich wäre eine Umsetzung wie das Max Mega Menu für die Woltlab Suite nicht mal eben so auf die schnelle programmiert bzw, umgesetzt und wird sicherlich auch nicht für jedermann benötigt, so dass sich über den Sinn und Zweck der Umsetzung selbst streiten lassen würde. Ein Woltlab-Plugin bzw. eine Umsetzungsmöglichkeit wie in der Demo unter Max Mega Menu zu sehende Menüpunkt "Icons" würde mir dabei bereits schon ausreichen. Kann mir aber auch gut vorstellen, dass der ein oder andere Woltlab-Nutzer ebenfalls von einem solchen Megamemü gerne Gebrauch machen würde. Für weitere Hinweise zu einen ggfls. bestehenden Plugins (mir leider nicht bekannt) oder eine Möglichkeit der Umsetzung (auch gegen Bezahlung) oder weiteren Hinweisen dazu bin ich bereits vorab sehr dankbar!

Gruss,
Andreas

Hallo,

zuerst einmal freut es mich, dass sich abseits von mir auch andere für eine solche Art von Navigation interessieren. Aufgrund dessen das ich selbst bisher noch keine Art von Plugin oder Hinweisen dazu wie ein solches zu bewerkstelligen wäre gefunden habe, wird mir wohl oder übelst nur zwei Möglichkeiten übrig bleiben und diese wären entweder ein solches Menü selbst zu bewerkstelligen oder schlicht weg darauf verzichten, welches ich jedoch ungern tun würde.

Um ein solches zu bewerkstelligen bieten sich vorab die zwei Möglichkeiten dieses mit oder ohne Integration ins ACP zu erstellen. Ersteres wäre natürlich sehr komfortabel um spätere Einträge schnell und einfach per ACP zu editieren, ergänzen oder zu entfernen. Jedoch wage ich zu bezweifeln, dass dieses so ohne weiteres für ein jedermann mit der jetzigen Suite umzusetzen ist. Sollte dem nicht so sein, so Asche auf mein Haupt und her mit den Willkommenen Hinweisen dazu

Wie bereits im ersten Beitrag genannt, würde ich die Integration ins ACP natürlich für komfortabler und schöner finden, aber würde letztlich auch wohl oder übels darauf verzichten können, da die enthaltenen Links dauerhaft erhalten blieben und nicht stets geändert werden müssten. Dies ist zwar eher der einfache Weg der gegangen werden würde, aber wie sagt man so schön: "Nicht schön, aber selten"

Quote from Schumi15537

Vielleicht mit Boxen oder mit "Tabellen" einen eigenen CSS schreiben?

Wenn ich Dich richtig verstanden habe und im Bezug auf das erstellen einer Navigation, dass Wort Tabellen höre, bekomme ich Ausschlag.
Ob so eine Navigation in einer Box die optimale Lösung wäre, würde ich auch erst einmal dahin gestellt lassen. Ich denke eher, dass die Lösung darin liegt, dies mit Templates zu bewerkstelligen (gleichermaßen ob nun mit oder ohne Integration ins ACP). Angenommen man würde eine solche Navigation von vorne herein mit den Templates bewerkstelligen, so wäre es sicherlich im späteren einfacher, die Navigation auch ins ACP zu intrigieren oder daraus ein Plugin für jedermann zu erstellen, als wenn man das Boxen-System dazu, ich drücke es mal so aus, missbraucht.

Was der nun eigentlichen Erstellung eines solchen Menüs anbelangt, so werde ich mich, auch wenn ich zugegebenermaßen noch nicht 100%ig konform mit Woltlab selbst bin, lokal damit beschäftigen und versuchen ein solches Mega-Menü zu bewerkstelligen. Dies jedoch (zumindest vorab) ohne Integration ins ACP. Da ich jedoch Zeitlich eingeschränkt bin, würde ich mich jedoch darüber freuen, wenn sich jemand finden würde, der sich die Sache annehmen würde (gegen Bezahlung). Sollte sich dazu jemand bereit erklären, so bitte per PN - Danke!

Für weitere Hinweise, Informationen, etc. zur Bewerkstelligung eines solchen Mega-Menü's bin ebenfalls schon vorab sehr dankbar

Gruss,
Andreas

Hallo,

nach nun mehreren vergangenen Tagen auf der Dev-Seite ist es bereits, u.a. durch Mithilfe und somit auch Dank Hitman , zu Fortschritten beim MegaMenü gekommen. Vieles konnte bisher wie gewünscht erreicht werden, anderes jedoch noch nicht, so dass ich diesbezgl. hier noch einmal nachhaken möchte. Der Aktuelle Stand sieht derweil so aus:

Mega-Menü - Screenshot #1	Mega-Menü - Screenshot #2

Wie wurde es bisher umgesetzt

Um ein Mega-Menü zu verwirklichen gibt es zwei Möglichkeiten. Entweder das Mega-Menü wird in die eigentliche Navigation mit eingebunden oder aber das Mega-Menü wird in ein gesonderten Template angelegt und gewisse Funktionen der eigentlichen Navigation schließlich ins Mega-Menü intrigiert. Da letzteres eher schlecht als recht funktioniert, wurde in diesen Beispiel das Mega-Menü in die eigentliche Navigation intrigiert. Dazu wurde das originale Template __menu im eigenen Style kopiert und zudem ein neues Template mit dem MegaMenu Code angelegt, welches letztlich in das __menu Template includiert wurde. Zudem wurde, wie auf den Screenshots zu erkennen ist, dass userPanel (mit Kontrollzentrum, Suche, etc.) in eine so bezeichnete TopBar über der eigentlichen Navigation versetzt, um die eigentliche Navigation vom Seitentitel und dem userPanel zu trennen, welches vom optischen her für mehr Ordnung sorgt.

Das Mega-Menü

Da es sich wie im ersten Beitrag genannten MaxMegaMenu um eine Wordpress-Erweiterung handelt, von welcher der Code sicherlich auch (nach dem entsprechenden Erwerb) per Code-Übertragung auch in die Woltlab Suite umsetzbar wäre, habe ich mich kurzerhand für das RubyMegaMenu entschieden und dieses als Grundlage für das MegaMenu genutzt. Aufgrund dessen, dass es sich um eine Non-Free-Lizenz handelt, ist es mir somit nicht möglich den kompletten Code hier öffentlich zur Verfügung zu stellen. Entsprechend dessen bitte ich um Verständnis- Vielen Dank!

Die Darstellung und Funktionen

Da Menüeinträge des Woltlab eigenen Menüs Script-Technisch erstellt werden, wäre es ein sehr großer Aufwand ein solches MegaMenu direkt in das Woltlab eigene Menü unterzubringen, so dass das MegaMenu praktisch nur angehangen bzw. hinzugefügt wurde. Vorteil dabei ist, dass dieses sehr einfach über Templates zu verwirklichen ist und zudem auch x-beliebig erweitert werden kann. Nachteil dabei ist lediglich, dass ein solches MegaMenu natürlich nur für Desktop-Ansichten geeignet ist. Diesbezüglich wird das MegaMenu bisher auch nur bei der Desktop-Ansicht angezeigt und bei Verwendung von Tablet-PCs oder Smartphone schlicht weg ausgeblendet. An einer mobilen Darstellung, so wie es bereits Standardgemäß Seitens der Woltlab Suite ist, wird derweil noch gearbeitet (siehe Ausstehende Arbeiten weiter unten). Für die unter den Menüpunkt "Sehenswürdigkeiten" (siehe Screenshot #2) wird das Plugin "Schaufenster (von UdoZ )" und für die unter den Menüpunkt "Community" (siehe Screenshot #1) werden die Woltlab eigene Apps wie Forum, Kalender, Filebase, etc. sowie der "Marktplatz (von VieCode )" genutzt, so dass natürlich auch ein entsprechendes Badge bei z.B. neuen Beiträgen angezeigt werden sollte. Dieses funktioniert bisher jedoch nur schlecht als recht, da hierzu Codes der entsprechenden Apps fehlen, um die Badges hinter den Überschriften bzw. im Hauptmenü als Gesamtanzahl anzuzeigen. Dich dazu mehr im folgenden Absatz ...

Was (noch) nicht funktioniert

Die Funktionen des userPanels (siehe auf dem Screenshot in der "TopBar") funktionieren bis auf die Suchfunktion, welche derweil nicht auf onKlick reagiert (sprich weder direkt zur Seite der Suche verweist, noch das PopDown anzeigt). Ferner kann das z.B. Kontrollzentrum nach dem öffnen des PopDown nur mittels erneuten klick auf das Kontrollzentrum Icon geschlossen werden, jedoch nicht mit einen freien klick im nirgendwo. Wohl möglich obliegt dieses an einen zu früh geschlossenen div's oder if-Abfrage, welches noch auf dem Grund gegangen wird. Doch dazu erst einmal die bisherigen Templates zu diesen beiden Problemen im einzelnen:

• Bzgl. dem userPanel

<div id="pageContainer" class="pageContainer">
    {event name='beforePageHeader'}
    
    {include file='TopBarMenu'}
    
    {include file='pageHeader'}
    
    {event name='afterPageHeader'}

Im header.tpl wird wie zu sehen die TopBar includiert welche so aussieht:

<div class="TopBarMenu">

<ul class="menu">
  <li class="menu-mega"><a href="#">Belarusinfo</a></li>
</ul>

{include file='pageHeaderUser'}

</div>

Wie zu erkennen wird hier das Standard-Template pageHeaderUser includiert, welches lediglich in der TopBar per CSS angepasst wurde. Weiter geht es mit dem eigentlichen MegaMenü, welches so aussieht:

    <ul class="menu">
    <!-- Start: MEGA MENU -->
    <li class="menu-mega"><a href="#">Informationen</a>
            <div style="400px" class="mega-drop-down">
              <ul>
               {include file='MegaMenu-Informationen-LandReise'}

               {include file='MegaMenu-Informationen-Staedte'}

               {include file='MegaMenu-Informationen-Sehenswuerdigkeiten'}        

               {include file='MegaMenu-Informationen-Unterkuenfte'}    

               {include file='MegaMenu-Informationen-Shopping'}    

               {include file='MegaMenu-Informationen-Medien'}

               {include file='MegaMenu-Informationen-Rezepte'}                        
              </ul>
            </div>
          <span class="dropdown-toggle"></span>
    </li>

    <li class="menu-mega"><a href="#">Community</a>
      <div style="height: 263px;" class="mega-drop-down">
        <ul>
             {include file='MegaMenu-Community'}
        </ul>

Die hierbei wiederum includierten einzelnen Menüpunkte kann/darf ich hier leider nicht veröffentlichen, da sich darin Non-Free Code des RubyMegaMenüs befindet (allerdings dies auch nicht zwingend zur Fehlerbehebung notwendig ist). Scheinbar fehlt es hier nur an einen ungeschlossenen div oder einer if-Abfrage um dass die Suchfunktion wieder funktioniert und sich u.a. auch das z.B. Kontrollzentrum auch mit einen klick Außerhalb des selbigen Icons schließen lässt.

• Bezgl. den Badges (Notificationen)

Für die Badges (Notificationen) bedarf es einer Abfrage, um diese hinter den Menüpunkt(en) anzuzeigen und in etwa so aussehen:

{foreach from=$__wcf->getBoxHandler()->getBoxByIdentifier('com.woltlab.wcf.MainMenu')->getMenu()->getMenuItemNodeList() item=menuItemNode}
    {if $menuItemNode->getOutstandingItems() > 0}
        {if $menuItemNode->identifier === 'com.woltlab.blog.BlogList'}
            Ungelesene Blog-Artikel: {#$menuItemNode->getOutstandingItems()}
        {elseif $menuItemNode->identifier === 'com.woltlab.wbb.BoardList'}
            Ungelesene Forenbeiträge: {#$menuItemNode->getOutstandingItems()}
        {elseif $menuItemNode->identifier === 'com.woltlab.wcf.ArticleList'}
            Ungelesene Artikel: {#$menuItemNode->getOutstandingItems()}
        {/if}
    {/if}
{/foreach}

Genau solches fehlt nun noch für die jeweiligen Woltlab Apps wie Forum, Kalender, Filebase, Galerie, etc. sowie auch für den Marktplatz und dem Schaufenster, so dass die, wenn dann erzeugten neuen Beiträge, auch entsprechend im MegaMenü angezeigt werden können. Lediglich stellt sich die Frage wo die Abfragen her zu nehmen oder aber zu finden sind? Nach nun selbst geschätzten vollständigen durchsuchen des Woltlab Forums, bin ich jedoch bisher noch nicht fündig geworden, so dass ich entsprechend hier um etwaige Hinweise bitte. Vielen Dank dafür bereits vorab!

Edit:

Quote from Devon

Bestimmt mit Template sowie CSS Änderungen möglich. Nur Frage ist: Lohnt sich der Aufwand?

Wie auf den Screenshots zu erkennen, würde ich dies mit einen "Ja" beantworten

Gruss,
Andreas

Hallo,

wie bereits erwähnt handelt es sich bei dem genutzten RubyMegaMenü um eine Non-Free-Lizenz, so dass der Code hier zu Vorführungszwecken nicht veröffentlicht werden darf. Allerdings, so wie ich soeben gesehen habe, steht der Code dazu auch bei Codepen.io zur Verfügung. Jedoch möchte ich darauf hinweisen das es sich, trotz des dort frei einsehbaren Codes, um eine Non-Free-Lizenz handelt welche z.B. bei Codecanyon erworben werden kann.

Da dieses Thema hier unter "Kunden helfen Kunden" anscheint untergeht und auch aufgrund das es sich nun mehr um eine Designerstellung handelt, auch mehr vom eigentlichen Thema abweicht, werde ich ein neues Thema dazu in dem entsprechenden Forum für Designerstellung erstellen. Link dazu wäre: Notification Badges in eigenen Menü einbinden

Gruss,
Andreas

Hallo,

nachfolgend einmal eine Möglichkeit, dass Standard Woltlab Menü in ein Mega-Menü umzugestalten. Nach der CSS-Anpassung (es wird dabei nichts überschrieben!), werden die ol in 4 Spalten über die gesamte Breite und die in denol enthaltenen Sublevels li untereinander dargestellt. Dieses Menü kann natürlich per CSS nach eigenen Wünschen angepasst bzw. erweitert werden.

Features

• Leichte Integration
• Links werden vom ACP übernommen
• Einfaches anpassen an Deinen Style
• Quasi unendlich erweiterbar

Demo

Eine Live Demo kann auf Belarusinfo.de betrachtet werden.

Quellcode

.mainMenu a{
  color: #efefef;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 300;
  text-shadow: 0 0 1px #000;
  font-family: "Ubuntu", Arial, Helvetica, sans-serif;
}
.mainMenu .boxMenu > li > a {
  color: #efefef;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 16px;
  text-shadow: 0 0 1px #000;
  font-family: "Ubuntu", Arial, Helvetica, sans-serif;
  height: 60px;
}
.boxMenuHasChildren ol{
  left: 0;
  width: 100%;
}
.boxMenuHasChildren li{
  width: 25%;
  float: left;
}
.boxMenuHasChildren li a:first-child{
  font-weight: 700;
}
.boxMenuHasChildren li > ol{
  height: 100%;
  min-height: 200px;
  text-shadow: 0 0 1px #000;
}
.boxMenuHasChildren li > ol > li{
  width: 100%;
  float: left;
  font-weight: normal;
}
.boxMenuHasChildren li > ol > li a{
  font-weight: normal !important;
  text-transform: none;
}

Benutzung

1. Quellcode wie o.a. im "Stilunabhängigen CSS / SCSS" oder aber im Stil unter "Erweiterte Einstellungen" einfügen.
2. Weitere Links können einfach über das ACP hinzugefügt werden.
3. Menü CSS-Eigenschaften nach eigenen belieben editieren.

Hinweis(e)

1. Beachtet bitte, dass dieses Menü nur mit der Woltlab Suite 3.1 getestet wurde. Dennoch gehe ich davon aus, dass dies auch in aktuelleren Versionen der Suite funktionieren wird.
2. Dies ist nur als Beispiel gedacht, wie es aussehen kann. Mit etwas CSS und ebenso Fantasie, lässt sich das Menü an seinen eigenen Style anpassen. Hiermit soll lediglich verständlich gezeigt werden, wie man mit einfachen mitteln aus den Standard Woltlab Menü, mit wenig CSS ein Mega-Menü zaubern kann.
3. Für die Icons im Menü wird das Plugin Menü-Icons von Softcreator benötigt.
4. Bei den eingesetzten Icons handelt es sich um die Font-Awesome 5 Icons. Diese können per Plugin von Kittmedia genutzt werden (funktionierte bei mir jedoch nicht) oder aber wie hier in der Anleitung beschrieben auch manuell eingebunden werden.
5. Das Mega-Menü funktioniert verständlicherweise nur im Vollbildmodus. Bei kleineren Auflösungen greift das Standard Woltlab-Mobile-Menü.

Lizenz

Copyleft oder mit anderen Worten, macht damit was Ihr wollt

Screenshot

Viel Spaß damit

Was den eigentlichen Mega-Menü, wie bereits in den Beiträgen zuvor zu sehen war, so ist dies bereits erfolgreich umgesetzt worden und wird in der kommenden Zeit in diesem bisherigen Mega-Menü intrigiert. Sofern dies geschehen ist folgen weitere Screenshots und Anleitungen dieses zu bewerkstelligen.

Gruss,
Andreas