MarkupSimpleNavigation

[theo]

I wrote some code for BS4 Nav this morning for myself.

Maybe it helps. If it is not 100% what you need, it should be very easy to change the code in echoBS4Nav and echoBS4children.

Use like this:
 

<nav class="navbar etc.....
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<?php
require_once 'turbopw.php';
$myTurbo = new ProcessWire\TurboPW($wire);
$myTurbo->echoBS4Nav("id!=1,has_parent!=2", '../');
?>
</div>

http://theowp.bplaced.net/upload/turbopw.zip

Attention, the code is very fresh! And it is not as comfortable as MenuBuilder or MSN.

Just sharing.

The rest of the code in this file has to do with the thread below. Don't worry.

 

[barneyy]

On 6.3.2018 at 11:24 AM, Soma said:

I meant there is in the example if you remove the <ul> from the options, it would results in <ul><div><li>...</li></div></ul>, not saying bootstrap has.

I tried with a special hook to remove the <li>' on the level greater than 1. Does that work for you?

$nav = $modules->get('MarkupSimpleNavigation');

$options = array(
    'has_children_class' => 'dropdown',
    'list_tpl' => '<li%s>||</li>',
    'current_class' => 'active',
    'list_field_class' => 'nav-item',
    'max_levels' => 2,
    'item_tpl' => '<a class="nav-link gek-anim" href="{url}">{title}</a>',
    'outer_tpl' => '<ul class="navbar-nav ml-auto">||</ul>',
    'inner_tpl' => '<div class="dropdown-menu">||</div>',
    'item_current_tpl' => '<a class="nav-link active" href="{url}">{title}</a>',
);

$nav->addHookBefore("getListString", null, function($event){
    $msn = $event->object;
    if($msn->iteration > 1){ // on level 2 and greater 
        $msn->list_tpl = array("","");
    } else {
        $msn->list_tpl = array("<li%s>","</li>");
    }
});

$sidebar .= $nav->render($options);

 

ok @Soma, thanks soma for your help. There is another small problem, wich i can solve with overwrite this bootstrap.scss. The last problem is, that the <a>-tags in <div class="dropdown-menu">needs another class. With your 'Hook' (?) the a-tags getting class="nav-item" - bootstrap wants to have the <a>-tags with the class "dropdown-item".... In my opinion the bootstrap-structure is much to complex.

I tested your solution only in a short break of my work, i'll give it a try as soon as possible - maybe begining of the next week - and will have a look to the other replies to my topics.......

thx in advance

Edited March 8, 2018 by horst
deleted inapropriate wording!

[Christophe]

Hi, 

No swear/bad words please (even with *s)!

These Forums are currently quite free from them.

Thanks in advance.

Have a nice day!

Edited March 8, 2018 by Christophe

[barneyy]

@kongondo & @Soma & @bernhard Thanks for your Help and time.... I'm sorry for wrong words. Good Luck & good night...

[Jon]

Hello, just wondering if the following is possible ive setting up a uikit menu. I have adjusted the inter_tpl to wrap the some additional DIVs around the UL. Which works fine I also need to have the inner inner UL with a different DIV around them or at the very least just default back to a UL without the additional tags. Ive tried the following code but this seems to close the the first UL of the menu after the first dropdown occurrence

    $menu->addHookAfter('getInnerStringOpen', null, 'customInnerString');
    function customInnerString(HookEvent $event){
        $item = $event->arguments('page');
        if($item->numChildren(true) && count($item->parents) > 1){
            $event->return = '<ul class="testtest">';
        }
    }

  

Iam trying to achieve this

 

<ul>
  <li>Level 1 Nav</li>
  <li class="has-sub">Level 2
		<div class="submenu">
    	<ul class="has-sub">
          <li>Item 2.1</li>
          <li class="has-sub">Level 3
            <div class="anothersub">
              <ul>
                <li>Item 3.1</li>
              </ul>
            </div>
          </li> 
          </ul></div>
   </li>
