MarkupSimpleNavigation

felic · February 16, 2016

Yes, great! Haven't tried the OR-groups selector yet.

"selector_level2" => "(parent!=<parent_id_of_permission_controlled_pages>), (id=$items)"

does the job.

Thanks you very much!

neophron · March 6, 2016

Hi Soma,

thanks for this cool module – Danke

I have a question about adding some additional stuff (data-attribut and css-styles) to the markup.

I'm using the uikit: http://getuikit.org and I wanted to insert their accordion in my menu: http://getuikit.org/docs/nav.html (check »Accordion«)

To convert a menu link into a accordion, I have to add this: <ul class="uk-nav uk-nav-parent-icon" data-uk-nav> and also this: <li class="uk-parent">

to a sublink.

I'm trying to achieve this:

Start

Page 1

parent-subpage --> this shall be the accordion link

item 1

item 2

item 3

Currently I'm using this:

<?php
$treeMenu = $modules->get("MarkupSimpleNavigation"); // load the module
$options = array(
'parent_class' => 'parent',
'current_class' => 'active',
'has_children_class' => 'has_children',
'collapsed' => false,
'show_root' => true
);
echo $treeMenu->render($options);
?>

Thank you

Edited March 6, 2016 by cstevensjr
Put example in Code Block

ottogal · March 7, 2016

If I understand it right, using the options

'outer_tpl' => '<ul class="uk-nav uk-nav-parent-icon" data-uk-nav>||</ul>',
'inner_tpl' => '<ul class="uk-nav-sub">||</ul>',
'parent_class' => 'uk-parent',

should do it.

neophron · March 7, 2016

If I understand it right, using the options

'outer_tpl' => '<ul class="uk-nav uk-nav-parent-icon" data-uk-nav>||</ul>',
'inner_tpl' => '<ul class="uk-nav-sub">||</ul>',
'parent_class' => 'uk-parent',

should do it.

Thanks for your help.

But for various reasons, I choose a different solution. One of the reason was, that I didn't thought about the accordion trigger. It can't be a link and trigger at the same time.

So I'm gonna build a half static, half dynamic accordion menu. It's possible, cause it's with Processwire

Soma · March 7, 2016

@surffun it's the "collapsed" => true, option.

Soma · March 7, 2016

Then in that case you would simply need to tell the module what root your menu has. Default is "/". (third argument)

Most common is for example use the $page->rootParent() as the root. ($page->rootParent() will always return the root level page of the current page even if on a root page itself)

echo $tree->render($options, null, $page->rootParent());

Soma · March 7, 2016

Sorry there's no example CSS. Definately something I try to add.

Write your CSS with using the css classes the module gives you by default. . Often not much is needed. Also you can change the class names and use various tpl options too to add your own.

I mostly use the default and give the "outer_tpl" => "<ul class='main-menu'>||</ul>" as a starting point.

slave · March 29, 2016

Hello
my english is not so good, I hope you can help me
I would like to use this bootsrap navigation, I try to have 3 days
can someone please help me ??

these are my options

$options = array(
    'parent_class' => '',
    'current_class' => 'active',
    'has_children_class' => 'dropdown',
    'levels' => false,
    'levels_prefix' => '',
    'max_levels' => null,
    'firstlast' => false,
    'collapsed' => false,
    'show_root' => true,
    'selector' => 'template=site',
    'selector_field' => '',
    'outer_tpl' => '<ul class="nav navbar-nav">||</ul>',
    'inner_tpl' => '<ul class="dropdown-menu">||</ul>',
    //'list_tpl' => '<li%s>||</li>',
	'list_tpl' => '<li%s>||</li>',
    'list_field_class' => '',
    'item_tpl' => '<a class="dropdown-toggle" data-toggle="dropdown" href="{url}">{title}</a>',
    'item_current_tpl' => '<a href="{url}">{title}</a>',
    'xtemplates' => '',
    'xitem_tpl' => '<a href="{url}">{title}</a>',
    'xitem_current_tpl' => '<span>{title}</span>',
    'date_format' => 'Y/m/d',
    'code_formatting' => true,
    'debug' => false
);

that is the output......

how can I insert the dropdown dropdown-submenu to this position

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Die 3 Meta-Tags oben *müssen* zuerst im head stehen; jeglicher sonstiger head-Inhalt muss *nach* diesen Tags kommen -->
    <title>Bootstrap-Basis-Vorlage</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!--<link rel="stylesheet" type="text/css" href="site/templates/js/topnavsub/css/bootstrap-submenu.min.css">-->
    <!--<script src="site/templates/js/topnavsub/js/bootstrap-submenu.min.js"></script>-->
<style type="text/css">
.dropdown-menu > li.kopie > a {
    padding-left:5px;
}
 
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
   top:0;left:100%;
   margin-top:-6px;;
   -webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;
 }
  
.dropdown-submenu > a:after {
  border-color: transparent transparent transparent #333;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  content: " ";
  display: block;
  float: right;  
  height: 0;     
  margin-right: -10px;
  margin-top: 5px;
  width: 0;
}
 
.dropdown-submenu:hover>a:after {
    border-left-color:#555;
 }

