ProcessWire - Navigation Beispiele: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
Zeile 1: Zeile 1:
 
== Mit MarkupSimpleNavigation Modul ==
 
== Mit MarkupSimpleNavigation Modul ==
 +
=== Multilevel Navigation mit diversen Klassen ==
 +
<syntaxhighlight lang="php">
 +
<?php namespace ProcessWire;
 +
 +
// SELEKTOREN
 +
//$pa->get(1001)->my_selector = "template=projects"; // nur aus template = projects
 +
$pa = $homepage->and($homepage->children("menus.id=1")); // nur aus seiten mit dem gesetzten Feld Menu.id = 1 (z.B. Hauptmenü)
 +
 +
 +
$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,
 +
    'selector' => '',
 +
    'selector_field' => 'nav_selector',
 +
    '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' => '',
 +
    //'xitem_tpl' => $xitem_tpl,
 +
    //'xitem_current_tpl' => $xitem_current_tpl,
 +
    'date_format' => 'd.m.Y',
 +
    'code_formatting' => false,
 +
    'debug' => false
 +
);
 +
$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;
 +
</syntaxhighlight>
 +
 
=== Sidebar Navigation für MaterializeCSS ===
 
=== Sidebar Navigation für MaterializeCSS ===
 
Beispiel orig. aus prantner.de. Nutzt ein Selectfeld um im Backen zu bestimmen ob eine Seite aufgeführt wird.  
 
Beispiel orig. aus prantner.de. Nutzt ein Selectfeld um im Backen zu bestimmen ob eine Seite aufgeführt wird.  

Version vom 18. Juni 2018, 12:37 Uhr

Mit MarkupSimpleNavigation Modul

= Multilevel Navigation mit diversen Klassen

<?php namespace ProcessWire;

// SELEKTOREN
//$pa->get(1001)->my_selector = "template=projects"; // nur aus template = projects
$pa = $homepage->and($homepage->children("menus.id=1")); // nur aus seiten mit dem gesetzten Feld Menu.id = 1 (z.B. Hauptmenü)


$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,
    'selector' => '',
    'selector_field' => 'nav_selector',
    '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' => '',
    //'xitem_tpl' => $xitem_tpl,
    //'xitem_current_tpl' => $xitem_current_tpl,
    'date_format' => 'd.m.Y',
    'code_formatting' => false,
    'debug' => false
);
$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;