</ul>

 

[gmclelland]

Hello @Soma, thank you for providing this module.  On one site in production, I noticed that for some reason the top level menu items change randomly in a different order.  On a page I can keep hitting the refresh button and the menu items will randomly change order.

My tree order looks like this:

Home

• About Us
• Support Us
• Resources
• Memberships

Sometimes the menu is rendered correctly and other times it renders like:

Home

• About Us
• Support Us
• Memberships
• Resources

Here is how I'm calling it: (Note: I'm using the TemplateEngineFactory module.  That is why you see the $view->set)

Spoiler

$view->set('mainMenu', $modules->get("MarkupSimpleNavigation")->render(array(
    'parent_class' => 'selected',
    'current_class' => 'selected',
    'has_children_class' => 'has-children is-dropdown-submenu-parent',
    'levels' => true,
    'levels_prefix' => 'level-',
    'max_levels' => 4,
    'firstlast' => true,
    'collapsed' => false,
    'show_root' => true,
    'selector' => 'template!=news|calendar-posting|community-event, hide_from_menus=0, sort=sort',
    'outer_tpl' => '<ul class="dropdown menu level-0" data-dropdown-menu data-force-follow="true">||</ul>',
    'inner_tpl' => '<ul class="menu sub-menu">||</ul>',
    'list_tpl' => '<li%s>||</li>',
    'list_field_class' => '',
    'item_tpl' => '<a href="{url}">{menu_title|title}</a>',
    'item_current_tpl' => '<a href="{url}">{menu_title|title}</a>',
    'code_formatting' => false,
    'debug' => false
)));

 

I have also tried it without the sort=sort, but I have the same random results.

Does anybody have any ideas as to why I'm seeing this problem?

I'm running Processwire 3.0.101.

Thank you for any help you can provide.

[gmclelland]

I just wanted to follow up and say that my issue is strangely now gone after upgrading from Processwire 3.0.101 to 3.0.102

[Roych]

Hello,

I'm having trouble creatin a menu. It wont work I tried all sorts of things here, I just got lost, not sure what to do to make it work.

The original HTML looks like this: It looks simple but Im out of ideas ?

<ul class="nav navbar-nav">
	<li class="dropdown active"> <a href="index.html">Home</a></li>
	<li class="dropdown"> <a href="index.htm#" data-toggle="dropdown" class="dropdown-toggle js-activated">Contact<b class="caret"></b></a>
      <ul class="dropdown-menu">
          <li><a href="room-list.html">Contact 1</a></li>
          <li><a href="room-detail.html">Contact 2</a></li>
      </ul>
	</li>
</ul>

tried with:

    'parent_class' => '',
    'current_class' => 'active',
    'has_children_class' => 'dropdown',
    'levels' => true,
    'levels_prefix' => 'level-',
    'max_levels' => null,
    'firstlast' => false,
    'collapsed' => false,
    'show_root' => true,
    'selector' => 'template!=',
    'selector_field' => '',
    'outer_tpl' => '
	<ul class="nav navbar-nav">||</ul>',
    'inner_tpl' => '<ul class="dropdown-menu">||</ul>',
    'list_tpl' => '<li%s>||</li>',
    'list_field_class' => '',
    'item_tpl' => '<a href="{url}" data-toggle="dropdown" class="dropdown-toggle js-activated">{title}</a>',
    'item_current_tpl' => '<a href="{url}">{title}</a>',
    'xtemplates' => '',
    'xitem_tpl' => '<a href="{url}">{title}</a>',
    'xitem_current_tpl' => '{title}',
    'date_format' => 'Y/m/d',
    'code_formatting' => false,
    'debug' => false

It won't work. and not sure how to put the dropdown <b class="caret"></b> inside also.

Please any help is appreciated.

Thank you

R

[Soma]

@Roych there's various examples around. If you read the first post you'll see a link to a gist for a bootstrap navigation. Not sure if that's what you need.

[Roych]

On 6/7/2018 at 10:13 AM, Soma said:

