MarkupSimpleNavigation

[sambadave]

Wow, you guys are brilliant. That worked a charm. This forum has helped me out so many times. Thanks a lot.

My next step is to see if I can bring in a grayscale version of an image using the pageImage Manipulator module at http://modules.processwire.com/modules/page-image-manipulator/.

I'll try it out and see how far I get using your example above as guidance, before I pester you any further.

Thanks again for all the help.

[Peter Knight]

I presume this navigation module can be combined with the page fieldtype?

https://processwire.com/videos/page-fieldtype/

IE My client could pick and choose a bunch of pages they want to appear in a top navigation bar?

[marcus]

I presume this navigation module can be combined with the page fieldtype?

https://processwire.com/videos/page-fieldtype/

IE My client could pick and choose a bunch of pages they want to appear in a top navigation bar?

Sure, since you can define the rootPage:

$treeMenu = $modules->get("MarkupSimpleNavigation"); 
$rootPage = $page->iAmAPageReferenceField; 
echo $treeMenu->render(null, null, $rootPage);

edit: In the sense, that your customer could define a starting point

Edited August 16, 2014 by marcus

[Peter Knight]

Sure, since you can define the rootPage: 

I guess what I meant was slightly different?

I made a simple top navigation bar on my site. It's a global navigation bar beside the logo.

But I'm restricting the pages that appear here to 6 or 7 pages which my client chooses via the page fieldtype (called "Top_Navigation".

<div class="row">
<ul class='topnav'>
	<?php foreach ($pages->get(1)->Top_Navigation->find() as $topnav){echo "
        <li><a href='{$topnav->url}'>{$topnav->title}</li>
		";
	} ?>
</ul>
</div>

I was wondering how I could combine the above with 

	<?php 
	$treeMenu = $modules->get("MarkupSimpleNavigation"); // load the module
	echo $treeMenu->render(); // render default menu
	?>

allowing me to inject some classes into my list etc and specify active classes etc etc.

[Martijn Geerts]

I presume this navigation module can be combined with the page fieldtype?

https://processwire.com/videos/page-fieldtype/

IE My client could pick and choose a bunch of pages they want to appear in a top navigation bar?

See last 2 picture in the pedigree profile, if such a menu fits, you could download the profile.

The navigation function is located in /site/templates/inc/func.inc

[Soma]

There's no real support for this currently. But you could with a little trick, and use each selected page as root, and set some options to not have an outer template wrapper. Also a selector to not render children of 1th level for each root.

$menu = $modules->MarkupSimpleNavigation;

$output = '';

foreach($pages->get("/")->select_pages as $root) {
    $output .= $menu->render(array(
            "outer_tpl" => "||",
            "show_root" => true,
            "selector" => "template=basic-page, parent!=$root"
        ), null, $root);
}

echo "<ul>$output</ul>";

[Peter Knight]

Martijn

Thankyou - I have downloaded the pedigree profile and am looking at the .inc

Unfortunately, it's way beyond my level of PHP understanding. Although I have a sense of what it's doing, I couldn't confidently tweak it to my own requirements.

Mainly I'd like to combine this 

<div class="row">
<ul class='topnav'>
		<?php foreach ($pages->get(1)->Top_Navigation->find() as $topnav){echo "
        <li><a href='{$topnav->url}'>{$topnav->title}</li>
		";
	} ?>
</ul>
</div>

with MarkupSimpleNavigation but I cam not sure how to pass $topnav array to MarkupSimpleNavigation or vice versa.

[Peter Knight]

Thanks Soma

I hadn't seen your reply earlier.

it doesn't work for me but once again, it's my lack of php skills here showing. I guess I'm used to tags and Wayfinder and MODX doing all the hardwork for me.

[Soma]

Committed an little update and upped version to 1.3.3.

- added support for PageArray as the third argument. So instead of the root page you give it an PageArray.

https://github.com/somatonic/MarkupSimpleNavigation/blob/master/README.md#build-a-menu-using-a-pagearray-instead-of-a-single-root-page

