Menu Building

[mrkhan]

Hello,

i am trying to build one Page in CMS for menu Building.

i have created a field name "menu_page" Page type & one text filed name "depth"

now i have crated a new repeater name "menus" with above both fields.

menus (repeater)
                             menu_page (page type, single page)
                             depth (text)

now i add it one page name "header" and added values as bellow

menus1
             menu_page "about us" depth (0)
menus2
             menu_page "About Company" depth (1)
menus3
             menu_page "Products" depth (3)
menus4
             menu_page "Contact Us" depth (0)

in my template file i have code as bellow

<ul>
<?php
$menus=$pages->get("/header/");
foreach($menus as $menu)
{
?>
<li><a href="<?php echo $menu->url;?>"><?php echo $menu->title;?></a></li>
<?php
}
?>
</ul>

This shows TOP menu Menu but how to get SUB menu according to Dept of each menu.

Thanks

[LostKobrakai]

If you're already trying to build menus manually an not automated from the page tree, then you should take a look at kongondo's menu builder module. 

[mrkhan]

If you're already trying to build menus manually an not automated from the page tree, then you should take a look at kongondo's menu builder module. 

Hello,

i saw that module but want to create my page for creating menu through page not through module.

Thanks

[LostKobrakai]

Is there a specific reason to do so? Maybe we can help you out without the need for you to reinvent the wheel.

[Tom.]

Hello,

i am trying to build one Page in CMS for menu Building.

i have created a field name "menu_page" Page type & one text filed name "depth"

now i have crated a new repeater name "menus" with above both fields.

menus (repeater)
                             menu_page (page type, single page)
                             depth (text)

now i add it one page name "header" and added values as bellow

menus1
             menu_page "about us" depth (0)
menus2
             menu_page "About Company" depth (1)
menus3
             menu_page "Products" depth (3)
menus4
             menu_page "Contact Us" depth (0)

in my template file i have code as bellow

<ul>
<?php
$menus=$pages->get("/header/");
foreach($menus as $menu)
{
?>
<li><a href="<?php echo $menu->url;?>"><?php echo $menu->title;?></a></li>
<?php
}
?>
</ul>

This shows TOP menu Menu but how to get SUB menu according to Dept of each menu.

Thanks

I completely agree with LostKobrakai, however to answer your question I would do the following:

<ul>
<?php
foreach($page->menus as $item) {
	$prev = $item->prev->depth ? : 0;
	$next = $item->next->depth ? : 0;
	$depth = $item->depth;
	$count = $depth - $next;

	echo ($prev < $depth ? "<ul><li>" : "<li>") . "<a href='{$item->menu_page->url}'>{$item->menu_page->title}</a>";

	if($count == 0) {
		echo "</li>";
	} else if($count > 0) {
		for($c = 1; $c <= $count; $c++) { echo "</li></ul>"; }
                echo "</li>";
	}
} ?>
</ul> 

I've just tried to come up with this from my head, so it might need a little tweaking. 

EDIT:

Updated based on Macrura's notes. 

[Macrura]

yes, sometimes for simple sites i do something like this (usually use a table, but repeater should work);

i'm not sure about depth - seems maybe unnecessary;

i usually have a checkbox called child which simply makes the current row/repeater a child of the previous non-child item in the order that the items appear in...

also i think you can maybe use this shorter ternary syntax if you are using the code above

$prev = $item->prev->depth ?: 0;    
$next = $item->next->depth ?: 0;

[mrkhan]

Hello @Macrura,

thanks for your reply. your idea look similar to me what i am looking.

could you please share with me your code for this purpose and checkbox for child.

many thanks

[Macrura]

sure - here's the function - you'd need to have fields for menu_group (checkbox), menu_page (page select) and menu_href (url) which overrides page select;

in this case you also need to set the href as a # for the parent items, but you could change this probably

function semanticNav($field) {
	$page = wire('page');
	$menu = $field;
	$out = '';
	$group = false;

	foreach($menu as $item) {
		$class = '';

		// if this item is not in a group, but group is true from previous
		// item, close the ul /li now:
		if($item->menu_group != 1 && $group) $out .= "</ul>\n</li>\n";

		$url = '';
		if($item->menu_page->id) $url = $item->menu_page->url;
		if($item->menu_href) $url = $item->menu_href;
		if($item->menu_page->id == $page->rootParent->id) $class = " class='current'";

		if($item->menu_group == 1 && $item->menu_href == '#') {
			$out .= "<li class=\"dropdown\">\n";
			$out .= "\t<a href='#' class='dropdown-toggle' data-toggle='dropdown'>$item->menu_title</a>\n";
			$out .= "\t\t<ul class=\"dropdown-menu\">\n";
			$group = true;
		}

		// Sub items
		if($item->menu_group == 1 && $item->menu_page->id) {
			$out .= "\t<li{$class}><a href='$url'>$item->menu_title</a></li>\n";
			$group = true;
		}
		// Regular Items:
		if($item->menu_group != 1 && $item->menu_page->id) {
			$out .= "\t<li{$class}><a href='$url'>$item->menu_title</a></li>\n";
			$group = false;
		}

	}

	return $out;
}

