Dropdown Menu

[luzox]

Hello all,

I have a question about the cms.

I have a website its almost done, only the menu is not finished yet because i have drowpdown menu

I already found the children pages but dont know how to put it in the menu

So i have:

- Services (Main)

        - Webshop (Sub)
        - Website  (Sub)

If something is not clear tell me please.

(need a php code.. )

[diogo]

Welcome to the forum luzox!

What is the markup that the dropdown has to have?

[luzox]

                            <ul class="blue nav" id="css3-menu">
                                <li class="dropdown">
                                    <a class="dropdown-toggle_" data-toggle="dropdown" href="/website">Services</a>
                                    <ul class="dropdown-menu">
                                        <li><a href="/website">Websites</a></li>
                                        <li><a href="/webshop">Webshops</a></li>
                                        <li><a href="/cms">CMS Systemen</a></li>
                                    </ul>
                                </li>
                            </ul>

That is wat my menu looks like.  as you can see :  websites,webshops,cms is an sub from Services

[Manfred62]

Hi luzox,

not sure where's the problem? You can e.g. use the Markup Simple Navigation module. There you have a lot of config options.

Create a navigation.inc (simple example of a site I build). Take a look at the docs of the module for the options.

<?php
  $treeMenu = $modules->get("MarkupSimpleNavigation"); // load the module
  $options = array(
     'current_class' => '', // string (default 'current') overwrite current class
     'max_levels' => 1, // int (default null) set the max level rendered
     'outer_tpl' => '<ul id="navi">||</ul>', // template string for the outer most wrapper. || will contain entries
     'item_current_tpl' => '<strong>{title}</strong>' // template string for the current active inner items
  );
  echo $treeMenu->render($options); // render menu
 ?>

Then put something like this in the place, where you need your navigation to be: 

<?php include("./navigation.inc"); ?>

Make a first try without options, to see what the modules output looks like. Then fine tune your options.

[luzox]

Manfred,

I've used your code and module. It works but i dont get an dropdown menu?  it does not see the sub pages?

                            <ul class="blue nav" id="css3-menu">
                                <li class="dropdown">
                                    <a class="dropdown-toggle_" data-toggle="dropdown" href="/website">Services</a>
                                    <ul class="dropdown-menu">
                                        <li><a href="/website">Websites</a></li>
                                        <li><a href="/webshop">Webshops</a></li>
                                        <li><a href="/cms">CMS Systemen</a></li>
                                    </ul>
                                </li>
                            </ul>

So again see the code above this is what i need?

[Wanze]

This is a good exercice to getting know the ProcessWire API

A good overview how you can find pages and output content of fields:

http://processwire.com/api/variables/pages/

And here's one solution among others, how you would do your menu:

<ul class="blue nav" id="css3-menu">
<li class="dropdown">
<a class="dropdown-toggle_" data-toggle="dropdown" href="<?php echo $pages->get('/services/')->url; ?>">Services</a>
<ul class="dropdown-menu">
<?php
//We need to loop over the children of Services and output their links
$children = $pages->get('/services/')->children();
foreach ($children as $child) {
  echo "<li><a href='{$child->url}'>{$child->title}</a></li>";
}
?>                                
</ul>
</li>
</ul>

[luzox]

Wanze,

Yes it works but now is hard coded? , i want the code to check the pages and if there is an submenu it has to show now i need to put all the menu items hardcoded in it?

[ryan]

Wanze's example is just demonstrating a bit to get you started. You can hard code as little (or as much) as you want. When we present examples here, it's sometimes easier for people to follow if we hard code some things to make the context clear. But that doesn't mean you have to (or should) do that in your own implementation. Basically, we're trying to teach rather than do it for you, so that you can apply what you learn in a much broader context. In addition to the API page Wanze mentioned, you might also want to look at the /site/templates/sitemap.php file in the default profile. This demonstrates creating a navigation tree for an entire site, and may serve as a good starting point for what you are trying to do. 

[luzox]

Ok Thanks ill work it out.  Another Question.

I see the menu in the cms.   Home is always the parent is it changeable?

because i want to make home seperate so i can multiple parents.

Like this:

- Home (parent)
                             - Services (parent)

                             - webshop (parent -> Services)

[Manfred62]

Ryan's sitemap file is a good example of one way to do it. If you use the module, there will be some more flexibility I think.

At first try it without the options, to see if it will show the complete tree (attention: without css style, because missing classes).

$treeMenu = $modules->get("MarkupSimpleNavigation");
echo $treeMenu->render();

now you have to use the options, to config/style your menu.

'has_children_class' => 'dropdown',
'outer_tpl' => '<ul class="blue nav" id="css3-menu">||</ul>',
'inner_tpl' => '<ul class="dropdown-menu">||</ul>',

these are some options you need, maybe more...

