MarkupSimpleNavigation

[bbeer]

That problem seems to be solved, don't ask why but it works now.

[dragan]

Sorry for replying back so late, but it's been a hectic (and hot) week...

I guess the reason it didn't work, was simply because some pages didn't have the correct / updated template .php assigned, and thus missing a newer include file.

Mea culpa! 

Thou shalt not multitask, unless you are a machine. 

<slighlty off-topic>

Seriously now - I really believe multitasking should be left to computers, not humans. I guess I was trying to build / fix / update too many things at once. And as is always the case in such situtations, small (but important) details get easily overlooked.

</slighlty off-topic>

[nfil]

Hi, I'am testing your module with this menu http://voky.com.ua/demo/pcss3mm/

I have this to load the module and test the different module arrays: 

  <?php

$treeMenu = $modules->get("MarkupSimpleNavigation"); // load the module
$options = array(
    'parent_class' => 'parent',
    'current_class' => 'current',
    'has_children_class' => 'has_children',
    'levels' => true,
    'levels_prefix' => '||',
    'max_levels' => 2,
    'firstlast' => false,
    'collapsed' => false,
    'show_root' => false,
    'selector' => '',
    'outer_tpl' => '<ul id="pcss3mm" class="pcss3mm">||</ul>',
    'inner_tpl' => '||',
    'list_tpl' => '<li>||</li>',
    'list_field_class' => '',
    'item_tpl' => '<a href="{url}" title="{title}">{title}</a>',
    'item_current_tpl' => '<a href="{url}" title="{title}" >{title}</a>',
    'xtemplates' => '',
    'xitem_tpl' => '<span>{title}</span>',
    'xitem_current_tpl' => '<span>{title}</span>'
);
echo $treeMenu->render($options);
			

?>

I'am trying to get all the pages on my pWire admin  (excluding the home page) and show a dropdown menu for the parents page, yet I'am getting the child pages in the root menu front side page menu. How can I display the child page on the drop down menu? I tested <li class="dropdown"> yet I'am probably doing something wrong on the module arrays? 

<li class="dropdown">
					<a href="#"><i class="icon-briefcase"></i>Portfolio</a><b></b>
					<div class="grid-container3">
						<ul>
							<li><a href="#"><i class="icon-lemon"></i>Logos</a></li>
							<li><a href="#"><i class="icon-globe"></i>Websites</a></li>
							<li><a href="#"><i class="icon-th-large"></i>Branding</a></li>
							<li><a href="#"><i class="icon-picture"></i>Illustrations</a></li>
						</ul>
					</div>
				</li>

Thanks in advance.

[Soma]

I think this would translate to something like this only setting what would be non-default:

$treeMenu = $modules->get("MarkupSimpleNavigation"); // load the module
$options = array(
    'has_children_class' => 'dropdown',
    'max_levels' => 2,
    'outer_tpl' => '<ul id="pcss3mm" class="pcss3mm">||</ul>',
    'inner_tpl' => '<div class="grid-container3"><ul>||</ul></div>',
    'item_tpl' => '<a href="{url}" title="{title}">{title}</a>',
    'item_current_tpl' => '<a href="{url}" title="{title}" >{title}</a>'
);
echo $treeMenu->render($options);
 

[nfil]

Thanks Soma. You did it again, I was missing the logic of the array has_children_class I test a few settings but I started the wrong way because of that array.
Now I understand the logic of your great module to render the pWire pages into a navigation menu.

I hope I finish my first pWire project in a few weeks and post it here in the noob/sites section.
Thanks again Soma for the great support and work to enhance pWire features!

[dragan]

How difficult would it be to create a module version that supports the new 2.3.2 multilang features?

i.e. if I use the Language Support Page Names module, Lang-Fields + URL-segments.

exactly as described here: http://processwire.com/api/multi-language-support/multi-language-urls/

Creating mulitlang-links with the API is now a breeze:

