ProcessWire - Navigation Beispiele: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
Zeile 4: Zeile 4:
 
<?php namespace ProcessWire;
 
<?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;
 +
}
 +
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>';
$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>';
//$xitem_current_tpl = ' <a href="{url}" class="a-nav">{title}</a>';
 
  
  
Zeile 29: Zeile 34:
 
     'collapsed' => false,
 
     'collapsed' => false,
 
     'show_root' => false,
 
     'show_root' => false,
    'selector' => '',
 
    'selector_field' => 'nav_selector',
 
 
     'outer_tpl' => $outer_tpl, // usually the ul part
 
     'outer_tpl' => $outer_tpl, // usually the ul part
 
     'inner_tpl' => $inner_tpl, // usually inner ul tags
 
     'inner_tpl' => $inner_tpl, // usually inner ul tags
Zeile 38: Zeile 41:
 
     'item_current_tpl' => $item_current_tpl,
 
     'item_current_tpl' => $item_current_tpl,
 
     'xtemplates' => '',
 
     'xtemplates' => '',
 +
'selector' => $selector,
 
     //'xitem_tpl' => $xitem_tpl,
 
     //'xitem_tpl' => $xitem_tpl,
 
     //'xitem_current_tpl' => $xitem_current_tpl,
 
     //'xitem_current_tpl' => $xitem_current_tpl,
 
     'date_format' => 'd.m.Y',
 
     'date_format' => 'd.m.Y',
 
     'code_formatting' => false,
 
     'code_formatting' => false,
     'debug' => false
+
     'debug' => true
 
);
 
);
 
$out = '
 
$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 -->
 +
<nav>'.$myMenu->render($options,null,$pa).'
 +
</nav>
 +
</div>
 +
</div>';
 +
 
 +
$out .= '
 
';
 
';
 
echo $out;
 
echo $out;
 +
 
</syntaxhighlight>
 
</syntaxhighlight>
  

Version vom 18. Juni 2018, 17:13 Uhr

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;