.dropdown-menu > li > a:hover, .dropdown-menu > .active > a:hover {
  text-decoration: underline;
}  

@media (max-width: 767px) {

  .navbar-nav  {
     display: inline;
  }
  .navbar-default .navbar-brand {
    display: inline;
  }
  .navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
  }
  .navbar-default .navbar-nav .dropdown-menu > li > a {
    color: red;
    background-color: #ccc;
    border-radius: 4px;
    margin-top: 2px;   
  }
   .navbar-default .navbar-nav .open .dropdown-menu > li > a {
     color: #333;
   }
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
     background-color: #ccc;
   }

   .navbar-nav .open .dropdown-menu {
     border-bottom: 1px solid white; 
     border-radius: 0;
   }
  .dropdown-menu {
      padding-left: 10px;
  }
  .dropdown-menu .dropdown-menu {
      padding-left: 20px;
   }
   .dropdown-menu .dropdown-menu .dropdown-menu {
      padding-left: 30px;
   }
   li.dropdown.open {
    border: 0px solid red;
   }

}
 
@media (min-width: 768px) {
  ul.nav li:hover > ul.dropdown-menu {
    display: block;
  }
  #navbar {
    text-align: center;
  }
}  
 </style>
    <!-- Unterstützung für Media Queries und HTML5-Elemente in IE8 über HTML5 shim und Respond.js -->
    <!-- ACHTUNG: Respond.js funktioniert nicht, wenn du die Seite über file:// aufrufst -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
<div class="container">

<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" target="_blank">NewWindow</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">

<ul class="nav navbar-nav">
	<li class="active"><a href="/">Home</a></li>
	<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="/de/seit0/">Site 1</a>
		<ul class="dropdown-menu">
			<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="/de/seit0/action/">SubSite 1</a>
				<ul class="dropdown-menu">
					<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="/de/seit0/action/sub-action/">Sub action</a>
						<ul class="dropdown-menu">
							<li><a class="dropdown-toggle" data-toggle="dropdown" href="/de/seit0/action/sub-action/xxxxxxx/">SubSite</a></li>
						</ul>
						</li>
					<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="/de/seit0/action/another-sub-action/">Another sub action</a>
						<ul class="dropdown-menu">
							<li><a class="dropdown-toggle" data-toggle="dropdown" href="/de/seit0/action/another-sub-action/sub-action/">Sub action</a></li>
						</ul>
						</li>
				</ul>
				</li>
		</ul>
		</li>
	<li><a class="dropdown-toggle" data-toggle="dropdown" href="/de/test140/">Site 2</a></li>
	<li><a class="dropdown-toggle" data-toggle="dropdown" href="/de/aaaaaaaaaaa/">Site 3</a></li>
</ul></div>
</nav>


</div>
    <!-- jQuery (wird für Bootstrap JavaScript-Plugins benötigt) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Binde alle kompilierten Plugins zusammen ein (wie hier unten) oder such dir einzelne Dateien nach Bedarf aus -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    
    <script>
	

   </script>
  </body>
</html>

arjen · March 29, 2016

Have you tried:

'has_children_class' => 'dropdown dropdown-submenu',

slave · March 29, 2016

Have you tried:

'has_children_class' => 'dropdown dropdown-submenu',

yes, I have tried

I have 2 examples

and the original.

I need help

example 1

example 2

original

arjen · March 30, 2016

Hi slave,

Please look at the hooking example provided by soma on Github. You need to change it like this (written in browser, not tested):

function hookGetListClass(HookEvent $event){
    $child = $event->arguments('page'); // current rendered child page
    $class = $event->arguments('class'); // the class string already present
    // any check on that child to set your custom class
    if(count($child->parents) >= 2 && $child->numChildren){ // Only proceed if at least two parents and if an item has children
        $event->return .= " dropdown-submenu"; // add your custom class to the existing
    }
}

bernhard · April 4, 2016

hi surffun,

of course this is possible. see the docs for all the options: https://github.com/somatonic/MarkupSimpleNavigation#markupsimplenavigation-116

// you need this line only once
$menu = $modules->get('MarkupSimpleNavigation');

// your main menu
echo $menu->render(array(
    'outer_tpl' => '<ul class="show-only-on-big-screens">||</ul>',
    // all other options here
));

// your footer menu for mobile
echo $menu->render(array(
    'outer_tpl' => '<ul class="show-only-on-small-screens">||</ul>',
    // all other options here
));

and then you can hide/show the menu by defining css rules for the classes "show-only-on-small/big-screens": http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Macrura · April 5, 2016

the menu css would be in the frontend code you are writing, or using; the module is there to generate the markup you require for the menu.

What framework are you using for your site? Many frameworks have navigation css built in (such as bootstrap)

Macrura · April 6, 2016

correct, so you just need to make sure that MSN is generating the needed markup for the framework you are using.

Does this make sense?

Macrura · April 6, 2016

you just put the css in a stylesheet that is loaded on the page. That file needs to hold the CSS rules that apply to the menu.

Soma · April 6, 2016

@surffun it's kinda hard to tell in general and it's so obvious that we may fail to see where you're struggling. There's tons of options in MSN to modify the output and examples are everywhere.

