Jump to content
kongondo

Menu Builder

Recommended Posts

Thanks guys,

I want to put a class on the menu submenu so on nested unordered list. Is there an option for this?

 
For example <ul class="submenu">

Will look into it. Should be easy enough using $options

It would be nice to have compatibility for the <nav> tag - I use them in my menus instead of unordered lists.

On my to do list: See $options.

Also, I should be able to add a class and/or an ID to each menu.

You can already do this:

$options = array('menu_css_id' => 'main', 'menu_css_class' => 'navigation');
$menu = $modules->get('MarkupMenuBuilder')->render(1234, $options);

Am I missing something?

Will update docs later...

Btw, one is not tied to using MarkupMenuBuilder -> you can easily json_decode($menuItemsJSON, true) the menu items JSON and recursively traverse the resultant array using a custom PHP function or even with javascript.

Edited by kongondo
  • Like 2

Share this post


Link to post
Share on other sites

Not a massive problem but I noticed that if I change the menu name that it doesn't render with the new name.

Share this post


Link to post
Share on other sites

In my testing, outputting the menu is already fast enough. However, one other thing I need to experiment with is caching the menu templates or menu_items field and see if it can be even faster...

Share this post


Link to post
Share on other sites

You're using tabs in your code, for constancy using spaces is better.

Thanks for creating this kongondo.

  • Like 1

Share this post


Link to post
Share on other sites

Not a massive problem but I noticed that if I change the menu name that it doesn't render with the new name.

That's because at the moment, when you change the menu 'Title', only the title gets changed and not the name (i.e. on the PW page). In rendering using a title or name, it looks for the name. In that case, your new title would be first converted to a name and the module would look for a menu page with that name, which would obviously not exist (since name was not changed). Rendering by ID would still work though. But, I see no reason why I should not change this behaviour. I will make it change the name to match the title as well to be foolproof. Since menu pages are not visible in the frontend and are not really for querying, there is no harm in that. Thanks for the suggestion.

ps: If possible, could you file feature requests at the project page in Github? I won't have time to work on this today and might forget some things, thanks.

  • Like 1

Share this post


Link to post
Share on other sites

You can already do this:

$options = array('menu_css_id' => 'main', 'menu_css_class' => 'navigation');
$menu = $modules->get('MarkupMenuBuilder')->render(1234, $options);

Ah, right - missed that one. Don't think anything else is missing. I can already use this for a number of sites as it is. :-)

Share this post


Link to post
Share on other sites
  1. It would be nice to have compatibility for the <nav> tag - I use them in my menus instead of unordered lists.

@Mike,

Could you clarify the sort of HTML structure you envisage? With <nav> only, how do you show sub-menus? i.e.

<nav>
   <a href="link-1">Link One</a>
   <a href="link-2">Link Two</a>
   <a href="link-3">Link Three</a>
   <a href="link-4">Link Four</a>
</nav>

Share this post


Link to post
Share on other sites

I generally follow something like this - an example from a recent site release:

<nav role="mainMenu">
	<li><a data-current href="/">Home</a></li>
	<li class="hasDrop"><a href="/who-we-are">Who We Are</a>
		<ul class="theDrop">
			<li><a href="/who-we-are">Overview & Mission</a></li>
			<li><a href="/who-we-are/certification">Our Certification</a></li>
			<li><a href="/who-we-are/management-board-staff">Management Board & Staff</a></li>
		</ul>
	</li>
	<li><a href="/what-we-do">What We Do</a></li>
	<li><a href="/connect">Connect</a></li>
	<li><a class="donate" href="/donate">Donate to our Cause</a></li>
</nav>

Essentially, I'm swapping out <ul> for <nav>.

But now that you mention it, I do see that not everyone does it that way. Some prefer to wrap their <ul> inside <nav>. Some people prefer to do it like your example. Thing with <nav> is that there is no predefined way of doing it...

Now that I'm actually looking at this, I should probably be using <ul> inside <nav>... I dunno. HTML5 went and confused things...

Share this post


