felic Posted February 16, 2016 Share Posted 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! Link to comment Share on other sites More sharing options...
neophron Posted March 6, 2016 Share Posted March 6, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
ottogal Posted March 7, 2016 Share Posted 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. 1 Link to comment Share on other sites More sharing options...
neophron Posted March 7, 2016 Share Posted 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 Link to comment Share on other sites More sharing options...
Soma Posted March 7, 2016 Author Share Posted March 7, 2016 @surffun it's the "collapsed" => true, option. 1 Link to comment Share on other sites More sharing options...
Soma Posted March 7, 2016 Author Share Posted 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()); 1 Link to comment Share on other sites More sharing options...
Soma Posted March 7, 2016 Author Share Posted 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. 1 Link to comment Share on other sites More sharing options...
slave Posted March 29, 2016 Share Posted March 29, 2016 Hellomy english is not so good, I hope you can help meI 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> Link to comment Share on other sites More sharing options...
arjen Posted March 29, 2016 Share Posted March 29, 2016 Have you tried: 'has_children_class' => 'dropdown dropdown-submenu', Link to comment Share on other sites More sharing options...
slave Posted March 29, 2016 Share Posted March 29, 2016 Have you tried: 'has_children_class' => 'dropdown dropdown-submenu', yes, I have triedI have 2 examples and the original. I need help example 1 example 2 original Link to comment Share on other sites More sharing options...
arjen Posted March 30, 2016 Share Posted 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 } } 1 Link to comment Share on other sites More sharing options...
bernhard Posted April 4, 2016 Share Posted 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 3 Link to comment Share on other sites More sharing options...
Macrura Posted April 5, 2016 Share Posted 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) Link to comment Share on other sites More sharing options...
Macrura Posted April 6, 2016 Share Posted 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? Link to comment Share on other sites More sharing options...
Macrura Posted April 6, 2016 Share Posted 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. Link to comment Share on other sites More sharing options...
Soma Posted April 6, 2016 Author Share Posted 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. Link to comment Share on other sites More sharing options...
Soma Posted April 6, 2016 Author Share Posted 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 ) 1 Link to comment Share on other sites More sharing options...
Robin S Posted April 7, 2016 Share Posted 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. 2 Link to comment Share on other sites More sharing options...
slave Posted April 18, 2016 Share Posted April 18, 2016 hi i need help please.I need this navigation structur (home) (dienstl1) (dienstl2) (dienstl3) my site struct is this homedienstleistungen (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 Link to comment Share on other sites More sharing options...
Robin S Posted April 18, 2016 Share Posted 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 ?> 1 Link to comment Share on other sites More sharing options...
slave Posted April 19, 2016 Share Posted April 19, 2016 @Robins thank you for your help. but that has not helped.please see the graphic Link to comment Share on other sites More sharing options...
slave Posted April 19, 2016 Share Posted 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 Link to comment Share on other sites More sharing options...
Robin S Posted April 19, 2016 Share Posted 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 ?> 3 Link to comment Share on other sites More sharing options...
slave Posted April 19, 2016 Share Posted 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. Link to comment Share on other sites More sharing options...
slave Posted April 25, 2016 Share Posted April 25, 2016 I have a questioncan i make the first link disable ? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now