To get the first link style, I think you have to do this with css. Maybe .dropdown + a (styling of dropdown-toggle)

<a class="dropdown-toggle_" data-toggle="dropdown"..

the rest depends on your css.

EDIT: my first example is only something, I used on a test site of mine. Only to show you the options of this awesome module.

Edited February 17, 2013 by Manfred62

[Soma]

Manfred,

I've used your code and module. It works but i dont get an dropdown menu? it does not see the sub pages?

                            <ul class="blue nav" id="css3-menu">
                                <li class="dropdown">
                                    <a class="dropdown-toggle_" data-toggle="dropdown" href="/website">Services</a>
                                    <ul class="dropdown-menu">
                                        <li><a href="/website">Websites</a></li>
                                        <li><a href="/webshop">Webshops</a></li>
                                        <li><a href="/cms">CMS Systemen</a></li>
                                    </ul>
                                </li>
                            </ul>

So again see the code above this is what i need?

Because the option max_levels is set to 1 in the example he provided. Youd have to change it to 2 if you need two levels. Is this so hard to understand? :-P

[luzox]

Manfred,

Thnks i have it worked, but now i need to find how to give the <ul> (wich has dropdown a class)

[Manfred62]

do this not work?

'inner_tpl' => '<ul class="dropdown-menu">||</ul>',

[luzox]

yes thats it i figured it out myself already , thanks everyone great learning

[Soma]

Glad you figured it out!

'inner_tpl' => '<ul class="dropdown-menu">||</ul>',

This is something added to all inner child <ul>'s then, which is what you need.

'has_children_class' => 'has_children',

also is something that can be used to add a class to <li>'s which have children to style it different to indicate there's children for example

[Manfred62]

just another tip: normally you don't need the class="dropdown-menu". This can be done with simple css.

#css3-menu ul {all the styles of dropdown-menu;}

[Dynamite]

Old Question but still first item regarding dropdown menus and processwire on google. So here is my solution

                             <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
				<!-- top navigation -->
				<ul class='nav navbar-nav'>

					<?php

						// 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='current active'><a href='$child->url'>$child->navlinkname</a></li>"; //<!-- Bootstrap active Class-->
							} else {
								if($child->hasChildren() && $child->id != 1) {
									$navigation = "<li class='dropdown'><a class='dropdown-toggle' data-toggle='dropdown' href='$child->url'>$child->title</a>";
									$navigation .= "<ul class='dropdown-menu sub_menu'>";
									foreach ($child->children as $item) {
										$navigation .= "<li><a href='$item->url'>$item->navlinkname</a></li>";
									}
									$navigation .= "</ul>";
									$navigation .= "</li>";
									echo $navigation;
								}else{
									$menu = "<li class='item'><a href='$child->url'>$child->title</a></li>";
									echo $menu;
								}
							}
						}
					?>
                                     </div>

[Soma]

Your solution does output an UL for each subchildren page...

[szabesz]

Old Question but still first item regarding dropdown menus and processwire on google. So here is my solution

Soma is talking about the "second" <ul> in you code. However, where do you close <ul class='nav navbar-nav'>? I cannot seem to find it. By taking a look at the validity of your generated HTML also helps to iron out your algorithm that generates the output.

Adrian's Tracy Debugger module can help: http://modules.processwire.com/modules/tracy-debugger/ as it has validation features as discussed here:

https://processwire.com/talk/topic/12208-tracy-debugger/?p=119538

If you do not want to use the module, you can just use the service manually:

https://validator.nu

[Dynamite]

Your solution does output an UL for each subchildren page...

Fixed that. Thanks

[MaryMatlow]

On 2013-02-17 at 0:09 PM, Soma said:

Glad you figured it out!

'inner_tpl' => '<ul class="dropdown-menu">||</ul>',

This is something added to all inner child <ul>'s then, which is what you need.

'has_children_class' => 'has_children',

also is something that can be used to add a class to <li>'s which have children to style it different to indicate there's children for example

I'm using MarkupSimpleNav and somehow the main level item with children do not have the "has_children" class name appended to it? What am I doing wrong?

Thanks

[Macrura]

@MaryMatlow can you provide both your php code and the output code. Without seeing that there's not much anyone can do to help.

[MaryMatlow]

