ProcessWire - Navigation Beispiele - Versionsgeschichte

84.155.186.35 am 28. Oktober 2020 um 07:48 Uhr

2020-10-28T07:48:09Z

37.49.72.8 am 14. August 2019 um 06:59 Uhr

2019-08-14T06:59:14Z

37.49.33.174 am 9. August 2018 um 10:22 Uhr

2018-08-09T10:22:50Z

37.49.33.174 am 26. Juli 2018 um 13:47 Uhr

2018-07-26T13:47:34Z

37.49.33.174 am 22. Juni 2018 um 07:09 Uhr

2018-06-22T07:09:05Z

37.49.33.174: /* Multilevel Navigation mit diversen Klassen */

2018-06-18T16:17:46Z

Multilevel Navigation mit diversen Klassen

37.49.33.174 am 18. Juni 2018 um 16:13 Uhr

2018-06-18T16:13:32Z

37.49.33.174: /* Multilevel Navigation mit diversen Klassen */

2018-06-18T12:01:30Z

Multilevel Navigation mit diversen Klassen

37.49.33.174 am 18. Juni 2018 um 12:00 Uhr

2018-06-18T12:00:03Z

37.49.33.174: /* Sidebar Navigation für MaterializeCSS */

2018-06-18T11:37:02Z

Sidebar Navigation für MaterializeCSS

@@ Zeile 3: / Zeile 3: @@
   http://wiki.zone30.info/wikizone/index.php?title=Aligator_(ProcessWire)#Komplettes_Beispiel_1
-== Mit MarkupSimpleNavigation Modul ==
+== MarkupSimpleNavigation Modul Navigation ==
 === Multilevel Navigation mit diversen Klassen ===
 <syntaxhighlight lang="php">

← Nächstältere Version		Version vom 14. August 2019, 06:59 Uhr
Zeile 170:		Zeile 170:
	echo $navPageMarkup;		echo $navPageMarkup;

		+	</syntaxhighlight>
		+
		+	== Megamenu ==
		+	Ab 3.0.119 gibt es eine neue Funktion WireArray->slice mit der man geschickt mehrspaltige Ausgaben realisieren kann.
		+	https://processwire.com/blog/posts/processwire-3.0.119-and-new-site-updates/#new-wirearray-slices-method
		+
		+	Beispiel:
		+	<syntaxhighlight lang="php">
		+	$categories = $pages->get('/about/sites/categories/')->children();
		+	foreach($categories->slices(3) as $items) {
		+	echo "<div class='uk-width-1-3'><ul>";
		+	echo $items->each("<li><a href='{url}'>{title}</a>");
		+	echo "</ul></div>";
		+	}
	</syntaxhighlight>		</syntaxhighlight>

@@ Zeile 1: / Zeile 1: @@
 == Siehe auch ==
   [[ProcessWire - Navigation Snippets]]
 == Mit MarkupSimpleNavigation Modul ==
 === Multilevel Navigation mit diversen Klassen ===

← Nächstältere Version		Version vom 26. Juli 2018, 13:47 Uhr
Zeile 1:		Zeile 1:
		+	== Siehe auch ==
		+	[[ProcessWire - Navigation Snippets]]
	== Mit MarkupSimpleNavigation Modul ==		== Mit MarkupSimpleNavigation Modul ==
	=== Multilevel Navigation mit diversen Klassen ===		=== Multilevel Navigation mit diversen Klassen ===

@@ Zeile 94: / Zeile 94: @@
 <a href="#" data-target="slide-out" class="sidenav-trigger" style="margin-left:0;"><i class="material-icons">menu</i></a>';
 echo $out;
 </syntaxhighlight>

@@ Zeile 14: / Zeile 14: @@
 $selector = 'menus.id=1'; // filter works only for first level because markup simple navigation renders children by itself. This is why we need extra selector
-$outer_tpl = '<ul class="w-list-unstyled ul-nav">||</ul>';
+$outer_tpl = '<ul class=" ul-nav">||</ul>';
 $inner_tpl = '<ul>||</ul>';
