Jump to content
Soma

MarkupSimpleNavigation

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

Share this post


Link to post
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!

Share this post


Link to post
Share on other sites

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 by Christophe
  • Like 2

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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. 

Share this post


Link to post
Share on other sites

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



 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Thanks for pointing me in the right direction!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Thanks

Screen Shot 2019-07-22 at 18.53.58.png

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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
    }
}

 

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By MoritzLost
      This is a new module that provides a simple solution to clearing all your cache layers at once, and an extensible interface to perform various cache-related actions.
      The simple motivation behind this module was that I was tired of manually clearing caches in several places after deploying a change on a live site. The basic purpose of this module is a simple Clear all caches link in the Setup menu which clears out all caches, no matter where they hide. You can customize what exactly the module does through it's configuration menu:
      Expire or delete all cache entries in the database, or selectively clear caches by namespace ($cache API) Clear the the template render cache. Clear out specific folders inside your site's cache directory (/site/assets/cache) Refresh version strings for static assets to bust client-side browser caches (this requires some setup, see the full documentation for details). This is the basic function of the module. However, you can also add different cache management action through the API and execute them through the module's interface. For this advanced usage, the module provides:
      An interface to see all available cache actions and execute them. A system log and logging output on the module page to see verify what the module is doing. A CacheControlTools class with utility functions to clear out different caches. An API to add cache actions, execute them programmatically and even modify the default action. Permission management, allowing you granular control over which user roles can execute which actions. The complete documentation can be found in the module's README.
      Beta release
      Note that I consider this a Beta release. Since the module is relatively aggressive in deleting some caches, I would advise you to install in on a test environment before using it on a live site.
      Let me know if you're getting any errors, have trouble using the module or if you have suggestions for improvement!
      In particular, can someone let me know if this module causes any problems with the ProCache module? I don't own or use it, so I can't check. As far as I can tell, ProCache uses a folder inside the cache directory to cache static pages, so my module should be able to clear the ProCache site cache as well, I'd appreciate it if someone can test that for me.
      Future plans
      If there is some interest in this, I plan to expand this to a more general cache management solution. I particular, I would like to add additional cache actions. Some ideas that came to mind:
      Warming up the template render cache for publicly accessible pages. Removing all active user sessions. Let me know if you have more suggestions!
      Links
      https://github.com/MoritzLost/ProcessCacheControl ProcessCacheControl in the Module directory

    • By joshua
      This module is (yet another) way for implementing a cookie management solution.
      Of course there are several other possibilities:
      - https://processwire.com/talk/topic/22920-klaro-cookie-consent-manager/
      - https://github.com/webmanufaktur/CookieManagementBanner
      - https://github.com/johannesdachsel/cookiemonster
      - https://www.oiljs.org/
      - ... and so on ...
      In this module you can configure which kind of cookie categories you want to manage:

      You can also enable the support for respecting the Do-Not-Track (DNT) header to don't annoy users, who already decided for all their browsing experience.
      Currently there are four possible cookie groups:
      - Necessary (always enabled)
      - Statistics
      - Marketing
      - External Media
      All groups can be renamed, so feel free to use other cookie group names. I just haven't found a way to implement a "repeater like" field as configurable module field ...
      When you want to load specific scripts ( like Google Analytics, Google Maps, ...) only after the user's content to this specific category of cookies, just use the following script syntax:
      <script type="optin" data-type="text/javascript" data-category="statistics" data-src="/path/to/your/statistic/script.js"></script> <script type="optin" data-type="text/javascript" data-category="marketing" data-src="/path/to/your/mareketing/script.js"></script> <script type="optin" data-type="text/javascript" data-category="external_media" data-src="/path/to/your/external-media/script.js"></script> <script type="optin" data-type="text/javascript" data-category="marketing">console.log("Inline scripts are also working!");</script> The type has to be "optin" to get recognized by PrivacyWire, the data-attributes are giving hints, how the script shall be loaded, if the data-category is within the cookie consents of the user. These scripts are loaded asynchronously after the user made the decision.
      If you want to give the users the possibility to change their consent, you can use the following Textformatter:
      [[privacywire-choose-cookies]] It's planned to add also other Textformatters to opt-out of specific cookie groups or delete the whole consent cookie.
      You can also add a custom link to output the banner again with a link / button with following class:
      <a href="#" class="privacywire-show-options">Show Cookie Options</a> <button class="privacywire-show-options">Show Cookie Options</button> This module is still in development, but we already use it on several production websites.
      You find it here: https://github.com/blaueQuelle/privacywire/tree/master
      Download: https://github.com/blaueQuelle/privacywire/archive/master.zip
      I would love to hear your feedback 🙂
      Edit: Updated URLs to master tree of git repo
       
    • By David Karich
      Admin Page Tree Multiple Sorting
      ClassName: ProcessPageListMultipleSorting
      Extend the ordinary sort of children of a template in the admin page tree with multiple properties. For each template, you can define your own rule. Write each template (template-name) in a row, followed by a colon and then the additional field names for sorting.
      Example: All children of the template "blog" to be sorted in descending order according to the date of creation, then descending by modification date, and then by title. Type:
      blog: -created, -modified, title  Installation
      Copy the files for this module to /site/modules/ProcessPageListMultipleSorting/ In admin: Modules > Check for new modules. Install Module "Admin Page Tree Multible Sorting". Alternative in ProcessWire 2.4+
      Login to ProcessWire backend and go to Modules Click tab "New" and enter Module Class Name: "ProcessPageListMultipleSorting" Click "Download and Install"   Compatibility   I have currently tested the module only under PW 2.6+, but think that it works on older versions too. Maybe someone can give a feedback.     Download   PW-Repo: http://modules.processwire.com/modules/process-page-list-multiple-sorting/ GitHub: https://github.com/FlipZoomMedia/Processwire-ProcessPageListMultipleSorting     I hope someone can use the module. Have fun and best regards, David
    • By dimitrios
      Hello,
      this module can publish content of a Processwire page on a Facebook page, triggered by saving the Processwire page.
      To set it up, configure the module with a Facebook app ID, secret and a Page ID. Following is additional configuration on Facebook for developers:
      Minimum Required Facebook App configuration:
      on Settings -> Basics, provide the App Domains, provide the Site URL, on Settings -> Advanced, set the API version (has been tested up to v3.3), add Product: Facebook Login, on Facebook Login -> Settings, set Client OAuth Login: Yes, set Web OAuth Login: Yes, set Enforce HTTPS: Yes, add "https://www.example.com/processwire/page/" to field Valid OAuth Redirect URIs. This module is configurable as follows:
      Templates: posts can take place only for pages with the defined templates. On/Off switch: specify a checkbox field that will not allow the post if checked. Specify a message and/or an image for the post.
      Usage
      edit the desired PW page and save; it will post right after the initial Facebook log in and permission granting. After that, an access token is kept.
       
      Download
      PW module directory: http://modules.processwire.com/modules/auto-fb-post/ Github: https://github.com/kastrind/AutoFbPost   Note: Facebook SDK for PHP is utilized.


×
×
  • Create New...