Sure. Here's the php code:

	
<?php
  $treeMenu = $modules->get("MarkupSimpleNavigation"); // load the module
  $options = array(
    'parent_class' => 'parent',
    // overwrite class name for current parent levels

    'current_class' => 'current',
    // overwrite current class

    'has_children_class' => 'has_children',
    // overwrite class name for entries with children

    'levels' => true,
    // wether to output "level-1, level-2, ..." as css class in links

    'levels_prefix' => 'level-',
    // prefix string that will be used for level class

    'max_levels' => 2,
    // set the max level rendered

    'firstlast' => false,
    // puts last,first class to link items

    'collapsed' => false,
    // if you want to auto-collapse the tree you set this to true

    'show_root' => false,
    // set this to true if you want to rootPage to get prepended to the menu

    'selector' => 'template!=MediaLibrary',
    // define custom PW selector, you may sanitize values from user input

    'selector_field' => 'nav_selector',
    // string (default 'nav_selector') define custom PW selector by using a property or field on a page. Use this setting if you want to overwrite the default nav_selector

    'outer_tpl' => '<nav class="collapse navbar-collapse navbar-right" role="navigation">
                    <div class="main-menu"><ul class="nav navbar-nav">||</ul></div></nav>',
    // template string for the outer most wrapper. || will contain entries

    'inner_tpl' => '<div class="dropdown-menu"><ul>||</ul></div>',
    // template string for inner wrappers. || will contain entries

    'list_tpl' => '<li class="dropdown">||</li>',
    // template string for the items. || will contain entries, %s will replaced with class="..." string

    'list_field_class' => '', // string (default '') add custom classes to each list_tpl using tags like {field} i.e. {template} p_{id}

    'item_tpl' => '<a class="dropdown-toggle" data-toggle="" href="{url}">{title}</a>',
    // template string for the inner items. Use {anyfield} and {url}, i.e. {headline|title}, if field is of type image it will return url to image (first image if multiple)

    'item_current_tpl' => '<a class="current" href="{url}">{title}</a>',
    // template string for the active inner items.

    'xtemplates' => '',
    // specify one or more templates separated with a pipe | to use the xitem_tpl and xitem_current_tpl markup

    'xitem_tpl' => '<a href="{url}">{title}</a>',
    // same as 'item_tpl' but for xtemplates pages, can be used to define placholders

    'xitem_current_tpl' => '<span>{title}</span>',
    // same as 'item_current_tpl' but for xtemplates pages

    'date_format' => 'Y/m/d',
    // default date formatting for Datetime fields and native created/modified

    'code_formatting' => true,
    // enable or disable code indentations and newslines in markup output

    'debug' => false,
    // show some inline information about rendertime and selectors used as html comments

);

  echo $treeMenu->render($options); // render menu
 ?>

And here's the output code:

<!-- main menu -->
                        	
	
<nav class="collapse navbar-collapse navbar-right" role="navigation">
                    <div class="main-menu"><ul class="nav navbar-nav">
	<li class="dropdown"><a class="dropdown-toggle" data-toggle="" href="/classes/">Classes</a>
		<div class="dropdown-menu"><ul>
			<li class="dropdown"><a class="dropdown-toggle" data-toggle="" href="/classes/class-schedule/">Class Schedule</a></li>
			<li class="dropdown"><a class="dropdown-toggle" data-toggle="" href="/classes/class-descriptions/">Class Descriptions</a></li>
			<li class="dropdown"><a class="dropdown-toggle" data-toggle="" href="/classes/new-to-yoga/">New to Yoga</a></li>
			<li class="dropdown"><a class="dropdown-toggle" data-toggle="" href="/classes/teachers/">YogaSpace Teachers</a></li>
		</ul></div>
		</li>
	<li class="dropdown"><a class="dropdown-toggle" data-toggle="" href="/workshops/">Workshops</a></li>
	<li class="dropdown"><a class="dropdown-toggle" data-toggle="" href="/price-passes/">Prices</a></li>
	<li class="dropdown"><a class="current" href="/about/">About Us</a>
		<div class="dropdown-menu"><ul>
			<li class="dropdown"><a class="dropdown-toggle" data-toggle="" href="/about/what-we-offer/">What We Offer</a></li>
			<li class="dropdown"><a class="dropdown-toggle" data-toggle="" href="/about/the-studio/">The Studio</a></li>
			<li class="dropdown"><a class="dropdown-toggle" data-toggle="" href="/about/gallery/">Gallery</a></li>
			<li class="dropdown"><a class="dropdown-toggle" data-toggle="" href="/about/community/">Community</a></li>
			<li class="dropdown"><a class="dropdown-toggle" data-toggle="" href="/about/join-our-team/">Join Our Team</a></li>
		</ul></div>
		</li>
	<li class="dropdown"><a class="dropdown-toggle" data-toggle="" href="/contact/">Contact</a></li>
</ul></div></nav>                <!-- /main nav -->

Appreciate your help. Thanks.

 

[Speed]

Try to change this....

'show_root' => true,

Hope that helps.

EDIT: Disregard this message above, I misread... Did the source code you posted came from browser developer mode? Or have you  try to see 'has_children show up in developer mode like my case (chrome browser)?

[MaryMatlow]

15 hours ago, Speed said:

Did the source code you posted came from browser developer mode?

Yes, its the source code from browser. And below is the screenshot from the Chrome Inspect window: