[GELÖST] seo42 mit nav42

[gupi]

Hallo ich verwende neben seo42 zum Erzeugen der Menüs auch die nav42 Klasse. Klappt auch ohne Probleme.
Jetzt möchte ich aber das CSS Framework bootstrap auch für die Darstellung der hier erzeugten Menüs nutzen. Bei "Einebenen-Menues" geht das ja auch dank der Möglichkeit via ->setUlClass("class",level) die benötigten Klassennamen zuzuweisen.
Sowas wie hier brauche ich um die Funktionalität von bootstrap nutzen zu können:

Code: Alles auswählen

<ul class="nav navbar-nav"> // das klappt ja ohne Probleme mit nav42
<li class="active"> // auch die "active " class zu setzen ist kein Problem für nav42
<a href="#">Start</a>
</li>
...

ab hier wird's spannend, denn diese class darf nur gesetzt sein falls Untermenüpunker vorhanden sind

Code: Alles auswählen

<li class="dropdown"> 

auch hier komme ich nicht weiter - wie weise ich dem a Tag eine class zu?

Code: Alles auswählen

<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"> 
Dropdown-Menü
<span class="caret"></span>
</a>

das hier klappt dann wieder, zumindest was die class Zuweisung betrifft. Kann ich irgendwie auch noch andere Properties wie "role" oder "data-toggle" usw. setzen?

Code: Alles auswählen

<ul class="dropdown-menu" role="menu"> 
<li>
<a href="#">Aktion</a>
</li>
...

hierzu habe ich gar keine Idee - würde sowas aber gerne nutzen.

Code: Alles auswählen

<li class="divider"></li>
<li class="dropdown-header">Nav-Überschrift</li>
<li>
<a href="#">Abgetrennter Link</a>
</li>
<li>
<a href="#">Noch ein abgetrennter Link</a>
</li>
</ul>
</li>
</ul>

Gut, man könnte ein Menü natürlich auch durch eine eigene Klasse erzeugen, hab ich vor nav42 auch getan, aber da will ich eigentlich nicht mehr hin.

Gibt's hierzu einen Lösungsansatz?

Danke
Gunter

[Peter.Bickel]

Hallo gupi,

ich habe bislang auch immer manuell programmierte Navigationen gemacht, war aber nun erstaunt, wie flexibel nav42 hier ist.
Im Prinzip kann man alles innerhalb des li-Elements beeinflussen, und zwar mit setLinkFromUserFunc.

Hier mal ein Beispiel aus einem Projekt:

Code: Alles auswählen

$nav->setLinkFromUserFunc(function($cat, $depth) {

	$thisCat = OOCategory::getCategoryById($cat->getId());
	$children = $thisCat->getChildren();
	$hasCats = FALSE;

	if (is_array($children) && count($children) > 0) {
		foreach ($children as $child) {
			if ($child->isOnline()) {
				$hasCats = TRUE;
			}
		}
	}
	$toggle = ($hasCats == TRUE) ? '<i class="fa fa-plus"></i>' : '';

	return $toggle.'<a class="nav_link" href="'.$cat->getUrl() . '">'.htmlspecialchars($cat->getName()).'</a>';
});

Falls die Kategorie Unterkategorien hat (und mindestens eine online ist!), wird noch ein Icon dazu gesetzt.
Außerdem sieht Du hier auch, wie man dem a eine CSS-Klasse zuweisen kann.

Unterschiedliche li-Klasse könntest Du so realisieren:

Code: Alles auswählen

$nav->setLiClassFromMetaField("cat_icon"); 

cat_icon wäre ein Kategorie-Metafeld, wo man z.B. mit einem Selectfeld eine fest vordefinierte Auswahl machen könnte.

Hier mal ein Beispiel, wie in der ersten Ebene je nach Kategorie-Metafeld nur Text angezeigt wird oder ein Dummy-Link, der ein Akkordeon öffnet. In der zweiten Ebene wird dagegen der normale Link ausgegeben. Man kann da also schon ne ganze Menge machen.

Code: Alles auswählen

$nav->setLinkFromUserFunc(function($cat, $depth) { 
	if ($depth == 1) { 
		if ($cat->getValue('cat_static') == 'static') {
			return '<div class="widget-heading">'.htmlspecialchars($cat->getName()).'</div>';
		} else {
			return '<a href="javascript:;">'.htmlspecialchars($cat->getName()).'</a>';

		}
	} else { 
		return '<a href="'.$cat->getUrl().'">'.htmlspecialchars($cat->getName()).'</a>'; 
	} 
}); 

In das ul noch eine role reinpopeln geht meines Wissens nicht, auch nicht eine Navi, die nicht auf einer ul-li-Liste basiert. Rexdude wird mich korrigieren, wenn es doch geht.
Hier müsste man die nav42 selbst erweitern oder Rexdude noch etwas "quälen" wegen einer Erweiterung.
Übrigens gibt es mittlerweile (auf Gihub schon drin) auch ein setLiClass.

Ich verfolge aber diese Diskussion sehr aufmerksam, das ist für mich auch interessant.

Schöne Grüße,
Peter.

[gupi]

Hallo Peter,
danke für die schnelle und ausführliche Antwort. Ich werde mich schnellstens an die Umsetzung machen und sehen wie weit ich damit komme.
Ich halte Euch hier im Forum auf dem Laufenden.

Ich habe mir die nav42 Klasse mal etwas genauer angesehen und denke dass sich mit einer abgeleiteten Klasse auch die Frage nach den zusätzlichen Properties wie role und data-toggle lösen lässt.
Auch hierzu werde ich meine Lösung, so ich eine finde, hier veröffentlichen.

Gruß
Gunter

[RexDude]

Gerne kann man auch die nav42 mit einer getBootstrapDropdown() etc. erweitern und mir dann zu kommen lassen...so wie jetzt kürzlich mit einer getBreadcrumbNavigation() geschehen.

[gupi]

Hallo,

ich bin ein ganzes Stück weitergekommen, aber...
irgend etwas läuft schief sobald ich den Link von einer eigenen Funktion setzen lasse.
So sieht meine derzeitige Umsetzung aus:

Code: Alles auswählen

<?php
    $mainNav = new nav42 ();
    $mainNav->setUlClass ( "nav navbar-nav", 0 );
    $mainNav->setUlClass ( "dropdown-menu", 1 );
    $mainNav->setLiClassFromMetaField("cat_li_class");
    $mainNav->setLinkFromUserFunc(function($cat, $depth) {
       $thisCat = OOCategory::getCategoryById($cat->getId());
       $children = $thisCat->getChildren();
       $hasCats = FALSE;
       if (is_array($children) && count($children) > 0) {
         foreach ($children as $child) {
            if ($child->isOnline()) {
              $hasCats = TRUE;
            }
         }
      }
      $toggle = ($hasCats == TRUE) ? 'class="dropdown-toggle" data-toggle="dropdown" ' : '';
                        
      return '<a '.$toggle.' href="'.$cat->getUrl() . '">'.htmlspecialchars($cat->getName()).'</a>';
    });
    echo $mainNav->getNavigationByLevel ( 0 );
?>

Der Link wird genau so gesetzt wie ich das haben möchte- das zeigt firebug:

Code: Alles auswählen

<div id="navbar" class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li class="dummy selected active">
      <a href="/">Home</a>
    </li>
    <li class="dropdown">
      <a class="dropdown-toggle" href="/menue-1.html" data-toggle="dropdown" aria-expanded="false">
        Menü-1
      </a>
    </li>
  </ul>
</div>

Hier sieht man auch, dass derzeit der 1. Menüpunkt "Home" aktiv ist.
Leider bleibt er das auch wenn ich jetzt auf den nächsten Menüpunkt klicke:

Code: Alles auswählen

<li class="dummy selected active">
  <a href="/">Home</a>
</li>
<li class="dropdown open">
  <a class="dropdown-toggle" href="/menue-1.html" data-toggle="dropdown" aria-expanded="true">Menü-1</a>
</li>

Die "ul" mit den Untermenü-Items wird nicht eingefügt und das "li" Element der Klasse "dropdown" erhält lediglich die Klasse "open". Hier müssten aber die klassen "selected" und "active" hin, denn nur für ein selektiertes oder aktives li-Element wird die "ul" mit den Untermenü-Elementen ausgegeben.