Still don't know what the problem is you have.

Soma · April 6, 2016

https://processwire.com/talk/topic/1036-markupsimplenavigation/?p=8998

First post of this thread there's a link to an gist with an example to output bootstrap like html.

But it's just an old example I worked out back then. I never used bootstrap so can't tell if it's still working with newer versions? (one of the reason I avoid frameworks )

Robin S · April 7, 2016

I know how I "connect" html markup with css but I do not know how I "connect" MSN with css that's the problem.

You don't need to do anything different with your CSS than you would do on a static website - that goes for the MSN module, any PW module and PW in general. Your CSS just sits in a file linked in the <head> of your template.

If I understand correctly you had an HTML page "start.html" and in PW you have successfully added a template "start" associated with template file "start.php". Lets use a simplified example and say start.php looks like this...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><?= $page->title ?></title>
    <link rel="stylesheet" href="/site/templates/css/mystyles.css">
</head>
<body>
<ul>
    <li><a href="/page-1/">Page 1</a></li>
    <li><a href="/page-2/">Page 2</a></li>
    <li><a href="/page-3/">Page 3</a></li>
</ul>
<?= $page->body ?>
</body>
</html>

...and that unordered list is your menu. Let's also assume you have added those 3 pages to your PW website via the admin. Now you want to replace the static menu with a dynamic menu generated by MSN. You replace the menu markup with the call to MSN. No options are needed because your menu markup doesn't have any classes or anything not generated the MSN default.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><?= $page->title ?></title>
    <link rel="stylesheet" href="/site/templates/css/mystyles.css">
</head>
<body>
<?php
$nav = $modules->get("MarkupSimpleNavigation"); // load the module
echo $nav->render(); // render default menu
?>
<?= $page->body ?>
</body>
</html>

But suppose your static menu does have some classes and also an item for the Home page.

<ul class="main-menu">
    <li class="menu-item"><a class="menu-link" href="/">Home</a></li>
    <li class="menu-item"><a class="menu-link" href="/page-1/">Page 1</a></li>
    <li class="menu-item"><a class="menu-link" href="/page-2/">Page 2</a></li>
    <li class="menu-item"><a class="menu-link" href="/page-3/">Page 3</a></li>
</ul>

Now you do need to set some options for MSN.

<?php
$nav = $modules->get("MarkupSimpleNavigation"); // load the module
// set some options
$nav_options = array(
	'show_root' => true,
	'outer_tpl' => '<ul class="main-menu">||</ul>',
	'list_field_class' => 'menu-item',
	'item_tpl' => '<a class="menu-link" href="{url}">{title}</a>'
);
echo $nav->render($nav_options); // render the menu
?>

Get the idea? So if you were using a bootstrap menu in your static website then you just need to use the MSN options array (and occasionally a hook if you have some more unusual markup) to tell MSN to generate the markup you want.

slave · April 18, 2016

hi i need help please.
I need this navigation structur

(home) (dienstl1) (dienstl2) (dienstl3)

my site struct is this

home
dienstleistungen (temp=produkte)
--dienstl1 (temp=produktkategorie)
----die1
----die2
----die3
--dienstl2 (temp=produktkategorie)
----die1
----die2
----die3
--dienstl3 (temp=produktkategorie)
----die1
----die2
----die3

I have already tried everything

Robin S · April 18, 2016

@slave

<?php
$nav = $modules->get("MarkupSimpleNavigation"); // load the module
// set options
$nav_options = array(
    'show_root' => true,
    'selector' => 'template=produktkategorie'
);
echo $nav->render($nav_options); // render the menu
?>

slave · April 19, 2016

@Robins

thank you for your help.
but that has not helped.
please see the graphic

slave · April 19, 2016

@slave

<?php
$nav = $modules->get("MarkupSimpleNavigation"); // load the module
// set options
$nav_options = array(
    'show_root' => true,
    'selector' => 'template=produktkategorie'
);
echo $nav->render($nav_options); // render the menu
?>

thanks vor your help

but that has not helped kann yout help me please

Robin S · April 19, 2016

@slave: I didn't notice your produktkategorie pages are not direct children of Home.

Try making a PageArray of your menu items and giving that to MSN as the root argument.

<?php
$nav = $modules->get("MarkupSimpleNavigation"); // load the module
// make PageArray of your menu items
$menu_pages = $pages->find("template=produktkategorie")->prepend($pages->get("/"));
echo $nav->render(null, null, $menu_pages); // render the menu
?>

slave · April 19, 2016

@slave: I didn't notice your produktkategorie pages are not direct children of Home.

Try making a PageArray of your menu items and giving that to MSN as the root argument.
<?php
$nav = $modules->get("MarkupSimpleNavigation"); // load the module
// make PageArray of your menu items
$menu_pages = $pages->find("template=produktkategorie")->prepend($pages->get("/"));
echo $nav->render(null, null, $menu_pages); // render the menu
?>
Wow

many thanks exactly it was what I wanted.

slave · April 25, 2016

I have a question
can i make the first link disable ?

MarkupSimpleNavigation

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Similar Content