Pushy Menu

Quickstart

• Paket z.B. unter Vendors einfügen

Beispiel für Processwire

Todo Optimize Code

nav_pushy.inc

<?php namespace ProcessWire;
function renderPushyMenu($items, $maxDepth = 0, $fieldNames = '', $options = array('level' => 0, 'ulClass' => '', 'liClass' => '', 'aClass' => '') ) {

	// if we were given a single Page rather than a group of them, we'll pretend they
	// gave us a group of them (a group/array of 1)
	if($items instanceof Page) $items = array($items);
	$out = '';
  $c = 0;
  $liClasses = array();
  $ulClasses = array();
	$level = 0;
	$liClass = '';
	$ulClass = '';

	if(!empty($options['level'])) $level = $options['level'];
	if(!empty($options['ulClass'])) {
		$ulClasses[] = $options['ulClass'];
		$ulClass = $options['ulClass'];
	}

	if(!empty($options['liClass'])) {
		$liClasses[] = $options['liClass'];
		$liClass = $options['liClass'];
	}

	// cycle through all the items
	foreach($items as $item) {
    //$level = count($page->parents);
		// LI ITEM
		$classes = $liClasses;
    //if($item->id == wire('page')->id) $classes[] = 'cur';
		if($item->hasChildren) {
      // BUTTON instead of Link
      $out .= '<li class="pushy-submenu"><button>'.$item->title.'</button>';
		}else{
      $classes[] = 'level-'.$level;
  		$out .= '<li class="'.implode($classes,' ').'">';
      unset($classes);

  		// A ITEM
  		$navigation_type = $item->navigation_type->id;
  		$classes = $liClasses;
  		switch ( $navigation_type ) {
  			case 2: // do not link
  				$out .= '<span class="spacer">'.$item->title.'</span>';
  				break;
  			case 3: // link to subpage
  				if( $item->hasChildren() ){
  					$out .= '<a href="'.$item->child->url.'" class="ajax-link">'.$item->title.'</a>';
  				}else{
  					$out .= "<span class='spacer'>$item->title</span>";
  				}
  				break;
  			default:
  				$out .= '<a href="'.$item->url.'" class="ajax-link">'.$item->title.'</a>';
  				break;
  		}
  		unset($classes);
		}
		// if there are extra field names specified, render markup for each one in a <div>
		// having a class name the same as the field name
		if($fieldNames) foreach(explode(' ', $fieldNames) as $fieldName) {
			$value = $item->get($fieldName);
			if($value) $out .= " <div class='$fieldName'>$value</div>";
		}

		// if the item has children and we're allowed to output tree navigation (maxDepth)
		// then call this same function again for the item's children
		if($item->hasChildren() && $maxDepth) {
			//if($class == 'nav') $class = 'nav nav-tree';
			$nextLevelOptions = array('level' => $level+1, 'ulClass' => '', 'liClass' => $liClass);
			$out .= renderNavTreeType($item->children, $maxDepth-1, $fieldNames, $nextLevelOptions);
		}

		// close the list item
		$out .= "</li>\n";
	}

	// if output was generated above, wrap it in a <ul>

	if($out) $out = "\n".'<ul class="'.implode($ulClasses,' ').'">'."\n".$out.'</ul>'."\n";

	// return the markup we generated above
	return $out;
}

?>
<!-- navbar 1st level-->
<nav class="pushy pushy-left">
  <div class="pushy-content">
<?
$pa = $homepage->children("menus.id=1"); //only main menu items
$options = array('level' => '1', 'ulClass' => '', 'liClass' => 'pushy-link', 'aClass' => '');
echo "
  <div class='logo-side'>
    <a href='{$homepage->url}' title='Home-Link' alt='Home-Link'>
      <img src='{$config->urls->templates}img/logo-mobile.png' style='width: 80px; margin-top: 30px;'>
    </a>
  </div>
  <div>".renderPushyMenu($pa, $maxDepth = 1, $fieldNames = '', $options)."</div>
  </div></nav><div class='site-overlay'></div>";
?>

Probleme lösen

Pfeile werden nicht angezeigt

Lösung: Server nimmt falschen Mime Type. Zur htaccess Datei folgendes hinzufügen:

AddType image/svg+xml .svg .svgz