[mrkhan]

Hello @Macrura,

really thanks for your code but unfortunately i am unable to do what i need, i think code is great but only i am unable to understand.

like i have menus like that

Home
About us
Products
     Product 1
         sub product
     Product 2
         sub product1
         sub product2
    Product 3
         sub product
Contact us

i can't understand how i will add 2 sub level products in page?

as i told you i am using repeater when i add item i can select the page and select the check box for group and set the url , but how i will add 2nd menus like under 

product -> Product 2 ->sub product1

could you please show me some pics of your page view & how you make repeater with fields?

really appreciate all your help

Thanks

[Macrura]

my setup and that function is really only for simple sites needing only 2 levels; also for the way i have it setup i'm using a table, but it should work with any wirearray.

in your case it seems that you may be better off using MSN, or Menu builder, or even a separate branch of the page tree which can generate an MSN menu but specifying a root page argument, and then overriding the URL to be the page select instead of the virtual menu page/node.

there are a lot of posts on this forum with recursive functions for making menus of all kinds, from all different types of sources, be it the page tree, a menu tree, or repeaters; here are some:

https://processwire.com/talk/topic/9033-mega-menu/?hl=%2Bnested+%2Bmenu#entry87159

https://processwire.com/talk/topic/8544-want-to-create-a-custom-menu/?hl=%2Bnested+%2Bmenu#entry82687

https://processwire.com/talk/topic/3650-multi-level-menu/?hl=%2Bnested+%2Bmenu

https://processwire.com/talk/topic/2787-custom-menu-not-related-to-page-tree/?hl=%2Bnested+%2Bmenu

[clsource]

My menus work like this

First create a "menu" template,

a simple empty template that will hold "menu-item" pages as children.

Then create the "menu-item" template that can hold 'menu-item' pages as children,

fill it with these fields :

- (title field) The title for the menu

- (item field) A page reference (Single Page or NullPage) field that will link any page in the site except pages with menu or menu-item template.

- (isExternalLink field) A checkbox that tells if the link is outside the site.

- (externalLink field) a Textbox that holds the external url if the checkbox isExternalLink is active.

You can add many additional fields depending on your needs, like css, js, or other information.

When that is done just create a page named "Menu" with the "menu" template,

later add children pages with the "menu-item" template.

Now you have a menu that can be rendered

like any other page in processwire.

$menu = $pages->get('/menu');
foreach($menu->children as $menu_item) {
    
    if($menu_item->isExternalLink){
      echo "{$menu_item->externalLink}";
    } else {
      echo "{$menu_item->item->url}";
    }
}

With this approach you can rely on the Processwire backend

to give order to the items and create as many children and deep levels as you like

[Macrura]

to answer mrkhan's query regarding the way my setup for this example is, here is the screenshot of the table that generates the menu:

@clsource - your example is also the same as what is discussed in depth in my last link provided in my prior post; which has the same features/setup. Visitors looking at this thread may want to visit that topic because it also provides the comprehensive code to output the markup for such a setup.

[adrianmak]

to answer mrkhan's query regarding the way my setup for this example is, here is the screenshot of the table that generates the menu:

menu_table.jpg

@clsource - your example is also the same as what is discussed in depth in my last link provided in my prior post; which has the same features/setup. Visitors looking at this thread may want to visit that topic because it also provides the comprehensive code to output the markup for such a setup.

How to implement like as your screenshoot ?

I'm going to use pw's out-of-box functionality and core modules to build a menu navigation, allow people to select which page to show on an menu navigation.

I knew that Page field in the right module for selecting pages.But in your screenshot, u can have three fields in a row, text, page and url

Which technique u used ?

[LostKobrakai]

That's the table pro field used there.

[Macrura]

yes, as mentioned you could use whatever you have in your kit and prefer to use, table, pagetable, repeaters, pages...

though you may want to give Menu Builder a try...