ProcessWire - Navigation Beispiele: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
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
 
$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>';
 
$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>';
$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
 
$myMenu = $modules->get("MarkupSimpleNavigation"); // load the module
Zeile 41: Zeile 38:
 
     'item_current_tpl' => $item_current_tpl,
 
     'item_current_tpl' => $item_current_tpl,
 
     'xtemplates' => '',
 
     'xtemplates' => '',
'selector' => $selector,
+
    'selector' => $selector,
    //'xitem_tpl' => $xitem_tpl,
 
    //'xitem_current_tpl' => $xitem_current_tpl,
 
 
     'date_format' => 'd.m.Y',
 
     'date_format' => 'd.m.Y',
 
     'code_formatting' => false,
 
     'code_formatting' => false,
     'debug' => true
+
     'debug' => false
 
);
 
);
 
$out = '
 
$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>
<nav>'.$myMenu->render($options,null,$pa).'
 
</nav>
 
</div>
 
</div>';
 
 
 
$out .= '
 
 
';
 
';
 
echo $out;
 
echo $out;
 
 
</syntaxhighlight>
 
</syntaxhighlight>
  

Version vom 18. Juni 2018, 17:17 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=" ul-nav">||</ul>';
$inner_tpl = '<ul>||</ul>';
$list_tpl = '<li%s>||</li>';//%s is where classes form parent_class etc. goes
$item_tpl = '<a href="{url}" class="nav-link">{headline|title}</a>';
$item_current_tpl ='<a href="{url}" class="current nav-link">{headline|title}</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,
    'date_format' => 'd.m.Y',
    'code_formatting' => false,
    'debug' => false
);
$out = '
<nav>
'.$myMenu->render($options,null,$pa).'
</nav>
';
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;