ProcessWire - Navigation Beispiele

Aus Wikizone
Wechseln zu: Navigation, Suche

Mit MarkupSimpleNavigation Modul

Multilevel Navigation mit diversen Klassen

<?php namespace ProcessWire;

$prependHomepage = 0;
foreach($homepage->menus as $item) {
  if($item->id == 1) $prependHomepage = 1;
}
if($prependHomepage) {
	$pa = $homepage->and($homepage->children("menus.id=1")); 
}else $pa = $homepage->children("menus.id=1");
// additional MarkupSimpleNavigation Filter
$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>';
$inner_tpl = '<ul>||</ul>';
$list_tpl = '<li%s data-ix="close-dropdown-on-hover">||</li>';
$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_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>';
$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_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>';


$myMenu = $modules->get("MarkupSimpleNavigation"); // load the module
$options = array(
    'parent_class' => 'parent',	// goes in li classes
    'current_class' => 'current', // goes in li classes
    'has_children_class' => 'has_children', // goes in li classes
    'levels' => true,
    'levels_prefix' => 'l-',//goes in li classes
    'max_levels' => 4,
    'firstlast' => true,
    'collapsed' => false,
    'show_root' => false,
    'outer_tpl' => $outer_tpl, // usually the ul part
    'inner_tpl' => $inner_tpl, // usually inner ul tags
    'list_tpl' => $list_tpl,
    'list_field_class' => '',
    'item_tpl' => $item_tpl,
    'item_current_tpl' => $item_current_tpl,
    'xtemplates' => '',
		'selector' => $selector,
    //'xitem_tpl' => $xitem_tpl,
    //'xitem_current_tpl' => $xitem_current_tpl,
    'date_format' => 'd.m.Y',
    'code_formatting' => false,
    'debug' => true
);
$out = '
<div data-ix="hide-overlay-menu-on-load" class="overlay-menu">
	<div class="w-container port-contatiner">
		<!-- NAVIGATION -->
		<nav>'.$myMenu->render($options,null,$pa).'
		</nav>
	</div>
</div>';

$out .= '
';
echo $out;

Sidebar Navigation für MaterializeCSS

Beispiel orig. aus prantner.de. Nutzt ein Selectfeld um im Backen zu bestimmen ob eine Seite aufgeführt wird.

<?php namespace ProcessWire;

$pages->get(1001)->my_selector = "template=projects";
$pa = $homepage->and($homepage->children("menus.id=1"));


$outer_tpl = '<ul id="slide-out" class="sidenav">||</ul>';
//if($configpage->nav_type->value == 1) $outer_tpl = '<ul id="slide-out" class="sidenav sidenav-fixed">||</ul>';
$sideMenu = $modules->get("MarkupSimpleNavigation"); // load the module
$options = array(
    'parent_class' => 'parent',
    'current_class' => 'current',
    'has_children_class' => 'has_children',
    'levels' => true,
    'levels_prefix' => 'l-',
    'max_levels' => 4,
    'firstlast' => true,
    'collapsed' => false,
    'show_root' => false,
    'selector' => '',
    'selector_field' => 'nav_selector',
    'outer_tpl' => $outer_tpl,
    'inner_tpl' => '<ul>||</ul>',
    'list_tpl' => '<li%s>||</li>',
    'list_field_class' => '',
    'item_tpl' => '<a href="{url}">{title}</a>',
    'item_current_tpl' => '<a class="cur" href="{url}">{title}</a>',
    'xtemplates' => '',
    'xitem_tpl' => '<a href="{url}">{title}</a>',
    'xitem_current_tpl' => '<span class="cur">{title}</span>',
    'date_format' => 'd.m.Y',
    'code_formatting' => false,
    'debug' => false
);
$out = $sideMenu->render($options,null,$pa);

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