So you can do now something like this to build the top level menu entries, where "navigation_entries" would be a page field for selecting pages.

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

Or this would also be possible

$menu = $modules->MarkupSimpleNavigation;

// get a PageArray from a simple search
$entries = $pages->find("template=basic-page");
$options = array("max_levels" => 1);
echo $menu->render($options, null, $entries);

@sparrow

In your case you could now simply do use your "Top_Navigation" as the third argument.

$menu = $modules->MarkupSimpleNavigation;
$options = array("max_levels" => 1);
echo $menu->render($options, null, $pages->get(1)->Top_Navigation);

[Peter Knight]

Wonderful. Thank you so much. I'll try this on Monday.

[NooseLadder]

Hi,

I'm using this module and am pleased with it. My client has asked if we can display a child page also as a level 1 page in the menu. The only way I can quickly think of doing this is to duplicate the child page at level 1. Has anyone got any better ideas?

PAGE TREE

MENU

[arjen]

This might work:

$extraChild = $pages->get("/extra-child/etc/"); // First get the specific page you want
if ($extraChild->id) $extraChild = "<li><a href='{$extraChild->url}'>{$extraChild->title}</a></li>"; // If the page exists wrap it in a list-item

$options = array(
    'outer_tpl' => '<ul>||$extraChild</ul>', // Append the $extraChild before the closing outer unordered list
    );
echo $treeMenu->render($options); // Render the whole thing

Or create a checkbox called append_menu and use that to get the data to the end. Another option is to create a page field with an asmselect on the homepage which let you select all the pages you want to append. This way you have all the flexibility you need. 

But really if the page is so important, why not set it on the top level in the first place? I think this is really confusing to users and could potentially harm your usability.

[Soma]

There's a option to set a PageArray as the root page

https://github.com/somatonic/MarkupSimpleNavigation#build-a-menu-using-a-pagearray-instead-of-a-single-root-page

So you could very well create a top level menu with a multiple page select using asm select for input so you could sort them.

Or get the top level pages and then append or insert a page

$items = $pages->get("/")->children();
$other_item = $pages->get(1234);
if($other_item->id) $items->append();

echo $treeMenu->render(null, null, $items);

[NooseLadder]

Thanks both for the replies. Unfortunately the client has now changed his mind but I will keep this for the future. I'm sure I will need it at some point.

[arjen]

Unfortunately? I would say he'd come to his senses 

[Soma]

"Unfortunately" cause you and I've spend hours to think, link and respond

[NooseLadder]

Unfortunately? I would say he'd come to his senses 

Unfortunately, this is almost impossible. 

"Unfortunately" cause you and I've spend hours to think, link and respond

Exactly 

[arjen]

Soma, as a master of sarcasm I would have thought you noticed mine sarcasm    

[opalepatrick]

I have two websites using the exact same code with version 1.3.2. There is one dropdown element. On one site the top level element is duplicated in the dropdown on the other it is not (the preferred setup)

$treeMenu = $modules->get("MarkupSimpleNavigation"); // load the module
					$options = array(
					    'parent_class' => 'parent',
					    'current_class' => 'active',
					    'has_children_class' => 'has-dropdown',
					    'levels' => false,
					    'levels_prefix' => 'level-',
					    'max_levels' => null,
					    'firstlast' => false,
					    'collapsed' => false,
					    'show_root' => true,
					    'selector' => '',
					    'outer_tpl' => '<ul class="toppad right">||',
					    'inner_tpl' => '<ul class="dropdown">||</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' => '<span>{title}</span>',
					    'xitem_current_tpl' => '<span>{title}</span>'
					);
					echo $treeMenu->render($options);

I must be missing something? Can anyone find the needle or at least point me to the right bit of the haystack? Thanks in advance. I posted the code but suspect it may be something in the admin area.

[Mike Rockett]

Okay, so I'm playing around with this module to see if it'll work for my sites. First glance, looks good to me - very simple; easy to use.

