Jump to content

MarkupSimpleNavigation


Soma

Recommended Posts

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.

Link to comment
Share on other sites

  • 2 weeks later...

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 by marcus
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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>";
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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);
  • Like 9
Link to comment
Share on other sites

  • 3 months later...

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

post-564-0-88592800-1417003751_thumb.jpg

MENU

post-564-0-66592600-1417003750_thumb.jpg

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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);
  • Like 3
Link to comment
Share on other sites

  • 3 weeks later...

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.

Link to comment
Share on other sites

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. :-)

Link to comment
Share on other sites

@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.

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

  • 2 weeks later...

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

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

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?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...