Jump to content
Soma

MarkupSimpleNavigation

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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 by cstevensjr
Put example in Code Block

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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 :-)

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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());
  • Like 1

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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

08e97b-1459261661.jpg

<!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>

Share this post


Link to post
Share on other sites

Have you tried:

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

Share this post


Link to post
Share on other sites

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
    }
}
  • Like 1

Share this post


Link to post
Share on other sites

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

  • Like 3

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

@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.

Share this post


Link to post
Share on other sites

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 :))

  • Like 1

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

@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
?>
  • Like 1

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
Share on other sites

@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
?>
  • Like 3

Share this post


Link to post
Share on other sites

@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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By eelkenet
      Hi! I've created a small Inputfield module called InputfieldFloatRange which allows you to use an HTML5 <input type="range" ../> slider as an InputField. I needed something like this for a project where the client needs to be able to tweak this value more based on 'a feeling' than just entering a boring old number. Maybe more people can use this so I'm hereby releasing it into the wild.  
       
      What is it?
      The missing range slider Inputfield for Processwire. 
      What does it do?
      This module extends InputfieldFloat and allows you to use HTML5 range sliders for number fields in your templates.
      It includes a visible and editable value field, to override/tweak the value if required.  
      Features
      Min/max values Precision (number of decimals) Steps (Read more) Manual override of the selected value (will still adhere to the rules above) Usage
      Clone / zip repo Install FieldtypeFloatRange, this automatically installs the Inputfield Create new field of type `Float (range)` or convert an existing `Float`, `Integer` or `Text` field. To render the field's value simply echo `$page->field` Demo
      A field with Min=0, Max=1, Step=0.2, Precision=2

      Field with settings Min=0, Max=200, Step=0.25, Precision=2

       
      Todo
      Make the display-field's size configurable (will use the Input Size field setting)  Hopefully become redundant If it's usable for others I'll add it to the Modules list  
      Changelog
      v002
      - Fix issue where setting the step value to an empty value created problem with validation
      - Make the display-field optional 
      v001
      - Initial release
       
      Thanks!
       
       
    • By Robin S
      Another little admin helper module...
      Template Field Widths
      Adds a "Field widths" field to Edit Template that allows you to quickly set the widths of inputfields in the template.

      Why?
      When setting up a new template or trying out different field layouts I find it a bit slow and tedious to have to open each field individually in a modal just to set the width. This module speeds up the process.
      Installation
      Install the Template Field Widths module.
      Config options
      You can set the default presentation of the "Field widths" field to collapsed or open. Field widths entered into the Template Field Widths inputfield are only applied if the Edit Template form is submitted with the Template Field Widths inputfield in an opened state. "Collapsed" is the recommended setting if you think you might also use core inputs for setting field widths in a template context. You can choose Name or Label as the primary identifier shown for the field. The unchosen alternative will become the title attribute shown on hover. You can choose to show the original field width next to the template context field width.  
      https://github.com/Toutouwai/TemplateFieldWidths
      https://modules.processwire.com/modules/template-field-widths/
    • By adrian
      Tracy Debugger for ProcessWire
      The ultimate “swiss army knife” debugging and development tool for the ProcessWire CMF/CMS

       
      Integrates and extends Nette's Tracy debugging tool and adds 35+ custom tools designed for effective ProcessWire debugging and lightning fast development
      The most comprehensive set of instructions and examples is available at: https://adrianbj.github.io/TracyDebugger
      Modules Directory: http://modules.processwire.com/modules/tracy-debugger/
      Github: https://github.com/adrianbj/TracyDebugger
      A big thanks to @tpr for introducing me to Tracy and for the idea for this module and for significant feedback, testing, and feature suggestions.
    • By adrian
      This module allows you to automatically rename file (including image) uploads according to a configurable format
      This module lets you define as many rules as you need to determine how uploaded files will be named and you can have different rules for different pages, templates, fields, and file extensions, or one rule for all uploads. Renaming works for files uploaded via the admin interface and also via the API, including images added from remote URLs.   Github: https://github.com/adrianbj/CustomUploadNames
      Modules Directory: http://modules.processwire.com/modules/process-custom-upload-names/
      Renaming Rules
      The module config allows you to set an unlimited number of Rename Rules. You can define rules to specific fields, templates, pages, and file extensions. If a rule option is left blank, the rule with be applied to all fields/templates/pages/extensions. Leave Filename Format blank to prevent renaming for a specific field/template/page combo, overriding a more general rule. Rules are processed in order, so put more specific rules before more general ones. You can drag to change the order of rules as needed. The following variables can be used in the filename format: $page, $template, $field, and $file. For some of these (eg. $field->description), if they haven't been filled out and saved prior to uploading the image, renaming won't occur on upload, but will happen on page save (could be an issue if image has already been inserted into RTE/HTML field before page save). Some examples: $page->title mysite-{$template->name}-images $field->label $file->description {$page->name}-{$file->filesize}-kb prefix-[Y-m-d_H-i-s]-suffix (anything inside square brackets is is considered to be a PHP date format for the current date/time) randstring[n] (where n is the number of characters you want in the string) ### (custom number mask, eg. 001 if more than one image with same name on a page. This is an enhanced version of the automatic addition of numbers if required) If 'Rename on Save' is checked files will be renamed again each time a page is saved (admin or front-end via API). WARNING: this setting will break any direct links to the old filename, which is particularly relevant for images inserted into RTE/HTML fields. The Filename Format can be defined using plain text and PW $page variable, for example: mysite-{$page->path} You can preserve the uploaded filename for certain rules. This will allow you to set a general renaming rule for your entire site, but then add a rule for a specific page/template/field that does not rename the uploaded file. Just simply build the rule, but leave the Filename Format field empty. You can specify an optional character limit (to nearest whole word) for the length of the filename - useful if you are using $page->path, $path->name etc and have very long page names - eg. news articles, publication titles etc. NOTE - if you are using ProcessWire's webp features, be sure to use the useSrcExt because if you have jpg and png files on the same page and your rename rules result in the same name, you need to maintain the src extension so they are kept as separate files.
      $config->webpOptions = array(     'useSrcExt' => false, // Use source file extension in webp filename? (file.jpg.webp rather than file.webp) ); Acknowledgments
      The module config settings make use of code from Pete's EmailToPage module and the renaming function is based on this code from Ryan: http://processwire.com/talk/topic/3299-ability-to-define-convention-for-image-and-file-upload-names/?p=32623 (also see this post for his thoughts on file renaming and why it is the lazy way out - worth a read before deciding to use this module). 
       
       
      NOTE:
      This should not be needed on most sites, but I work with lots of sites that host PDFs and photos/vectors that are available for download and I have always renamed the files on upload because clients will often upload files with horrible meaningless filenames like:
      Final ReportV6 web version for John Feb 23.PDF

×
×
  • Create New...