Jump to content
Soma

MarkupSimpleNavigation

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.

Share this post


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

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

Share this post


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

Share this post


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

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

Thanks Soma

I hadn't seen your reply earlier.

it doesn't work for me but once again, it's my lack of php skills here showing. I guess I'm used to tags and Wayfinder and MODX doing all the hardwork for me.

Share this post


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

Share this post


Link to post
Share on other sites

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

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

Thanks both for the replies. Unfortunately the client has now changed his mind but I will keep this for the future. I'm sure I will need it at some point. :)

Share this post


Link to post
Share on other sites

Unfortunately? I would say he'd come to his senses  ^-^

Share this post


Link to post
Share on other sites

"Unfortunately" cause you and I've spend hours to think, link and respond ;)

Share this post


Link to post
Share on other sites

Unfortunately? I would say he'd come to his senses  ^-^

Unfortunately, this is almost impossible.  :wacko:

"Unfortunately" cause you and I've spend hours to think, link and respond ;)

Exactly  :'(

Share this post


Link to post
Share on other sites

Soma, as a master of sarcasm I would have thought you noticed mine sarcasm   ;) 

  • Like 1

Share this post


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

Share this post


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

Share this post


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

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

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