Link to post
Share on other sites

Officially it isn't allowed to use <nav> as list-item container. Only <ul>, <ol> or <menu> element as parents are allowed for li elements. The last one <menu> I've never seen used in the wild before. The <nav> element I find rather confusing to. I use the nav element mainly as a wrapper element for navigation elements or leave them out if I do not need them for styling. So mainly I use it for wrapping main navigation elements and that is search form input(s) included.

Share this post


Link to post
Share on other sites

What Martijn said...

You can wrap you whole menu with <nav> like this:

$options = array('menu_css_id' => 'main', 'menu_css_class' => 'navigation');
$menu = $modules->get('MarkupMenuBuilder');

$out = '<nav>' . $menu->render(1234, $options) . '</nav>';

In that case, the menu will use the specified list type, <ul> default or <ol>

However, if in $options you specify: 'wrapper_list_type' => 'nav', then, in order to output correct markup, MB will not wrap menu items in <li> but only <a> unless you also specified in $options some other tag other than <li>, e.g.  'list_type' => 'span'

What do you guys think?

  • Like 1

Share this post


Link to post
Share on other sites

Officially it isn't allowed to use <nav> as list-item container. Only <ul>, <ol> or <menu> element as parents are allowed for li elements. The last one <menu> I've never seen used in the wild before. The <nav> element I find rather confusing to. I use the nav element mainly as a wrapper element for navigation elements or leave them out if I do not need them for styling. So mainly I use it for wrapping main navigation elements and that is search form input(s) included.

I see. I know that <menu> is really for context menus... to be filled with <menuitem>s.

I've never really been one for standards. To me, my method is easier to understand. Maybe not for everyone else. I tend to believe that if it works well, use it. One of the reasons I use <nav> instead of <ul> is that I don't need to remove the left margin. Granted, that's a small thing, but it just feels better do do it that way. Also, that example depends on what CSS framework/reset is being used.

I think that a little flexibility would be cool. Otherwise, I'll use the method suggested. (Won't hurt much at all  :P )

Share this post


Link to post
Share on other sites

I see. I know that <menu> is really for context menus... to be filled with <menuitem>s.

I've never really been one for standards. To me, my method is easier to understand. Maybe not for everyone else. I tend to believe that if it works well, use it. One of the reasons I use <nav> instead of <ul> is that I don't need to remove the left margin. Granted, that's a small thing, but it just feels better do do it that way. Also, that example depends on what CSS framework/reset is being used.

I think that a little flexibility would be cool. Otherwise, I'll use the method suggested. (Won't hurt much at all  :P )

I like it. I never used it this way but actually makes sense in one way but in another way it kind of confuses things when using nested lists with ul.

Maybe if there was something like a <subnav> element it would  make more sense.

Share this post


Link to post
Share on other sites

I like it. I never used it this way but actually makes sense in one way but in another way it kind of confuses things when using nested lists with ul.

Maybe if there was something like a <subnav> element it would  make more sense.

If I had a say in the matter, I'd probably go for <item> (for plain ol' items) and <subnav> (for sub-menus).

  • Like 1

Share this post


Link to post
Share on other sites

Update: version 0.0.3

Updated original post.

Now in modules directory:

  • Option to allow Markup in menu items as per this request (superusers only) [note: although values are sanitized via HTML Purifier, it is your responsibility to ensure correct HTML input; also, if you previously allowed HTML markup but the menu was subsequently edited by non-superusers, your HTML will be stripped off]
  • Added more options to MarkupMenuBuilder render() method - first, last classes, etc.(see Read Me) and...
  • Added/enhanced wrapper_list_type and list_type options. The former allows you to specify menu items outer wrapper tag, e.g. <ol>, <div>, <nav>, etc....The latter allows you to specify alternatives to <li>, e.g. <span>. Note, if no list_type is specified and you override the default by 'list_type' => '' in your options, then menu items css classes/IDs are applied to the <a> tag instead.
  • Updated code to ensure menu settings saved by superusers remain even for non-superusers (e.g. menu maxLevels, selectable pages, etc.)

