Menu Builder

[Macrura]

@kongondo,

Thanks for making this.

i finally had time to test this out and it's very great - i'm planning to use it from now on for most projects...

[kongondo]

@Macrura,

Glad you liked it. Like I hinted in my first post, your custom menu idea was one of my inspirations, so thank you too . It still needs some work and re-factoring but time is my worst enemy (currently? always? ). Let us know how you get along.

[Macrura]

great - i was planning a write up/tutorial on various ways to do menus on PW;

historically i've done it using a lot of different ways (besides the usual generating from the page tree);

for some simple sites now i use a profields table, now that it supports page selects.

but i do think the menu builder is the best for larger sites; let me know if you need any help on it, i can donate time over the next 2 months.

[kongondo]

let me know if you need any help on it, i can donate time over the next 2 months.

Thanks, might just do, considering my growing issues list. I also have @jlahijani list of ideas to consider.

[kongondo]

Update: Version 0.1.1

And, we are back! Thanks for waiting!   

1. Fixed bug relating to getLanguageValue() (issues #22 and #25). Thanks @all who reported, tested,and fixed the issue.
2. Fixed bug where 'has_children' would not be applied to a menu item whose children were included 'natively'.
3. Switched to $this->wire('pages') from wire('pages') (and similar).
4. As per request at issue #18, added option 'default_class' to enable application of a default CSS class to every menu item at API level. Thanks @jlahijani. You can use this API-level option to add custom CSS class(es), e.g. Bootstrap or Foundation ones.

[kongondo]

Update: Version 0.1.2

• Fixed bug whereby 'new tab' setting for new custom menu items would not work reliably
• In addition to the existing AsmSelect and Page Autocomplete options of adding pages to menus, you can now also use a PageListSelectMultiple. This is similar to the original version of MenuBuilder (not in styling but function    ). Personally, I am not a fan* of the option....the tree jumps all over the place and can be unwieldy. Anyway, the feature is there for those who prefer it . Logged in as a Supersuser you will see the whole tree, of course. Not other users though. So, no 'danger'(?) of them adding admin pages to the menu!

*I might rethink this and remove PageListSelectMultiple as an option..

[kongondo]

Hi! Thanks for the great module!

After deciding that its functionality was a bit too much for what I wanted to do right now, I tried to uninstall the module but it throws this error: 

Can't delete template 'menus' because it is used by 1 pages.

The Markup Module unisntalls just fine.

 I am using PW 2.6.1

Thanks for further assistance,

Thanks for catching this. The error there meant you had some menu pages in the trash. On uninstall, the module was trying to delete their template, hence the error. Fixed in the latest version, 0.1.3.

[kongondo]

Update: Version 0.1.3.

• Fixed bug where on uninstalling the module, menu pages in the trash would not get deleted, hence throwing an error when the uninstall routine tried to delete their template

[Jonathan Lahijani]

• In addition to the existing AsmSelect and Page Autocomplete options of adding pages to menus, you can now also use a PageListSelectMultiple. This is similar to the original version of MenuBuilder (not in styling but function    ). Personally, I am not a fan* of the option....the tree jumps all over the place and can be unwieldy. Anyway, the feature is there for those who prefer it . Logged in as a Supersuser you will see the whole tree, of course. Not other users though. So, no 'danger'(?) of them adding admin pages to the menu!

*I might rethink this and remove PageListSelectMultiple as an option..

Thanks for adding PageListSelectMultiple.  I personally think it should stay since it puts you in the page tree context (meaning you see the page/child structure), thereby making it easier to understand the exact page you are choosing.

[kongondo]

Here are my thoughts:

Hi Jonathan,

Thanks for taking time to pen your thoughts about how this module could be improved.

Perhaps remove the ability to create multiple menus.  It's a nice feature but it feels like overkill since sites typically don't have more than just a few menus.  (or disable this option by default and perhaps have it enabled in the module's settings for advanced used).  Perhaps add a standard "Add New" button instead that follows the typical Page creation process.

Although the module is primarily for building menus, out in the wild, its probably being used to build other navigational lists as well. True, many sites have 2 - 3 menus at most, but I want the module to remain as flexible as possible. The create new field is collapsed by default so I don't think it looks like its inthe way?

For the same reasons above, remove batch actions to delete, unpublish, etc.  (or disable this option by default and perhaps have it enabled in the module's settings for advanced used).

That field is hidden by default and secondly, one can control what actions appear via permissions. In addition, my point above about how people are using this module is still applicable here.

When going in to edit a menu, make the first tab be "Structure" which is selected by default.  This is typically the first action most people would want to take so it would feel more natural for it to be the first tab item. There should be 3 fieldsets/sections in this "Structure" tab:

Add Page

Add Custom Link

Menu Items

I have not been able to find out how the 2nd tab can be selected by default.

Fieldsets do take some vertical space. I tried this in the first version of the module and I didn't like the results.

Perhaps simplify how you can add pages to your menu:

Remove the existing 3 methods: Pages (both ASM and PageAutoComplete), Custom, Selector

In regards to adding pages using Selectors, perhaps have this disabled by default, but an option that can be enabled in the modules settings.  It's an advanced feature but I'd imagine wouldn't be as commonly used and therefore feels a bit overwhelming.

If possible, replace with a ProcessPageList (this is what goes inside the "Add Page" fieldset).  It feels like a more natural fieldtype since it uses the tree.

I think providing choice is a good thing; let the user decide what best fits in their workflow. In the first version of the module, it only used a 'page list' (actually, an InputfieldPageListSelectMultiple) and the results were not very pretty. I (and others) found it a bit tedious, especially with long trees. To offer more choice though, I have gone ahead and added an option to select pages using PageListSelectMultiple (MB version 0.1.2).

Since version 0.0.4, there is already a permission 'menu-builder-selector' that hides the selectors field, hence prevents non-superusers from adding pages to the menu using selectors

since this would replace the ASM way of adding menu items, that means you can't change a CSS Class/ID until AFTER it's been added to the menu.  I think that's OK since right now you change CSS Classes/IDs both before and after adding the menu item, which I find a little confusing.

This is also about flexibility. You add a menu item including CSS Classes/IDs and you forget about it ....Until when you have a need to edit them, then you head to their settings. I think this a good feature

If possible, upon clicking a page to add to your menu on the ProcessPageList, it should show an "add" action/button (native ProcessPageList action stuff), that when clicked, adds the page to the actual menu (some ajax/dom manipulation required here I think) instead of putting it in a "limbo" state like it is right now until a page is saved.

As far as being able to add custom links, that should go under the "Add Custom Link" fieldset.  Perhaps also remove batch ability to add Custom Links and utilize general Inputfieldtext instead of a table structure.  Remove ability to set CSS Class and ID at this stage.

Using the PageListSelect to add items to the menu in that way will require some (JS) work which TBH, I can't spare some time to learn how to do, test and implement.

I am afraid I don't see any real benefit to removing the ability to add CSS Classes and ID to custom links at the point of creation . As stated previously, it allows you to do things once, and only edit them later if needed.

Now for the "Menu Items" section:

Right now, you're utilizing custom styling and javascript for the adding page items and creating the toggle boxes, however it should be possible to use make each added menu item act as an InputfieldFieldset.  When each item/fieldset is clicked, it should reveal the 5 editable fields (Title, URL, CSS ID, Class Class, New Window) and ability to delete.  Apply the nestedSortable JS to that list to make it have drag/drop capability with indenting.  A final result similar to this screenshot which I hacked together.

You 'hacked-together' version looks interesting. I would find it confusing if there were many items though. It wouldn't have that 'menu-items-look' to it, IMHO. Having said that, I prefer the current Menu Builder look     

"Main" tab should be renamed to "Settings".  Put as second tab.

"Items Overview" tab: this could be removed (or disabled by default) since it's essentially just displaying the same menu in a table.  Feels repetitive.

"Delete" tab should remain as is.

I like the idea about renaming the 'Main' tab to 'Settings' and moving it to second, possibly 3rd tab. I am not sure how much impact renaming would have on any tabs out there that have already been translated (non-English sites). I'll have a think.

I have found the 'Items Overview' tab quite invaluable. Even on a menu with, say, just 3 items, if I only wanted to find out their CSS IDs and/or Classes, it saves me from clicking to expand and collapse each menu item's settings just to have a quick glance about their CSS attributes (+ new tab setting for custom links).

Again, thanks for taking your time to review the module. Although I take a different view to many of your suggestions, I appreciate that you took time to think about and write down your thoughts.  

How's the screencasts coming along?

Cheers,

kongondo

[dlen]

Dear forists,

this post is just to help others to find the solution to the issue, which has been mentioned and solved here and in the following post by hansv, and which is currently difficult to spot via Google.

Snippets of the error message are

    No menu items found!     

  MarkupMenuBuilder.module(88)

To repeat the explanation given, kongondos Menu Builder, which is really a great piece of software, creates named menu datasets, aka pages, and can in monolingual sites render the respective menus by using the menu dataset / page name.

In multilingual sites,though, it currently cannot. One has to resort to other ways of addressing the prepared menu dataset, by its ID.

To get the latter, open the menu editing page and look into the address bar.

Now render your menu with a string analog to 

$menumodule->render(1023);

(added) Kongondo noted "that you can also pass a menu $page or an array of menu items in addition to the ID."

I don't know how exactly to get a menu page object into a variable, so I resort to the ID method.

Of course, you can include the options as explained in the readme.

This is all redundant information but may be it helps somebody to get it faster.

[kongondo]

Dear forists,

 

Have you seen this as well? https://processwire.com/talk/topic/4451-menu-builder/?p=95415. For such sites, you can also pass the $page object or an array of menu items. This is also mentioned in the readme   

PS: Moving this topic to MB support forum...

[dlen]

kongondo, do you have a donation pathway, i d like to buy you 2 coffees or something.

[kongondo]

kongondo, do you have a donation pathway, i d like to buy you 2 coffees or something.

I'm glad you find the module useful

[bluellyr]

Hi, I am new using PW and I am building my first website.

I am trying to use the menu builder to create the a dropdown menu using bootstrap and not getting menu to work. I don't know if it is a programing problem or a css problem.

Where can I find some example with Menu Builder and bootstrap to build a dropdown?

How can I insert new attributes into the menu tag or into the children's tags, like 'role=""' or other attribute?

Thank you.

[kongondo]

Hi @bluellyr,

Welcome to PW and the forums. Currently it's not possible but its something I think I can easily add to the module (no ETA though!). Meanwhile, you can try what @Webrocker did here or check if MarkupSimpleNavigation (a non-GUI menu builder) will enable what you are after.

[bluellyr]

Hi, can I get the menu array items from the menu builder? or it is to difficult?

If possible I could construct the menu manualy.

Thank you.

[kongondo]

Everything you need is in that example ...Constructing the menu manually is also a good option where there are only few items and the menu will not be changing

[bluellyr]

Hi, I manage to build the menu in a bootstrap navigation bar,

thank for your help.

Now I have other problem, when creating menu items in the Menu builder admin,

the pages I had created and want to add to the menu I can not find them on the pages dropdown.

The pages are publish and are like others, it is possible a config problem? 

Can you give me some hints about this?

Thank you.

[kongondo]

Have a look at the second paragraph in this section in the README. I have just updated it now. By default, only 50 pages are returned if using AsmSelect or PageAutocomplete. Either use a custom selector or the 'PageListSelectMulitple' method to add pages to your menu. Let me know if this resolves your issue.

[kongondo]

Update: Version 0.1.4

As per @cJonathan Lahijani suggestion, in ProcessMenuBuilder, I have moved the first tab 'Main' to become the third tab and renamed it to 'Settings'. I think it looks much nicer now, thanks @Jonathan. This is in dev branch only for now.

[jannisl]

Hey kongondo, 

this plugin is amazing! Is it possible to output something like this:

<a href="#" onclick="return false">Menu Link</a>

I want to add the "onclick" event.

I hope you can help me,

thanks Jannis.

[tpr]

If you use JavaScript anyways, why not add the event also by JavaScript?

[kongondo]

...Is it possible to output something like this:

<a href="#" onclick="return false">Menu Link</a>

I want to add the "onclick" event.

Hi @jannisl,

Welcome to the forums. Glad you find the module useful.

Currently, that can't be done. There has been a similar request recently and am currently thinking how best to implement this. My current thinking is to allow such functionality both in the backend (Menu Builder GUI) and within template files using the API. In the backend, all extra attributes for each menu item could be entered in one text box (each item having its own text box for this similar to CSS classes) in comma-separated key=value pairs, e.g.

role=button, onclick=return false, 

In the frontend (template file) such extra attributes would be added universally  by passing them as options, e.g.

$options = array (
          'wrapper_list_type' => 'ul',// ul, ol, nav, div, etc.
	  'wrapper_list_type_attributes' => 'role=menu',// comma-separated key=value pairs
	  'list_type' => 'li',
	  'list_type_attributes' => 'role=button, onclick=return false',// comma-separated key=value pairs
	  'submenu_attributes' => 'role=banner',// applied to submenu wrapper element; comma-separated key=value pairs
);

As per my example, the extra attributes would be applied to all elements specified in *_type + submenu (usually inner <ul>). By default these will only be applied if specified by developer/designer.

The differences between specifying attributes in the backend vs frontend (API)

• Finer-grained control in the backend; apply extra attributes selectively (only on required menu items)
• Universal attributes application only possible in the frontend
• Application of attributes to menu and submenu wrappers only possible in the frontend

What do you guys think? Would this work for you?

Edited February 8, 2016 by kongondo

[electricarts]

Hi,

i'm starting my first real project with PW (coming from Contao and a little bit of WordPress). I wanna use UIKit as CSS framework and right now i'm trying to setup the navigation. I wanna use the Menu Builder and everything is fine, except one "problem": 

For a dropdown in the navigation bar the submenu ul has to wrapped in an extra div. Something like this:

<nav class="uk-navbar">
	<ul class="uk-navbar-nav">
	    <li class="uk-active"><a href="">Active</a></li>
	    <li><a href="">Item</a></li>
	    <li class="uk-parent" data-uk-dropdown="" aria-haspopup="true" aria-expanded="false">
	        <a href="">Parent</a>

	        <div class="uk-dropdown uk-dropdown-navbar uk-dropdown-bottom">
	            <ul class="uk-nav uk-nav-navbar">
	                <li><a href="#">Item</a></li>
	                <li><a href="#">Another item</a></li>
	                <li class="uk-nav-header">Header</li>
	                <li><a href="#">Item</a></li>
	                <li><a href="#">Another item</a></li>
	                <li class="uk-nav-divider"></li>
	                <li><a href="#">Separated item</a></li>
	            </ul>
	        </div>

	    </li>
	</ul>
</nav>

Is this possible with the module or do i have to write another solution? And how could i add the attributes (data-uk-dropdown)? 

Mario

Edited February 23, 2016 by kongondo
Moved your topic to Menu Builder's support forum