That said, I have two queries (and sorry if they have already been mentioned - but 19 pages is a bit much for me today):

1. How can I copy first-level links into their children, if they have any? Ex: I have:

- Home
- About Us
  - Certification
  - Management Board
- What We Do
- Etc.

I'd like to have this:

- Home
- About Us
  - About Us (using alternative title specified in editor - in my case, "Overview")
  - Certification
  - Management Board
- What We Do
- Etc.

I know I can do this: "inner_tpl" => '<ul id="{name}" class="theDrop"><li><a id="{alt_name}" href="{url}">{title}</a></li>||</ul>', but that'll break showing current links... (Any way I can import tpls into this one?)

2. How can I highlight parents of active/current links?

So, if "Certification" is current, then "About Us" should be current as well. This should apply to the links, and not the list items, as parent_class does. In fact, I want to add data-current to the parent link of the current page.

These are the two things that I need the most (I hope they can be done easily...) - everything else is perfect; thank you for that.

[Soma]

@mike

1. It's not possible to add a extra link as overview like you mention. This module parses your tree and needs physical pages to work with.

If you really need this you have to build a page for it or use javascript to add the overview link to the list (I'm doing this in one project).

2. The parent of the active entry will get the class as defined in option "parent_class" so default is <li class="parent"> It's all documented here http://modules.processwire.com/modules/markup-simple-navigation/

This module adds classes to li's and not anchors for a good reason as that is much more flexible. There's no option to change that.

So if you need such special cases you're up to use javascript. Or us php str_replace() to replace something on the returned markup. Let's see if you want to change class="parent" for parent li's you'd maybe do this

$markup = $nav->render($options);
$markup = str_replace("<li class='parent'", "<li data-current", $markup);

Also there's some method to hook into and change things on items or lists, there's plenty examples in this thread and in the doc.

[Soma]

I have two websites using the exact same code with version 1.3.2. There is one dropdown element. On one site the top level element is duplicated in the dropdown on the other it is not (the preferred setup)

$treeMenu = $modules->get("MarkupSimpleNavigation"); // load the module
					$options = array(
					    'parent_class' => 'parent',
					    'current_class' => 'active',
					    'has_children_class' => 'has-dropdown',
					    'levels' => false,
					    'levels_prefix' => 'level-',
					    'max_levels' => null,
					    'firstlast' => false,
					    'collapsed' => false,
					    'show_root' => true,
					    'selector' => '',
					    'outer_tpl' => '<ul class="toppad right">||',
					    'inner_tpl' => '<ul class="dropdown">||</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' => '<span>{title}</span>',
					    'xitem_current_tpl' => '<span>{title}</span>'
					);
					echo $treeMenu->render($options);

I must be missing something? Can anyone find the needle or at least point me to the right bit of the haystack? Thanks in advance. I posted the code but suspect it may be something in the admin area.

I'm not sure I understand, but this module doesn't duplicate anything, so I'd guess it must be you.

[Mike Rockett]

@Soma - thanks indeed, I'll work with it that way then. That said, I may attempt to modify the module to my needs - specifically, I care only for the duplication of parents into their children at the root level. The data-current issue is no biggie - it's really just specific to the site I'm working on now.

[opalepatrick]

OK thanks Soma. After a lot of digging around I worked out that it was a foundation 5 javascript option being mis-applied by default. In case anyone else is having the same problem with topbar in foundation 5, then add 

data-options="mobile_show_parent_link: false"

to the nav element

[ndolph]

I need to modify a menu a bit...

I've got an events page, with individual events as children.

It goes

events-list

>event 1
>event 2

>event 3

Sorted by the event date.

I want to limit the way the menu shows that.. I want only the next 5 upcoming events shown, with a menu break at the bottom, and then a link at the very bottom to "View all Events"

Not sure how to accomplish this really...

Also, how do I make it so that the menu will not render a dropdown for children of X page? And how do I exclude pages from appearing in the menu all together? Preferrably using a checkbox field?