-$list_tpl = '<li%s data-ix="close-dropdown-on-hover">||</li>';
+$list_tpl = '<li%s>||</li>';//%s is where classes form parent_class etc. goes
-$item_tpl = '<a href="{url}" data-ix="show-dropdown-on-hover" class="w-inline-block nav-link animsition-link"><h3 class="biger">{title}</h3></a>';
+$item_tpl = '<a href="{url}" class="nav-link">{headline|title}</a>';
-$item_current_tpl = '<a href="{url}" data-ix="show-dropdown-on-hover" class="current w-inline-block nav-link animsition-link"><h3 class="biger">{title}</h3></a>';
+$item_current_tpl ='<a href="{url}" class="current nav-link">{headline|title}</a>';
 $myMenu = $modules->get("MarkupSimpleNavigation"); // load the module
@@ Zeile 41: / Zeile 38: @@
      'item_current_tpl' => $item_current_tpl,
      'xtemplates' => '',
-		'selector' => $selector,
+    'selector' => $selector,
      'date_format' => 'd.m.Y',
      'code_formatting' => false,
-     'debug' => true
+     'debug' => false
 );
 $out = '
-<div data-ix="hide-overlay-menu-on-load" class="overlay-menu">
+<nav>
-	<div class="w-container port-contatiner">
+'.$myMenu->render($options,null,$pa).'
-		<!-- NAVIGATION -->
+</nav>
 ';
 echo $out;
 </syntaxhighlight>

@@ Zeile 4: / Zeile 4: @@
 <?php namespace ProcessWire;
-// SELEKTOREN
+$prependHomepage = 0;
-//$pa->get(1001)->my_selector = "template=projects"; // nur aus template = projects -> siehe auch MarkkupSimpleNavigation my_selector doku
+foreach($homepage->menus as $item) {
-$pa = $homepage->and($homepage->children("menus.id=1")); // nur aus seiten mit dem gesetzten Feld Menu.id = 1 (z.B. Hauptmenü)
+  if($item->id == 1) $prependHomepage = 1;
+$outer_tpl = '<ul class="w-list-unstyled ul-nav">||</ul>';
-$outer_tpl = '<ul class="nav-ul">||</ul>'; // äußerer ul tag
+$inner_tpl = '<ul>||</ul>';
-$inner_tpl = '<ul>||</ul>'; // innere ul tags bei multilevel
+$list_tpl = '<li%s data-ix="close-dropdown-on-hover">||</li>';
-$list_tpl = '<li%s>||</li>'; // klassen siehe unten
+$item_tpl = '<a href="{url}" data-ix="show-dropdown-on-hover" class="w-inline-block nav-link animsition-link"><h3 class="biger">{title}</h3></a>';
-$item_tpl = '<a href="{url}" class="a-nav">{title}</a>';
+$item_current_tpl = '<a href="{url}" data-ix="show-dropdown-on-hover" class="current w-inline-block nav-link animsition-link"><h3 class="biger">{title}</h3></a>';
-$item_current_tpl = ' <a href="{url}" class="a-nav">{title}</a>';
+$xitem_tpl = '<a href="{url}" data-ix="show-dropdown-on-hover" class="w-inline-block nav-link animsition-link"><h3 class="biger">{title}</h3></a>';
-//$xitem_tpl = ' <a href="{url}" class="a-nav">{title}</a>';
+$xitem_current_tpl = '<a href="{url}" data-ix="show-dropdown-on-hover" class="current w-inline-block nav-link animsition-link"><h3 class="biger">{title}</h3></a>';
@@ Zeile 29: / Zeile 34: @@
      'collapsed' => false,
      'show_root' => false,
      'outer_tpl' => $outer_tpl, // usually the ul part
      'inner_tpl' => $inner_tpl, // usually inner ul tags
@@ Zeile 38: / Zeile 41: @@
      'item_current_tpl' => $item_current_tpl,
      'xtemplates' => '',
      //'xitem_tpl' => $xitem_tpl,
      //'xitem_current_tpl' => $xitem_current_tpl,
      'date_format' => 'd.m.Y',
      'code_formatting' => false,
-     'debug' => false
+     'debug' => true
 );
 $out = '
-<nav>
+<div data-ix="hide-overlay-menu-on-load" class="overlay-menu">
-'.$myMenu->render($options,null,$pa).'
+	<div class="w-container port-contatiner">
-</nav>
+		<!-- NAVIGATION -->
 ';
 echo $out;
 </syntaxhighlight>