@Roych there's various examples around. If you read the first post you'll see a link to a gist for a bootstrap navigation. Not sure if that's what you need.

Thank you, forgot about the first post, lol ?

R

[Peter Knight]

On 5/7/2016 at 2:19 PM, Ivan Gretsky said:

@Peter Knight: I believe it is this option:

'current_class' => 'active'

 

This doesn't seem to work. It only applies 'active' to the active child link.

On a drop down menu any page/link that is active should have it's root parent marked as active too.

On my example a user has no obvious indicator of what 'section' they are on just by looking at the top navigation bar.

[dragan]

That depends on your CSS. I have a setup with a flyout menu that goes 3 levels down and all active parents are indeed red, e.g.

#primary-menu ul li.parent > a {
	color: #e31231;
}

 

[Soma]

On 6/25/2018 at 10:16 AM, bud said:

Hi everyone, could may somenone help?

Let's say I have the following navigation in my sidebar (which works just fine with the very default settings of MSN-module).

Home

Solutions
- Solutions Overview
- Solution 1
- Solution 2

Services
- Services Overview
- Service 1
- Service 2

Blog
- Blog Post 1
- Blog Post 2
- Blog  Post 3

Also let's say the current page I visit is Solutions and here comes why I need help:

Instead of rendering the menu as you can see above it should only be rendered like

 

Solutions
- Solutions Overview
- Solution 1
- Solution 2

If my current page would be Blog than only

Blog
- Blog Post 1
- Blog Post 2
- Blog  Post 3

should be rendererd.

At last I do not use any .css yet and take the MSN just as it comes with its defaults.

You would just have to find out if your on "Solutions", then use that (the current page) as the root for the MSN. SO it renders only children of Solutions.

You can get the level you're on also by using $page->parents->count which Would be 1 for Solutions, 2 for Solutions Overview. 

So there's no options to do what you want, you'd have to find out the condition via some logik and then simply use another root parent page.

[Soma]

1 hour ago, Peter Knight said:

 

This doesn't seem to work. It only applies 'active' to the active child link.

On a drop down menu any page/link that is active should have it's root parent marked as active too.

On my example a user has no obvious indicator of what 'section' they are on just by looking at the top navigation bar.

It actually only adds active to the active nav item. All parents of the active nav items get "parent". The first options in MSN. https://github.com/somatonic/MarkupSimpleNavigation#same-with-comments

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

[Peter Knight]

8 hours ago, Soma said:

It actually only adds active to the active nav item. All parents of the active nav items get "parent". The first options in MSN. https://github.com/somatonic/MarkupSimpleNavigation#same-with-comments

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

Cheers Soma. 

[iNoize]

Hello, 
how can i change the "has_children_class" for an special id ? Ex 1074. 
I have an page with automaticly created children. And in this ID 1074 it should not be generated the dropdown submenu (Bootstrap)

This is actually my code 

 

$nav = $modules->get("MarkupSimpleNavigation"); // load the module

$nav->addHookAfter('getTagsString', null, 'customNavItems');
  
function customNavItems(HookEvent $event){
     $item = $event->arguments('page');
    // first level items need additional attr
      if($item->numChildren(true) && count($item->parents) < 2 && $item->id != 1 && $item->id != 1074 ){
        $title = $item->get("title|name");
        $event->return = '<a href="#" class="dropdown-toggle" tabindex="0" data-toggle="dropdown"  aria-expanded="false" >' . $title . ' <span class="caret"></span></a>';
       }


    // submenus don't need class and data attribs
       if($item->numChildren(true) && count($item->parents) > 1 && $item->id != 1028 && $item->id != 1036 ){
        $event->return = '<a href="#">' . $item->get("title|name") . '</a>';
      }
}

