Hauptmenü mit unterschiedlichem Smarty-HTML

Alles rund um Module und Plugins in CONTENIDO 4.10.
Antworten
Faar
Beiträge: 1915
Registriert: Sa 8. Sep 2007, 16:23
Wohnort: Brandenburg
Kontaktdaten:

Hauptmenü mit unterschiedlichem Smarty-HTML

Beitrag von Faar » Di 25. Aug 2020, 15:21

Ich habe das Problem, dass ein Hauptmenü nur <button>Menü1</button> im ersten Level anzeigen soll (aber keine Links) und nur im zweiten Level dann das übliche <ul><li>-Muster.

Wäre es machbar und sinnvoll, das in einem Smarty-Template auszuführen und mit {if $first==true} zu unterscheiden?
https://www.smarty.net/docsv2/de/langua ... erty.first
Wobei hier zu beachten ist, dass es ein Recursives Smarty-Menü ist das sich selbst im Template wieder aufruft.
Wäre dann beim recursiven Aufruf von get.tpl dann $first wieder auf 1 ?

Oder wäre es besser, ich würde für die Submenüs ein zweites Template (get2.tpl) aufrufen statt dem ersten recursiv?
Dann könnte ich sauber zwischen dem Ersten Level und dem Zweiten trennen.
Das zweite Template müsste ja wegen tieferer Ebenen dennoch recursiv sein, jedoch mit dem Aufruf von get2.tpl
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

Faar
Beiträge: 1915
Registriert: Sa 8. Sep 2007, 16:23
Wohnort: Brandenburg
Kontaktdaten:

Re: Hauptmenü mit unterschiedlichem Smarty-HTML

Beitrag von Faar » Mi 26. Aug 2020, 11:04

Also ich habe mich erstmal für den Weg mit zwei verschiedenen Templates entschieden.
Der Level 1 wird mit get1.tpl angezeigt und Level 2 und 3 usw. werden mit get2.tpl angezeigt.
Das erste Template gibt ul-li-button aus, mit entsprechendem gedöns außen herum.
Das zweite Template gibt die Subcats mit ul-li-a aus.
Das funktioniert soweit.

Gesteuert wird die Anzeige der Submenüs nicht mehr mit CSS, sondern mit Javascript.
<button onclick="myScript('id{$idcat}')">
Das <ul> im Submenü mit der ID z.B. "id3" wird dann display:block geschaltet.
Das funktioniert noch nicht reibungslos, weil zum einen muss der Style "display:none" inline ins HTML gesetzt werden, da das CSS der Datei nicht geändert wird, sondern durch direkte Anweisung nur überschrieben.
Zum andern braucht es irgendeine Speicherung der letzten ID, weil die offen bleibt bis man wieder genau diesen Menüpunkt anklickt (wegen der ID).
Klickt man einen anderen Menüpunkt an, muss die vorherige ID wieder display:none gesetzt werden.
Und klickt man irgendwohin ist freie Feld, muss auch display:none gesetzt werden.

Und so weiter für alle Sub-Kategorien...
Mit Hintergrund auf ganzer Breite für die Subcats.
Und dann noch Responsive und mit Burger-Menü...
Ich glaube, wer sich das Menü ausgedacht hat, hatte keine Ahnung, was eine Menüprogrammierung und semantisches Menü ist. Es ging offensichtlich nur ums Design.
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

Faar
Beiträge: 1915
Registriert: Sa 8. Sep 2007, 16:23
Wohnort: Brandenburg
Kontaktdaten:

Re: Hauptmenü mit unterschiedlichem Smarty-HTML

Beitrag von Faar » Mi 26. Aug 2020, 11:25

Ok, Sackgasse.
Das Desing ist so aufgebaut, dass Level 1 mit ul-li-button völlig getrennt ist von Level 2 mit ul-li-a.
Das Menümodul holt in die Variable $tree ja den kompletten Kategoriebaum und in Smarty wird mit {foreach} dieser Baum ausgelesen.
Praktisch müsste in meinem Fall Smarty zuerst die Menüebene 1 komplett in die Buttons auslesen und danach im Template 2 dann nochmal die Ebenen 2 und 3 extra.

In PHP wüsste ich, wie es geht aber in Smarty?
{if subcats} hangelt sich ja am Menü-Ast entlang nach unten bis zum letzten Level. Erst dann kommt der nächste Menü Ast.
uff... :(
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

xmurrix
Beiträge: 3143
Registriert: Do 21. Okt 2004, 11:08
Wohnort: Augsburg
Kontaktdaten:

Re: Hauptmenü mit unterschiedlichem Smarty-HTML

Beitrag von xmurrix » Mi 26. Aug 2020, 20:17

Versuche doch in Smarty nach dem schließenden ul Tag nochmal durch den Kategoriebaum zu iterieren, um die nächste Ebene auszugeben. So, wie ich das verstanden habe, sind ja die Listen voneinander getrennt auszugeben. Falls das so ist, sollte es mit folgendem Code nach dem schließenden ul Tag funktionieren:

Code: Alles auswählen

{foreach from=$tree item=wrapper}
    {assign var="idcat" value=$wrapper.idcat}
    {if $idcat|in_array:$path and !empty($wrapper.subcats)}
        {include file="navigation_main/template/get.tpl"
            tree=$wrapper.subcats path=$path ulId=""}
    {/if}
{/foreach}
Dafür braucht man dann in der ersten Schleife den include des Templates nicht.
CONTENIDO Downloads: CONTENIDO 4.10.1
CONTENIDO Links: Dokumentationsportal, FAQ, API-Dokumentation
CONTENIDO @ Github: CONTENIDO 4.10 - Mit einem Entwicklungszweig (develop-branch), das viele Verbesserungen/Optimierungen erhalten hat und auf Stabilität und Kompatibilität mit PHP 8.0 bis 8.2 getrimmt wurde.

Faar
Beiträge: 1915
Registriert: Sa 8. Sep 2007, 16:23
Wohnort: Brandenburg
Kontaktdaten:

Re: Hauptmenü mit unterschiedlichem Smarty-HTML

Beitrag von Faar » Do 27. Aug 2020, 13:45

xmurrix hat geschrieben:
Mi 26. Aug 2020, 20:17
Versuche doch in Smarty nach dem schließenden ul Tag nochmal durch den Kategoriebaum zu iterieren, um die nächste Ebene auszugeben.
Hallo Xmurrix,
daran dachte ich auch schon aber ich bin gerade dabei, mit einem zweiten Modul die Sache aufzubauen.
Das zweite Modul zeigt noch die erste Menüebene an, weil man nur Tiefe aber nicht Startebene angeben kann.
Wenn das nicht so gut funktioniert, versuche ich Deine Lösung.

Tatsächlich ist das Menü so aufgebaut:

Code: Alles auswählen

			<div class="py-2">
				<div class="grid">
					<div class="cell-3-4">
					<div class="stack-2">
						<ul class="meta-headings list-unstyled sans-mini strong w-25">
							<li class="meta-item mr-auto"><button type="button" accesskey="4" title="[Alt(+Shift)+4]" class="link text-gr1 sans"><span class="icon fas fa-search"></span>Suche</button></li>
							<li class="meta-item mr-auto"><a accesskey="i" title="anmelden [Alt(+Shift)+i]" href="https://"><span class="icon far fa-user"></span>Login</a></li>
						</ul>
						<ul class="main-headings list-unstyled sans-h4b strong">
						<li class="main-heading">
						<a href="#" class="">Home</a>
						</li>
						<li class="main-heading">
						<a href="#" class="">Link 1</a> 
						</li>
						<li class="main-heading">
						<a href="#" class="">Link 2</a>
						</li>
						<li class="main-heading dropdown">
						<a href="#" class="">Link 3</a>
							<ul class="dropdown-content">
								<li class="">
								<a href="#" class="">Link 1</a> 
								</li>
								<li class="">
								<a href="#" class="">Link 2</a> 
								</li>
								<li class="">
								<a href="#" class="">Link 3</a>
								</li>
							</ul>
						</li>
						</ul>
					</div>
					</div>
				</div>
				</div>
				<div id="menu-collapse" class="hold">
					<nav>
						<ul class="main-panels list-unstyled">
							<li class="main-panel" style=""> 
								<ul aria-labelledby="executivesummary" class="panel-menu level-1 list-unstyled focusin" style="height: auto;">
									<li class="menu-item sans-h5">
										<a href="/....jsp" class="strong d-block w-100 text-left px-2 py-1"><span>SubMenue</span><!----></a>
									</li>
								</ul>
							</li>
						</ul>
					</nav>
				</div>				

Und das versuche ich nachzubauen.
Ursprung ist ein Java-CMS das mittels Vue.js auf den Browser gebracht wird.
In der Originalseite wird also ein komplexes HTML-Gerüst mittels Javascript mit Daten gefüllt.
Man sieht es auch im Seitenquelltext, der anders aus sieht als der Quelltext hier oben mittels Entwicklertools angezeigt.
Der Seitenquelltext ist voll mit Scriptanweisungen und sehr seltsamem HTML. Vermutlich Vue.js spezifisch.
Das Entwicklertool zeigt ja das HTML so an, wie es nach der Javascript-Aktivität aussehen soll.

Nur kann man mit Headless und Scripten andere Menüs und Darstellungen aufbauen, als mit einem Modul, das den kompletten Menübaum semantisch aufbaut.
Wie ich das noch responsive in ein Burgermenü bekomme, ist mir noch völlig rätselhaft.
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

Faar
Beiträge: 1915
Registriert: Sa 8. Sep 2007, 16:23
Wohnort: Brandenburg
Kontaktdaten:

Re: Hauptmenü mit unterschiedlichem Smarty-HTML

Beitrag von Faar » Do 27. Aug 2020, 16:18

xmurrix hat geschrieben:
Mi 26. Aug 2020, 20:17
Versuche doch in Smarty nach dem schließenden ul Tag nochmal durch den Kategoriebaum zu iterieren, um die nächste Ebene auszugeben.
...
Dafür braucht man dann in der ersten Schleife den include des Templates nicht.
Also, praktisch könnte ich das auch ins zweite Modul einbauen?
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

xmurrix
Beiträge: 3143
Registriert: Do 21. Okt 2004, 11:08
Wohnort: Augsburg
Kontaktdaten:

Re: Hauptmenü mit unterschiedlichem Smarty-HTML

Beitrag von xmurrix » Do 27. Aug 2020, 16:55

...Also, praktisch könnte ich das auch ins zweite Modul einbauen?...
Ja, das kann man auch in einem separaten Modul einbauen. Dann muss das Modul halt wissen, welche Navigationsebene es ausgeben soll.
CONTENIDO Downloads: CONTENIDO 4.10.1
CONTENIDO Links: Dokumentationsportal, FAQ, API-Dokumentation
CONTENIDO @ Github: CONTENIDO 4.10 - Mit einem Entwicklungszweig (develop-branch), das viele Verbesserungen/Optimierungen erhalten hat und auf Stabilität und Kompatibilität mit PHP 8.0 bis 8.2 getrimmt wurde.

Faar
Beiträge: 1915
Registriert: Sa 8. Sep 2007, 16:23
Wohnort: Brandenburg
Kontaktdaten:

Re: Hauptmenü mit unterschiedlichem Smarty-HTML

Beitrag von Faar » Do 27. Aug 2020, 21:04

xmurrix hat geschrieben:
Do 27. Aug 2020, 16:55
Dann muss das Modul halt wissen, welche Navigationsebene es ausgeben soll.
Das ist jetzt mein aktuelles Problem :(
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

McHubi
Beiträge: 1209
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

Re: Hauptmenü mit unterschiedlichem Smarty-HTML

Beitrag von McHubi » Di 1. Sep 2020, 12:11

Dann muss das Modul halt wissen, welche Navigationsebene es ausgeben soll.
Essentielle Frage: kommt beim Anklicken des Hauptnavigationspunktes (Level 1) ein Seitenreload oder nicht?
Wenn ja, kann beim Reload der Seite ja die Kategorie mitgegeben werden - z. B. in der URL. Die wäre dann vom zweiten Modul auslesbar und Du hättest die Info, die Du brauchst.
seamless-design.de
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.

Das Handbuch zur Version 4.10: CONTENIDO für Einsteiger (4.10)

Das Handbuch zur Version 4.9: CONTENIDO für Einsteiger (4.9)

Faar
Beiträge: 1915
Registriert: Sa 8. Sep 2007, 16:23
Wohnort: Brandenburg
Kontaktdaten:

Re: Hauptmenü mit unterschiedlichem Smarty-HTML

Beitrag von Faar » Mi 2. Sep 2020, 13:41

McHubi hat geschrieben:
Di 1. Sep 2020, 12:11
Essentielle Frage: kommt beim Anklicken des Hauptnavigationspunktes (Level 1) ein Seitenreload oder nicht?
Nein.
Es ist nur ein Button statt einem Anker und wird mit Javascript gesteuert.
Das Script macht aus dem Submenü (display:none) ein display:block
Das Submenü muss also schon da sein aber halt versteckt.

Die Krux an der Sache ist das HTML, man muss es trennen, darum habe ich jetzt zwei Module.
Eines gibt nur den Level1 aus und das zweite sollte ab Level 2 die Submenüs ausgeben.
Tut es aber nicht.

Entweder es zeigt auch Level 1 an oder gar nichts.
Im Path befindet sich nur das hier: Path:Array ( [0] => 1 )
Lasse ich die idcats der Subcats anzeigen ( {$wrapper.subcats.idcat|@print_r} ), kommt nur das: 3 1 4 1 5 1 6 1
3, 4, 5 und 6 sind die idcats des Hauptmenüs.
1 ist die idcat von Home.
Bei 1 startet auch das Menü, es ist die rootID.

Path müsste eigentlich viel mehr enthalten und bei subcats sollten höhere Zahlen kommen.
Ich habe auch schon das erste Navi-Modul ausgeschaltet, um zu sehen, ob sie sich beeinflussen, ist aber nicht.
Lasse ich {$wrapper.subcats|@print_r} anzeigen, kommt eine ewig lange Liste mit viel zu vielen Daten.

{if $idcat|in_array:$path and !empty($wrapper.subcats)}
Darüber springt Smarty nicht, zeigt nichts an obwohl $wrapper.subcats gestopft voll ist mit Daten.
Den gleichen Effekt habe ich auch, wenn ich das mit dem $path weg lassen, es liegt also nicht daran.
Ich komme derzeit nicht dazu, dass Smarty mit das nach der if-Auswahl anzeigt.
Weil da befindet sind dann das Submenü.

Code: Alles auswählen

<?php

/**
 * description: mainsub navigation
 *
 * @package Module
 * @subpackage NavigationMain
 * @author marcus.gnass@4fb.de
 * @copyright four for business AG <www.4fb.de>
 * @license http://www.contenido.org/license/LIZENZ.txt
 * @link http://www.4fb.de
 * @link http://www.contenido.org
 */

// assert framework initialization
defined('CON_FRAMEWORK') || die('Illegal call: Missing framework initialization - request aborted.');

// get client settings
$rootIdcat = getEffectiveSetting('navigation_mainsub', 'idcat', 1);
$depth = getEffectiveSetting('navigation_mainsub', 'depth', 3);

// get category tree2
$categoryHelper = cCategoryHelper::getInstance();
$categoryHelper->setAuth(cRegistry::getAuth());
$tree2 = $categoryHelper->getSubCategories($rootIdcat, $depth);

// get path (breadcrumb) of current category
$filter = function(cApiCategoryLanguage $item) {
    return $item->get('idcat');
};
$path = array_map($filter, $categoryHelper->getCategoryPath(cRegistry::getCategoryId(), 1));

// use template to display navigation
$smarty = cSmartyFrontend::getInstance();
$smarty->assign('ulId', 'navigation');
$smarty->assign('tree2', $tree2);
$smarty->assign('path', $path);
$smarty->display('get1.tpl');

// Kontrolle
echo "Path:";
print_r($path);
?>

Code: Alles auswählen

{if 0 lt $ulId|strlen}<!-- navigation_mainsub/template/get1.tpl -->{/if}
{* FIRST Level Button for Sub Menu *}
<ul id="" class="main-panels list-unstyled">
    {foreach from=$tree2 item=wrapper}
        {assign var="idcat" value=$wrapper.idcat}
        {if $idcat|in_array:$path}
            {assign var="aClass" value='active'}
        {else}
            {assign var="aClass" value=''}
		{/if}
	{$idcat}
        {if $idcat|in_array:$path and !empty($wrapper.subcats)}
			<li class="main-panel {$aClass|escape} li{$idcat}">
			{$ulidcat=$idcat}
            {*include file="navigation_mainsub/template/get2.tpl"
			tree2=$wrapper.subcats path=$path ulClass="dropdown-content"}
			{assign var="headingclass" value='main-sub'*}
			</li>
        {/if}
	{$wrapper.subcats.idcat|@print_r}
    {/foreach}
</ul>
{if 0 lt $ulId|strlen}<!-- /navigation_mainsub/template/get1.tpl -->{/if}
Vielleicht übersehe ich seit Tagen was, aber hab auch schon alles Mögliche und Unmögliche ausprobiert.
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

xmurrix
Beiträge: 3143
Registriert: Do 21. Okt 2004, 11:08
Wohnort: Augsburg
Kontaktdaten:

Re: Hauptmenü mit unterschiedlichem Smarty-HTML

Beitrag von xmurrix » Mi 2. Sep 2020, 14:17

Faar hat geschrieben:
Mi 2. Sep 2020, 13:41
...{if $idcat|in_array:$path and !empty($wrapper.subcats)}
Darüber springt Smarty nicht, zeigt nichts an obwohl $wrapper.subcats gestopft voll ist mit Daten...
Da wird geprüft, ob die Id der Subnavigation in der $path Liste ist. Das ist aber nicht der Fall, solange du nicht eine Seite aufrufst, die aus der Subnavigation kommt. Du willst doch alle Subnavigationen erstmal ausgeben und nur dann anzeigen, wenn der Benutzer auf die Hauptnavigation klickt (oder bei mouseover).
Dann ändere die Zeile im Template doch in

Code: Alles auswählen

        {if !empty($wrapper.subcats)}
Damit werden Subnavigationen immer ausgegeben, sofern $wrapper.subcats nicht leer ist.

Nachtrag:
Du kannst das auch im Template des ersten Navigationsmoduls ausgeben. Zuerst eine Schleife für die Ausgabe der Menüpunkte der Hauptnavigation, dann nach dem schließenden ul eine zweite Schleife für die Subnavigationen.

Code: Alles auswählen

{if 0 lt $ulId|strlen}<!-- navigation_main/template/get.tpl -->{/if}

<ul class="{$ulId}">

    {foreach from=$tree item=wrapper}
        {assign var="idcat" value=$wrapper.idcat}
        {assign var="url" value=$wrapper.item->getLink()}
        {assign var="name" value=$wrapper.item->get('name')}
        {if $idcat|in_array:$path}
            {assign var="aClass" value='active'}
        {else}
            {assign var="aClass" value=''}
        {/if}
        <li>
            <a class="{$aClass|escape}" href="{$url|escape}" title="{$name|escape}">{$name|escape}</a>
        </li>
    {/foreach}
</ul>

{foreach from=$tree item=wrapper}
    {if !empty($wrapper.subcats)}
        {include file="navigation_main/template/get.tpl"
            tree=$wrapper.subcats path=$path ulId=""}
    {/if}
{/foreach}

{if 0 lt $ulId|strlen}<!-- /navigation_main/template/get.tpl -->{/if}
Brauchst du ein anderes Markup für die Subnavigationen, kannst du ein neues Template "getsub.tpl" erstellen und in der zweiten Schleife dann {include file="navigation_main/template/getsub.tpl" tree=$wrapper.subcats path=$path ulId=""} verwenden.
CONTENIDO Downloads: CONTENIDO 4.10.1
CONTENIDO Links: Dokumentationsportal, FAQ, API-Dokumentation
CONTENIDO @ Github: CONTENIDO 4.10 - Mit einem Entwicklungszweig (develop-branch), das viele Verbesserungen/Optimierungen erhalten hat und auf Stabilität und Kompatibilität mit PHP 8.0 bis 8.2 getrimmt wurde.

Faar
Beiträge: 1915
Registriert: Sa 8. Sep 2007, 16:23
Wohnort: Brandenburg
Kontaktdaten:

Re: Hauptmenü mit unterschiedlichem Smarty-HTML

Beitrag von Faar » Mi 2. Sep 2020, 15:05

xmurrix hat geschrieben:
Mi 2. Sep 2020, 14:17
Dann ändere die Zeile im Template doch in

Code: Alles auswählen

        {if !empty($wrapper.subcats)}
Damit werden Subnavigationen immer ausgegeben, sofern $wrapper.subcats nicht leer ist.
Das hatte ich vorher auch schon mal aber funktionierte nicht.
Nun habe ich es wieder eingeschaltet, aber das zweite Template auskommentiert mit {* *}.
Und tatsächlich, es zeigt mir das HTML in der if-Bedingung an.

Nun habe ich das zweite Template eingeschaltet und da bricht der Seitenaufbau ab mit:
PHP Fatal error: Uncaught --> Smarty Compiler: ...
Ich hatte dank Copy&Paste wegen der vielen Ausprobiererei einige Fehler drin, die ich nun behoben habe.
Jetzt läuft es. :shock:

Danke

P.S. Ich hatte früher wahrscheinlich schon nach der If subcats Bedingung Fehler im Smarty, so dass es das HTML nicht anzeigte.
Leider habe ich dann diesen $path mit eingebaut, statt zuerst den anderen Fehler zu beheben, weil ich dachte, es liege am Path.
So kann man sich lange im Kreis drehen :oops:
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

homtata
Beiträge: 1142
Registriert: Mi 14. Jan 2004, 14:41
Kontaktdaten:

Re: Hauptmenü mit unterschiedlichem Smarty-HTML

Beitrag von homtata » Mi 2. Sep 2020, 19:52

Das Thema "Geteiltes Menü" oder "Split Menü" haben wir schon diverse Mal vor einiger Zeit hier gehabt und auch funktionierende Ansätze gehabt. Der Ansatzpunkt ist jeweils, dass das in den meisten Fällen eher durch 2 Module zu regeln ist, da die beiden Elemente selten direkt verzahnt ausgegeben werden können (was prinizipiell auch möglich ist). Ein erster Ansatzpunkt hierfür ist der alte Thread:
viewtopic.php?f=89&t=34020

homtata
Beiträge: 1142
Registriert: Mi 14. Jan 2004, 14:41
Kontaktdaten:

Re: Hauptmenü mit unterschiedlichem Smarty-HTML

Beitrag von homtata » Mi 2. Sep 2020, 20:04

Ich hänge dir hier mal noch ein Modul an, wo das alles in einer Datei zusammengepackt ist, allerdings primär für Bootstrap 4 ausgelegt. Ich brauchte das, weil das Submenü über die ganze Breite laufen sollte und nicht nur innerhalb des Hauptmenü-Minicontainers.

Das Modul gibt erstmal bis zu drei Ebenen der Hauptnavigation aus; in meinem Fall unterdrücke ich über CSS die Anzeige der 2. und 3. Ebene, brauche die aber später fürs Burger-Menü. Darunter wird nochmal jedes Menü aufberereitet ab der 2. Ebene (in getrennten Containern), so dass per JS die Unterebenenen separat eingeblendet werden können. Da dies hier aber anders als im Standardmenü in einer völlig getrennten Containerlösung funktionieren muss und sich die Menüpunkte bis dato nicht kennen, muss noch ziemlich aufwändiger jQuery-Code dazu (weiter unten), damit die Mouseovers funktionieren und der Fokus nicht verloren wird, egal ob man auf dem Haupt- oder dem Submenü ist.
Es kann sein, dass das in einer nicht Bootstrap4-Umgebung so nicht sauber läuft, aber vielleicht hilfts ja.

Code: Alles auswählen

			/** Dropdown on hover */
	
			$(".submenu").mouseleave(function() {
				$(this).removeClass('show');
				//var isDropDownHovered = $(this).filter(":hover").length;
				//if(!isDropdownHovered) $(this).removeClass('show');
			});	
			
			$("#main-nav .nav-link.dropdown-toggle").hover( function () {
				// Open up the dropdown
				
				$(this).parents('#main-nav').find('#'+$(this).data('sub')).addClass('show');
				//$('#subshow2').addClass('show');
				$(this).removeAttr('data-toggle'); // remove the data-toggle attribute so we can click and follow link
				$(this).parent().addClass('show'); // add the class show to the li parent
				$(this).next().addClass('show'); // add the class show to the dropdown div sibling
			}, function () {
				// on mouseout check to see if hovering over the dropdown or the link still
				var isDropdownHovered = $(this).parents('#main-nav').find('#'+$(this).data('sub')).filter(":hover").length;
				//var isDropdownHovered2 = $(this).next().filter(":hover").length; // check the dropdown for hover - returns true of false
				var isThisHovered = $(this).filter(":hover").length;  // check the top level item for hover
				if(isDropdownHovered || isThisHovered) {
					// still hovering over the link or the dropdown
				} else {
					// no longer hovering over either - lets remove the 'show' classes
					$(this).attr('data-toggle', 'dropdown'); // put back the data-toggle attr
					$(this).parent().removeClass('show');
					$(this).next().removeClass('show');
					$(this).parents('#main-nav').find('#'+$(this).data('sub')).removeClass('show');
					//$(this).parents('#main-nav').find('.submenu').removeClass('show');
				}
			});
			// Check the dropdown on hover
			$(".dropdown-menu").hover( function () {
			}, function() {
				var isDropdownHovered = $(this).parents('#main-nav').find('#'+$(this).data('sub')).filter(":hover").length;
				//var isDropdownHovered2 = $(this).prev().filter(":hover").length; // check the dropdown for hover - returns true of false
				var isThisHovered= $(this).filter(":hover").length;  // check the top level item for hover
				if(isDropdownHovered || isThisHovered) {
					// do nothing - hovering over the dropdown of the top level link
				} else {
					// get rid of the classes showing it
					$(this).parent().removeClass('show');
					$(this).removeClass('show');
					$(this).parents('#main-nav').find('#'+$(this).data('sub')).removeClass('show');
					//$(this).parents('#main-nav').find('.submenu').removeClass('show');
				}
			});	
Dateianhänge
navigation_main_split.zip
(5.43 KiB) 301-mal heruntergeladen

Faar
Beiträge: 1915
Registriert: Sa 8. Sep 2007, 16:23
Wohnort: Brandenburg
Kontaktdaten:

Re: Hauptmenü mit unterschiedlichem Smarty-HTML

Beitrag von Faar » Mi 16. Sep 2020, 13:25

Hallo Homtata,
das Ganze ist viel komplizierter geworden als befürchtet.
Das Original-Menü wird komplett mit Javascript gesteuert und befüllt. Das HTML-Gerippe sieht anders aus als nach dem Javascript Eingriff.

Das Submenü ist inzwischen in einem Extramodul mit Smarty gelöst worden, über zwei Templates.
Hier der wichtige Teil von get1.tpl:

Code: Alles auswählen

        {if !empty($wrapper.subcats)}
			<li id="li{$idcat}" class="main-panel {$aClass|escape}" style="display: none;">
			{$ulidcat=$idcat}
            		{include file="navigation_sub/template/get2.tpl"
			tree=$wrapper.subcats path=$path ulClass="dropdown"}
			{assign var="headingclass" value='main-sub'}
			</li>
        {/if}
Im Standardtemplate wird zuerst <li> angezeigt und darin dann nach Subkategorien gesucht.
Jetzt mache ich es umgekehrt und schreibe, erst wenn Unterkategorien vorhanden sind, soll es weiter gehen und <li> angezeigt werden.
Display:none ist darum, dass man mit Javascript dann den style auf display:block schalten kann, beim Event (click).
Template 2 wäre dann wie das normale Template auch mit ul-li Funktionalität.
Soweit funktioniert das auch.

Problem war jetzt, dass es sowohl <button> als auch <a> im Menü gibt, je nachdem ob ein Submenü vorhanden ist.
Das träfe auch auf das Hauptmenü im ersten Level zu.
Das ließe sich sicher auch mit Smarty machen, aber halt auch erst, wenn das Monster-Array $tree ausgelesen wurde. Davor weiß Smarty nichts von Submenüs.
Hab mit dem Kunden vereinbart, dass im Level 1 alles <button> ist und dafür eine Unterkategorie mit "Übersicht" sich auftut.
Das ist nicht semantisch aber im Original haben sie es nunmal so gelöst und es soll ja sein wie im Original.

Aktuell macht mir das Javascript noch zu schaffen, weil das Contenido Modul so aufgebaut ist, dass zuerst ein Anker <a> angeklickt und das Menü neu geladen werden muss, damit es mit "active" gekennzeichnet werden kann.
Im Original ist es aber so, dass ein Click auf einen Hauptmenü-Button ein Javascript Event auslöst, das eine Reihe an Dingen tut.
Die Menülogik ist mein Problem hier: Es wird nicht einfach aktiv geschaltet, weil aktiv ist es ja nicht, sondern es wird das <li> wie oben im Submenü-Code als display:block gesetzt und daneben noch eine Reihe mehr.
Im Hauptmenü setzt es neue Klassen dazu, sogar Attribute werden ins HTML gesetzt, so Dinge wie dass jetzt was sichtbar wäre oder im Pfad, und dann der Hintergund abgedunkelt, die Schriftfarben verändert, auch die von den anderen Menüpunkten, zudem erscheint ein Pfeil, der auf den "aktiven" Hauptmenüpunkt zeigt, während darunter das Submenü ausgeklappt ist.
Theoretisch soll sich das Submenü zuerst unter dem Hauptmenü ausklappen, und zwar immer linksbündig, daher der Pfeil unter dem Menüpunkt.
Danach sollen sich die tieferen Submenülevel nach rechts fortpflanzen.

Ich tue mich noch schwer, das mit Javascript alles gleichzeitig zu steuern, besonders auch die unterschiedlichen Click-Varianten mit der Ansteuerung der anderen HTML-Elemente. Beim Original kann ich nicht abkupfern, das dortige Javascript ist komprimiert und mehr als 8000 Zeilen lang.
Das Menüscript stammt wohl von Vue.js wie auch eigentlich das ganze Frontend.
Mit Vue.js kann ich hier bei Contenido nichts anfangen und sicher ist es ein angepasstes Menü und nichts von der Stange.
Ich habe es teils mit Javascript ohne Frameworks hinbekommen aber manchmal fehlt oder hakelt es noch.
Ich fürchte, da reichen Funktionen nicht mehr hin, vielleicht brauche ich Javascript Klassen :cry:
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

Antworten