Wenn ich jetzt aber hingehe und

• 1. den Funktionsaufruf "$mainNav->setLinkFromUserFunc(function($cat, $depth)" auskommentiere,
  2. den Menüpunkt "Menü-1" anklicke,
  3. dann den Funktionsaufruf wieder aktiviere (Kommentierung aufheben) und ein "refresh" der Seite mache, damit das geänderte Template aktiv wird,

dann sieht erstmal alles gut aus und ich sehe das Untermenü mit allen Items. Ich darf allerdings nicht im Hauptmenü auf einen anderen Link (Home) klicken, dann ist wieder alles so wie oben beschrieben.

Damit bin ich mit meiner Weisheit schon wieder am Ende.

Gruß
Gunter

[gupi]

Ich habe mir nochmal genauer angesehen, worin sich die Lösungasansätze für Sub-Menüs von einer "Bootstrap" konformen Lösung und die NAV42 Lösung unterscheiden:

• - Bootstrap erwartet das alle Sub-Menues (UL-Listen) von Anfang an vorhanden sind. Die Sichtbarkeit wird über javascript gesteuert.
  - NAV42 erzeugt die Sub-Menues erst, wenn der übergeordnete Menüpunkt selektiert wird und steuert so die Sichtbarkeit.

Ich denke mal die unterschiedlichen Herangehensweisen machen es hier so schwierig, beide Welten ohne größere Anpassungen zusammen zu bringen.

Der Grund, weshalb ich überhaupt von meiner früheren Lösung mit der eigenen Menü-Ausgabe abgewichen bin, ist die Sichtbarkeitssteuerung von Menüelementen im Zusammenhang mit dem Community -Addon. Wenn ich hier den Zugang zu bestimmten Kategorien ausgewählten User-Gruppen vorbehalten will, liefert mir NAV42 eine fertige Umsetzung.

Mal sehen ob und wie ich beides zusammenbringen kann.

Wird fortgesetzt...
Gunter

[Peter.Bickel]

Hallo Gunther,

ich bin grad in einem Projekt beim Kunden deswegen kann ich nicht in Ruhe Dein Problem lesen und verstehen (nächste Woche dann). Aber wenn ich Deinen letzten Post auf die Schnelle richtig verstehe, geht es darum, dass unabhängig von der aktuellen Seite ALLE Unterkategorien im HTML vorhanden sein sollen.
Das erreichst Du so:
$nav->setShowAll(true);

Lg, Peter.

[gupi]

Ich hab's hinbekommen - allerdings nur dank der äußerst hilfreichen Hinweise von Peter

Das steht jetzt in meinem Template:

Code: Alles auswählen

<div id="navbar" class="collapse navbar-collapse">
  <?php
     $mainNav = new nav42 ();
     $mainNav->setUlClass ( "nav navbar-nav", 0 );
     $mainNav->setUlClass ( "dropdown-menu", 1 );
     $mainNav->setLiClassFromMetaField("cat_li_class");
     $mainNav->setShowAll(true);
     $mainNav->setLinkFromUserFunc(function($cat, $depth) {
                        
     $thisCat = OOCategory::getCategoryById($cat->getId());
     $children = $thisCat->getChildren();
     $hasCats = FALSE;
                        
      if (is_array($children) && count($children) > 0) {
         foreach ($children as $child) {
            if ($child->isOnline()) {
               $hasCats = TRUE;
            }
         }
       }
       $toggle = ($hasCats == TRUE) ? 'class="dropdown-toggle" data-toggle="dropdown" ' : '';
                        
       return '<a '.$toggle.' href="'.$cat->getUrl() . '">'.htmlspecialchars($cat->getName()).'</a>';
    });
    echo $mainNav->getNavigationByLevel ( 0 );
  ?>
</div>

Die Geschichte mit den zusätzlichen Properties (role = 'was auch immer') stelle ich aus Termingründen
ersmal zurück. Mir ist eh nicht wirklich klar wann und wozu sowas benötigt wird. Da muss ich wohl noch ein bischen in der Doku von Bootstrap lesen - später.

Danke nochmals und ein schönes (Rest-) Wochenende

Gunter