Processwire Module: MarkupSimpleNavigation

MarkupSimpleNavigation

Bekanntestes Navigation Modul http://modules.processwire.com/modules/markup-simple-navigation/

Quickstart

nav-simpleTreeMenu.inc

<?php namespace ProcessWire;
// needs Plugin MarkupSimpleNavigation
// use $treeMenu = $modules->get("MarkupSimpleNavigation");
// load module in _init.php or heren like...
$treeMenu = $modules->get("MarkupSimpleNavigation");
$options = array(
    'parent_class' => 'parent',
    'current_class' => 'current',
    'has_children_class' => 'has_children',
    'levels' => true,
    'levels_prefix' => 'level-',
    'max_levels' => null,
    'firstlast' => false,
    'collapsed' => true,
    'show_root' => true,
    'selector' => '',
    'selector_field' => 'nav_selector',
    'outer_tpl' => '<ul class="sf-menu">||</ul>',
    'inner_tpl' => '<ul>||</ul>',
    'list_tpl' => '<li%s>||</li>',
    'list_field_class' => '',
    'item_tpl' => '<a href="{url}">{title}</a>',
    'item_current_tpl' => '<a href="{url}">{title}</a>',
    'xtemplates' => '',
    'xitem_tpl' => '<a href="{url}">{title}</a>',
    'xitem_current_tpl' => '<span>{title}</span>',
    'date_format' => 'd.m.Y',
    'code_formatting' => false,
    'debug' => false
);
?>

<!-- navbar 1st level-->
<div class="nav">
  <nav>
<?php

echo $treeMenu->render($options);

?>
  </nav>
</div>

Nur einen Level rendern

Top root menu

// default root is "/"
echo $treeMenu->render(array("max_levels" => 1));

Submenu

$root = $page->rootParent; // top root parent of current page
echo $treeMenu->render(array("max_levels" => 1), null, $root);

Funktionen und Anwendung

render($options, $page, $rootPage)

• $options, is an array of options
• $page, is a page object for the current page
• $rootPage, is a page object for the root of the menu

Default options

$options = array(
    'parent_class' => 'parent',
    'current_class' => 'current',
    'has_children_class' => 'has_children',
    'levels' => true,
    'levels_prefix' => 'level-',
    'max_levels' => null,
    'firstlast' => false,
    'collapsed' => false,
    'show_root' => false,
    'selector' => '',
    'selector_field' => 'nav_selector',
    'outer_tpl' => '<ul>||</ul>',
    'inner_tpl' => '<ul>||</ul>',
    'list_tpl' => '<li%s>||</li>',
    'list_field_class' => '',
    'item_tpl' => '<a href="{url}">{title}</a>',
    'item_current_tpl' => '<a href="{url}">{title}</a>',
    'xtemplates' => '',
    'xitem_tpl' => '<a href="{url}">{title}</a>',
    'xitem_current_tpl' => '<span>{title}</span>',
    'date_format' => 'Y/m/d',
    'code_formatting' => false,
    'debug' => false
);
echo $treeMenu->render($options);

Same with comments

$options = array(
    'parent_class' => 'parent',
    // overwrite class name for current parent levels

    'current_class' => 'current',
    // overwrite current class

    'has_children_class' => 'has_children',
    // overwrite class name for entries with children

    'levels' => true,
    // wether to output "level-1, level-2, ..." as css class in links

    'levels_prefix' => 'level-',
    // prefix string that will be used for level class

    'max_levels' => null,
    // set the max level rendered

    'firstlast' => false,
    // puts last,first class to link items

    'collapsed' => false,
    // if you want to auto-collapse the tree you set this to true

    'show_root' => false,
    // set this to true if you want to rootPage to get prepended to the menu

    'selector' => '',
    // define custom PW selector, you may sanitize values from user input

    'selector_field' => 'nav_selector',
    // string (default 'nav_selector') define custom PW selector by using a property or field on a page. Use this setting if you want to overwrite the default nav_selector

    'outer_tpl' => '<ul>||</ul>',
    // template string for the outer most wrapper. || will contain entries

    'inner_tpl' => '<ul>||</ul>',
    // template string for inner wrappers. || will contain entries

    'list_tpl' => '<li%s>||</li>',
    // template string for the items. || will contain entries, %s will replaced with class="..." string

    'list_field_class' => '', // string (default '') add custom classes to each list_tpl using tags like {field} i.e. {template} p_{id}

    'item_tpl' => '<a href="{url}">{title}</a>',
    // template string for the inner items. Use {anyfield} and {url}, i.e. {headline|title}, if field is of type image it will return url to image (first image if multiple)

    'item_current_tpl' => '<a href="{url}">{title}</a>',
    // template string for the active inner items.

    'xtemplates' => '',
    // specify one or more templates separated with a pipe | to use the xitem_tpl and xitem_current_tpl markup

    'xitem_tpl' => '<a href="{url}">{title}</a>',
    // same as 'item_tpl' but for xtemplates pages, can be used to define placeholders

    'xitem_current_tpl' => '<span>{title}</span>',
    // same as 'item_current_tpl' but for xtemplates pages

    'date_format' => 'Y/m/d',
    // default date formatting for Datetime fields and native created/modified

    'code_formatting' => false,
    // enable or disable code indentations and newslines in markup output

    'debug' => false,
    // show some inline information about rendertime and selectors used as html comments

);
echo $treeMenu->render($options);

More Examples

Aktive Seite oder Root Seite überschreiben

If you want to overwrite starting point for the root page to be another page you could do it like this:

$rootPage = $pages->get("/en/"); // or any other page that has subpages
echo $treeMenu->render(null, null, $rootPage); // null at first is to not have to specify options, just use default

Or to even overwrite the current active page

$currentPage = $pages->get(1242);
$rootPage = $pages->get("/en/");
echo $treeMenu->render(null, $currentPage, $rootPage);

Menü aus definierten Seiten

Dazu übergibt man ein PageArray statt einer einzelnen Seite.

Build a menu using a PageArray instead of a single root page

Define a PageArray as the root page argument. Instead of a root it will take the PageArray as the first level entries. This can be used to build a menu from a page select field for example.

Assuming you have a page field "navigation_entries" on your home root page:

$entries = $pages->get("/")->navigation_entries;
echo $treeMenu->render(null, null, $entries);

Dynamische Variable in der Navigation

Z.B. Feldnamen

'inner_tpl' => "

||

",

Selektoren und Filter

Man kann die Menüpunkte z.B. anhand von einem Backend-Feld oder Templates Filtern. Man kann sogar für einzelne Level Filter vergeben.

$pages->get(1001)->my_selector = "template=projects";

$options = array(
  "selector_level1" => "template=ressort",
  "selector_level2" => "start=0, limit=10",
  "selector_level3" => "template=news|events, sort=-created",
  "selector_field" => "my_selector"
);

echo $nav->render($options);

Beispiel - Menüauswahl

Todo Funktionalität genauer checken

$treeMenu = $modules->get("MarkupSimpleNavigation"); // load the module
$homepage->my_selector = "menus.id=1";
$options = array(
//...
		'max_levels' => 3,
		'show_root' => true,
		'selector' => '',
		'selector_field' => 'my_selector',
		'selector_level2' => 'menus.id=1',
		'selector_level3' => 'menus.id=1',
		'selector_level4' => 'menus.id=1'

);
$menu = $treeMenu->render($options);