$navMarkup = $nav->render(
    array(
    'parent_class' => 'parent',
    'current_class' => 'active',
    'has_children_class' => 'dropdown',
    'levels' => false,
    'levels_prefix' => 'level-',
    'max_levels' => 2,
    'firstlast' => false,
    'collapsed' => false,
    'show_root' => false,
    'selector' => '',
    'selector_field' => 'nav_selector',
    'outer_tpl' => '<ul class="nav navbar-nav">||</ul>',
    'inner_tpl' => '<ul class="dropdown-menu">||</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' => true,
    'debug' => true
        )
    );

 

[Lance O.]

@Soma

I noticed that in the 1.3.6 version of your module that if a field name includes an underscore, the portion after the underscore is removed, which sometimes makes the link to the field incorrect.

For example, if I have a field named "images_repeater" then the field will instead display as "images".

This module has helped save me countless hours over the years. Thank you for providing it to the ProcessWire community.

[combicart]

Is it possible to show additional markup for a specific menu item? I would like to show the number of subpages (with it's own markup) for one specific main menu item. The page is a regular page with the same template as other pages in the menu.

Would this be possible?

[dragan]

I'm not sure, but take a look at this: 

https://modules.processwire.com/modules/markup-simple-navigation/

-> hook for custom item string (new in 1.2.0)

[combicart]

Hi @dragan, thanks! I've just implemented the hook and it's working perfectly!

Thanks for pointing me in the right direction!

[Mike-it]

Assumption: Code for Dummies ...

Hi, i'm trying to cutomize my menu to add a personal "title" to the link somthing like <a title='$child->mytitle'

I've already added a field ("mytitle", type text) in my templates. This is not the right way to do that? Am i so away from the solution?

 // top navigation consists of homepage and its visible children
                        $homepage = $pages->get('/'); 
                        $children = $homepage->children();

                        // make 'home' the first item in the navigation
                        $children->prepend($homepage); 

                        // render an <li> for each top navigation item
                        foreach($children as $child) {
                            if($child->id == $page->rootParent->id) {
                                // this $child page is currently being viewed (or one of it's children/descendents)
                                // so we highlight it as the current page in the navigation
                                echo "<li class='nav-item active' aria-current='true'><a title='$child->mytitle' class='nav-link' href='$child->url'>$child->title</a></li>";
                            } else {
                                echo "<li class='nav-item'><a title='$child->mytitle' class='nav-link' href='$child->url'>$child->title</a></li>";
                            }
                        }

Any help appreciated, thanks in advance...

[buster808]

Hi, The parent url (work with me) doesn't work using MarkUpSimpleNavigation - Is there something in the options that I should be setting?

Thanks

[teppo]

12 minutes ago, buster808 said:

Hi, The parent url (work with me) doesn't work using MarkUpSimpleNavigation - Is there something in the options that I should be setting?

You may need to be a bit more specific than that: what exactly do you mean when you say that the URL doesn't work? Is the screenshot from your actual site, and if so, could you add a link to that? Or is this an example that you're trying to achieve?

Note that I've merged your question to the Markup Simple Navigation support thread. When you have a question related to a specific module, post it to the existing support thread for that module – thanks!

[999design]

I love this module, but I've finally found something that I can't figure out how to do.

I'm trying to style particular item(s) in the navigation different to the others by updating a class on that item, how would I do this? For example a "Donate" or "Sign up" page that I want to have more prominent styling.

I've added a checkbox to my pages to say something along the lines of  "Make me prominent in the navigation"... but I'm not quite sure how to hook that into markupsimplenavigation's options?

Is there a way to say - if this page has the checkbox checked, add the "prominent" css class to the its menu item markup?

Thanks in advance for any support :)

[999design]

Update: I hadn't read the documentation properly and was able to add a custom class to pages that had the checkbox field checkbox_nav_prominent checked ?

function hookGetListClass(HookEvent $event){
    $child = $event->arguments('page'); // current rendered child page
    $class = $event->arguments('class'); // the class string already present
    // any check on that child to set your custom class
    if($child->checkbox_nav_prominent == 1){
        $event->return .= " is-prominent"; // add your custom class to the existing
    }
}