Note: Had an extra  jquery.asmselect-mb.js in the root folder. I have deleted this in the repository.

Note, it seems PageAutocomplete will not allow non-superusers to select pages unless they have a page-edit permission as well. Could somebody confirm/clarify? Thanks.

Edited by kongondo
  • Like 8

Share this post


Link to post
Share on other sites

Note, it seems PageAutocomplete will not allow non-superusers to select pages unless they have a page-edit permission as well. Could somebody confirm/clarify? Thanks.

Yes I see that as well. Not sure if this is related to some other permission but 'selector' doesn't appear as well even with page-edit permission.

The rest works great.

Share this post


Link to post
Share on other sites

Selector not appearing is by design (seems I added that to the ReaMe only and not the OP). Currently, it is only visible to superusers although was wondering whether to make that permission-based as well...could be user created permission that would be stored together with the menu's settings...

Edited by kongondo
  • Like 1

Share this post


Link to post
Share on other sites

Selector not appearing is by design (seems I added that to the ReaMe only and not the OP). Currently, it is only visible to superusers although was wondering whether to make that permission-based as well...could be user created permission that would be stored together with the menu's settings...

Always good to have the option.

  • Like 1

Share this post


Link to post
Share on other sites

I just have to chime in with nothing helpful other than to say how thrilled I am to see this. This is going to be such a fantastic tool for content creators. 

  • Like 4

Share this post


Link to post
Share on other sites

Always good to have the option.

OK...on my TODO. I have expanded it to other features, not just the selectors. See this also. What are your thoughts about controlling ability to delete menus too? Any other controls I am missing? Thanks.

  • Like 2

Share this post


Link to post
Share on other sites

OK...on my TODO. I have expanded it to other features, not just the selectors. See this also. What are your thoughts about controlling ability to delete menus too? Any other controls I am missing? Thanks.

That would be useful as well. I can't think of anything else at the moment.

Share this post


Link to post
Share on other sites

Update: version 0.0.4

Added 7 permissions to control visibility/access to advanced settings by non-superusers as discussed above. Currently this is only available for testing in Menu Builder dev branch.

Note that you have to create the permissions yourself and add them to a role. Please thoroughly read the updated README about how to use these permissions; depending on your situation, you may not have to create any of the permissions.

In summary, these control:

  1. Locking/unlocking menus (menu-builder-lock)
  2. Trashing and deleting menus (menu-builder-delete)
  3. Use of selectors to add pages as menu items (menu-builder-selector)
  4. Use of markup/HTML in menu item titles/labels (menu-builder-markup)
  5. Specifying of PW pages that are selectable as menu items in the page fields AsmSelect and PageAutocomplete (menu-builder-selectable)
  6. Editing of nestedSortable settings, e.g. maxLevels (menu-builder-settings)
  7. Ability to change the page field (AsmSelect vs PageAutocomplete) to be used when selecting PW pages to add as menu items (menu-builder-page-field)

Please test and let me know, thanks.

  • Like 5

Share this post


Link to post
Share on other sites

Just a thought and I am not sure how much this is needed but I am thinking about rendering breadcrumbs and wondering what would be the best way to render breadcrumbs based on the menu structure. Maybe I didn't think about it enough but there seems to be a possibility of complications rendering breadcrumbs when the menu structure is different to page structure.

Is there some way to have a feature whereby breadcrumbs could be output based on the menu structure with of course homepage being one step higher in the hierarchy of pages that are on the same level.?

  • Like 1

Share this post


Link to post
Share on other sites

I'm busy moving a site over to PW, and using MenuBuilder for the main nav. Unfortunately, I'm getting this markup:

<ulclass ="navigation">
<li  class=" current"><a  href='/'>Welcome</a></li>
...
</ul>

Which is broken... Would it not be better to use some kind of HTML builder? Perhaps something like this?

Share this post


Link to post
Share on other sites

I'm busy moving a site over to PW, and using MenuBuilder for the main nav. Unfortunately, I'm getting this markup:

<ulclass ="navigation">
<li  class=" current"><a  href='/'>Welcome</a></li>
...
</ul>

Which is broken... Would it not be better to use some kind of HTML builder? Perhaps something like this?gh

We'll that's strange...I thought I had dealt with this.....Old code must have crept in. I'll look into it, thanks for reporting. No need for the HTML builder :-)....for the <ul, it's just a missing space I forgot to put back after switching to configurable menu wrapper and for the <li> just a space to trim...I'll update tonight...

Edited by kongondo

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 Gadgetto
      SnipWire - Snipcart integration for ProcessWire
      Snipcart is a powerful 3rd party, developer-first HTML/JavaScript shopping cart platform. SnipWire is the missing link between Snipcart and the content management framework ProcessWire.
      With SnipWire, you can quickly turn any ProcessWire site into a Snipcart online shop. The SnipWire plugin helps you to get your store up and running in no time. Detailed knowledge of the Snipcart system is not required.
      SnipWire is free and open source licensed under Mozilla Public License 2.0! A lot of work and effort has gone into development. It would be nice if you could donate an amount to support further development:

      Status update links (inside this thread) for SnipWire development
      2020-04-06 -- SnipWire 0.8.6 (beta) released! Adds support for Snipcart subscriptions and also fixes some problems 2020-03-21 -- SnipWire 0.8.5 (beta) released! Improves SnipWires webhooks interface and provides some other fixes and additions 2020-03-03 -- SnipWire 0.8.4 (beta) released! Improves compatibility for Windows based Systems. 2020-03-01 -- SnipWire 0.8.3 (beta) released! The installation and uninstallation process has been heavily revised. 2020-02-08 -- SnipWire 0.8.2 (beta) released! Added a feature to change the cart and catalogue currency by GET, POST or SESSION param 2020-02-03 -- SnipWire 0.8.1 (beta) released! All custom classes moved into their own namespaces. 2020-02-01 -- SnipWire is now available via ProcessWire's module directory! 2020-01-30 -- SnipWire 0.8.0 (beta) first public release! (module just submitted to the PW modules directory) 2020-01-28 -- added Custom Order Fields feature (first SnipWire release version is near!) 2020-01-21 -- Snipcart v3 - when will the new cart system be implemented? 2020-01-19 -- integrated taxes provider finished (+ very flexible shipping taxes handling) 2020-01-14 -- new date range picker, discount editor, order notifiactions, order statuses, and more ... 2019-11-15 -- orders filter, order details, download + resend invoices, refunds 2019-10-18 -- list filters, REST API improvements, new docs platform, and more ... 2019-08-08 -- dashboard interface, currency selector, managing Orders, Customers and Products, Added a WireTabs, refinded caching behavior 2019-06-15 -- taxes provider, shop templates update, multiCURL implementation, and more ... 2019-06-02 -- FieldtypeSnipWireTaxSelector 2019-05-25 -- SnipWire will be free and open source Plugin Key Features
      Fast and simple store setup Full integration of the Snipcart dashboard into the ProcessWire backend (no need to leave the ProcessWire admin area) Browse and manage orders, customers, discounts, abandoned carts, and more Multi currency support Custom order and cart fields Process refunds and send customer notifications from within the ProcessWire backend Process Abandoned Carts + sending messages to customers from within the ProcessWire backend Complete Snipcart webhooks integration (all events are hookable via ProcessWire hooks) Integrated taxes provider (which is more flexible then Snipcart own provider) Useful Links
      SnipWire in PW modules directory SnipWire Docs (please note that the documentation is a work in progress) SnipWire @GitHub (feature requests and suggestions for improvement are welcome - I also accept pull requests) Snipcart Website  
      ---- INITIAL POST FROM 2019-05-25 ----
       
    • By bernhard
      #######################
      Please use the new RockFinder2
      #######################
      WHY?
      This module was built to fill the gap between simple $pages->find() operations and complex SQL queries.
      The problem with $pages->find() is that it loads all pages into memory and that can be a problem when querying multiple thousands of pages. Even $pages->findMany() loads all pages into memory and therefore is a lot slower than regular SQL.
      The problem with SQL on the other hand is, that the queries are quite complex to build. All fields are separate tables, some repeatable fields use multiple rows for their content that belong to only one single page, you always need to check for the page status (which is not necessary on regular find() operations and therefore nobody is used to that).
      In short: It is far too much work to efficiently and easily get an array of data based on PW pages and fields and I need that a lot for my RockGrid module to build all kinds of tabular data.

      Basic Usage

       
      Docs & Download
      https://modules.processwire.com/modules/rock-finder/
      https://github.com/BernhardBaumrock/RockFinder
       
      Changelog
      180817, v1.0.6, support for joining multiple finders 180810, v1.0.5, basic support for options fields 180528, v1.0.4, add custom select statement option 180516, change sql query method, bump version to 1.0.0 180515, multilang bugfix 180513, beta release <180513, preview/discussion took place here: https://processwire.com/talk/topic/18983-rocksqlfinder-highly-efficient-and-flexible-sql-finder-module/
    • By MoritzLost
      TrelloWire
      This is a module that allows you to automatically create Trello cards for ProcessWire pages and update them when the pages are updated. This allows you to setup connected workflows. Card properties and change handling behaviour can be customized through the extensive module configuration. Every action the module performs is hookable, so you can modify when and how cards are created as much as you need to. The module also contains an API-component that makes it easy to make requests to the Trello API and build your own connected ProcessWire-Trello workflows.
      Features
      All the things the module can do for you without any custom code: Create a new card on Trello whenever a page is added or published (you can select applicable templates). Configure the target board, target list, name and description for new cards. Add default labels and checklists to the card. Update the card whenever the page is updated (optional). When the status of the card changes (published / unpublished, hidden / unhidden, trashed / restored or deleted), move the card to a different list or archive or delete it (configurable). You can extend this through hooks in many ways: Modifiy when and how cards are created. Modify the card properties (Target board & list, title, description, et c.) before they are sent to Trello. Create your own workflows by utilizing an API helper class with many convenient utility methods to access the Trello API directly. Feedback & Future Plans
      Let me know what you think! In particular:
      If you find any bugs report them here or on Github, I'll try to fix them. This module was born out of a use-case for a client project where we manage new form submissions through Trello. I'm not sure how many use-cases there are for this module. If you do use it, tell me about it! The Trello API is pretty extensive, I'll try to add some more helper methods to the TrelloWireApi class (let me know if you need anything in particular). I'll think about how the module can support different workflows that include Twig – talk to me if you have a use-case! Next steps could be a dashboard to manage pages that are connected to a Trello card, or a new section in the settings tab to manage the Trello connection. But it depends on whether there is any interest in this 🙂 Links
      Repository on Github Complete module documentation (getting started, configuration & API documentation) [Module directory pending approval] Module configuration

    • By MoritzLost
      Process Cache Control
      This module 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) Clear the ProCache page render cache (if your site is using ProCache) 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.
      Plans for improvements
      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 CHANGELOG in the repository Screenshots


    • By Macrura
      PrevNextTabs Module
      Github: https://github.com/outflux3/PrevNextTabs
      Processwire helper modules for adding page navigation within the editor.
      Overview
      This is a very simple module that adds Previous and Next links inline with the tabs on the page editor. Hovering over the tab shows the title of the previous or next page (using the admin's built in jqueryUI tooltips.)
      Usage
      This module is typically used during development where you or your editors need to traverse through pages for the purpose of proofing, flagging and/or commenting. Rather than returning to the page tree or lister, they can navigate with these links.
      Warnings
      If you are using PW version 2.6.1 or later, the system will prevent you from leaving the page if you have unsaved edits.
      For earlier versions, to avoid accidentally losing changes made to a page that might occur if a user accidentally clicks on one of these, make sure to have the Form Save Reminder module installed.
      http://modules.processwire.com/modules/prev-next-tabs/
×
×
  • Create New...