$userLang = '';
if(!$user->language->isDefault()) $userLang = $user->language->name;
$myURL = $pages->get(foo)->url . $userLang; // append language code

Would I simply have to change something here ? (lines 267 of your module): 

// if page object from a page field get its url
else if($f instanceof Page){
    $field_value = $f->url;

Maybe adding an optional parameter like "multilangAware"?

[Soma]

This module already work with LanguageSupportPageNames module and is multi language aware, it's no any different than if you would create your own with $page->url. With PW multi language support you don't need anything different than without.

[dragan]

Well, here, it does show correct page-titles, but it omits the last URL-segment, and so it always jumps back to the default URL :-| 

btw: I installed a fresh new 2.3.2 with MSN module, and it does the same.

languages are setup, all text-fields are multilang, all templates have URL-segments enabled, and in the header there's something like

if($input->urlSegment1 == 'de') $user->language = $languages->get('de');
if($input->urlSegment1 == 'fr') $user->language = $languages->get('fr');

if(!$input->urlSegment1) $user->language = $languages->get('default'); // english

[Soma]

The LanguageSupportPageNames doesn't have url segments at the end but at the start. I don't plan to support any other unusual url segment construction with this module.

[Soma]

Means not it's not possible with adding language segment to url via item templates, I don't see any problem anyway.

$lang = "de";
'item_tpl' => "<a href='/{url}$lang'>{title}</a>";

[dragan]

Excellent! That worked like a charm. Thank you.

[Soma]

Here I did an example for creating a Boostrap 2.3.2 Multilevel Navbar with MarkupSimpleNavigation
 
https://gist.github.com/somatonic/6258081
 
I use hooks to manipulate certain attributes and classes to li's and anchors. If you understand the concept you can do a lot with these tools.
 

[Soma]

As I wrote the example is for Bootstrap 2.3.2. I have no idea what BS 3.0 needs... but I'm lucky I don't use Bootstrap because it's annoying

[Soma]

Well apart from I don't know "what does not work" ... as I can't see your screen from here...

Looks like you don't render the menu from the root level, although you don't give another root page to the nav render, so makes no sense to me.

<li class="dropdown"><a href="/corpetrol/programas-tecnicos/">Programas Técnicos</a>

This should be the first level dropdown, and it's missing the class and data attribute, but the URL is showing it's not a root page but a second level page already.

So the hooks check for the level and since you seem to be on another level you'd have to change that to fit you structure.

Those are the count($item->parents)

if($item->numChildren(true) && count($item->parents) < 2){ ... } // only on level 1

I guess you have to adapt those.

[Soma]

Ah subdirectory... but then it should work as is. Do you have the latest version of the module?

[Soma]

Ah, now I see there's a change in my local MarkupSimpleNavigation module I did and haven't committed.

So when using my code exmple with 1.1.9 it throws this error:

Error: Exception: Method MarkupSimpleNavigation::___getItemString() does not exist (in /Applications/XAMPP/xamppfiles/htdocs/pw2-dev/wire/core/HookEvent.php line 153)
#0 /Applications/XAMPP/xamppfiles/htdocs/pw2-dev/wire/core/HookEvent.php(153): ReflectionMethod->__construct(Object(MarkupSimpleNavigation), '___getItemStrin...')

THere's a hook function I added which doesn't exist in current latest version, so it doesn't work.

If you'd told me the error it would've been easy...

I updated my code example and will delete your code to keep this thread cleaner.

[Soma]

Edit: just updated the module to 1.2.0 to commit addition I've done regarding the hook I've used in the original example.

Now the MarkupSimpleNavigation::getItemString() exists if you update to the latest version and can be used instead of getTagsString(). I know it sound strange but I didn't like the function name for the hook and didn't want to break backward compatibility that's why I added an additional function that suits better.

[dragan]

Not sure if this is the right right thread to post this question, or if it rather belongs in a "selector" thread.

Is it generally possible to nest selectors?

With MarkupSimpleNavigation, I'd like to use a selector only for a certain template, e.g.

if template == 'product' -> use selector 'hide_fr<1'

In other words, not show links where the checkbox "hide_fr" is selected. I know I could use the multilang settings tab "active" - but the problem is, sometimes there are products (pages) that are supposed to also be hidden for the default language - and that one is always active (of course).

Any ideas how I could solve this?

I know I know, another very unusual / "exotic" situation - but sadly, some clients tend to change specs several times a day

[Soma]

I'm not sure I understand fully what you saying. No you can not nest selectors, what ever that would mean exactly.

To hide pages with "hide_fr" checked you would simply use

"selector" => "hide_fr=''",

Also I'm not sure why you can't simply use "active" option, If the default language should not be shown you would simply hide the page or unpublish it.

[dragan]

Well, with a multilang setup, you can either hide / publish the entire page altogether (for all languages) - there's no "hidden" / "unpublished" checkbox per language - there's only the "active" checkbox for all alternative languages under "settings".

"selector" => "hide_de < 1",

unfortunately doesn't work - tried it. Problem is, only one particular template is using these checkboxes. If I use that selector with MUSN, nothing gets rendered at all.

I use MUSN "globally" for the main left navigation (3 levels down, various templates).

That's what I meant with "nested selector arguments": "only apply this selector, when we traverse through pages with template 'product'", if that makes sense... (in a strictly MUSN context).

I guess I'll try an approach with the 'xtemplates' option, add some custom CSS and hopefully being able to visually hide the unwanted items in the rendered nav.

[Soma]

I have had changed my example to

"selector" => "hide_fr=''",

Works fine.

[dragan]

Oh, didn't notice it. Changed it here as well, and indeed - now it works. Thanks!

[peterfoeng]

Hi guys,

I have two questions regarding this module to see if it is possible to:

output something like (basically 2 level navigation but with custom parent output):

<div>
  {$page->title}</h3>
  <ul>
    <li>Sub item 1</li>
    <li>Sub item 2</li>
    <li>Sub item 3</li>
  </ul>
<div>
<div>
  {$page->title}</h3>
  <ul>
    <li>Sub item 1</li>
    <li>Sub item 2</li>
    <li>Sub item 3</li>
  </ul>
<div>
etc

also can we output custom class based on the position of the menu item? Say I want every second item in the list (item 2, item 4, and so on) to have a class 'second-item-position'

<ul>
  <li>item 1</li>
  <li class="even">item 2</li>
  <li>item 3</li>
  <li class="even">item 4</li>
</ul>

This is my first post and thanks Soma for this beautiful module - as I am building my first PW site so I am still not that familiar with the API but the community here is fantastic and I am looking forward to post my first studycase using PW

[vxda]

Hi, can i exclude showing children for parent with id="x" ? ? ( hide children for parent->id('1022'))

i got my menu and in it is News page i dont want to show children on hover.

Ty.

[Soma]

Welcome @peterofeng

I'm not sure I understand

<div>
  {$page->title}</h3>
  <ul>
    <li>Sub item 1</li>
    <li>Sub item 2</li>
    <li>Sub item 3</li>
  </ul>
<div>
<div>
  {$page->title}</h3>
  <ul>
    <li>Sub item 1</li>
    <li>Sub item 2</li>
    <li>Sub item 3</li>
  </ul>
<div>

This isn't a 2 level navigation. And the UL you could generate with the module but just for a simple navigation like this you could make it with your own simple foreach code.

<ul>
  <li>item 1</li>
  <li class="even">item 2</li>
  <li>item 3</li>
  <li class="even">item 4</li>
</ul>

Same with this. It isn't supported by the module, but you could simply use css nth-child(odd) or jQuery to produce this.

Hi, can i exclude showing children for parent with id="x" ? ? ( hide children for parent->id('1022'))

i got my menu and in it is News page i dont want to show children on hover.

Ty.

Not exactly sure, but you could try:

'selector' => 'parent!=1022|1002'