Jump to content

MarkupSimpleNavigation


Soma

Recommended Posts

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.

 

  • Like 1
Link to comment
Share on other sites

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 by horst
deleted inapropriate wording!
Link to comment
Share on other sites

  • 1 month later...

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>

 

Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

  • 4 weeks later...

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 1 month later...
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.

active-root.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

active-root.png

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

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. 

Link to comment
Share on other sites

  • 7 months later...

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
        )
    );



 

Link to comment
Share on other sites

  • 2 months later...

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

Link to comment
Share on other sites

  • 3 weeks later...

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?

Link to comment
Share on other sites

  • 4 weeks later...

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

Link to comment
Share on other sites

  • 1 month later...
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!

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
Share on other sites

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
    }
}

 

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