theo Posted March 6, 2018 Share Posted March 6, 2018 I wrote some code for BS4 Nav this morning for myself. Maybe it helps. If it is not 100% what you need, it should be very easy to change the code in echoBS4Nav and echoBS4children. Use like this: <nav class="navbar etc..... <div class="collapse navbar-collapse" id="navbarsExampleDefault"> <?php require_once 'turbopw.php'; $myTurbo = new ProcessWire\TurboPW($wire); $myTurbo->echoBS4Nav("id!=1,has_parent!=2", '../'); ?> </div> http://theowp.bplaced.net/upload/turbopw.zip Attention, the code is very fresh! And it is not as comfortable as MenuBuilder or MSN. Just sharing. The rest of the code in this file has to do with the thread below. Don't worry. 1 Link to comment Share on other sites More sharing options...
barneyy Posted March 8, 2018 Share Posted March 8, 2018 (edited) On 6.3.2018 at 11:24 AM, Soma said: I meant there is in the example if you remove the <ul> from the options, it would results in <ul><div><li>...</li></div></ul>, not saying bootstrap has. I tried with a special hook to remove the <li>' on the level greater than 1. Does that work for you? $nav = $modules->get('MarkupSimpleNavigation'); $options = array( 'has_children_class' => 'dropdown', 'list_tpl' => '<li%s>||</li>', 'current_class' => 'active', 'list_field_class' => 'nav-item', 'max_levels' => 2, 'item_tpl' => '<a class="nav-link gek-anim" href="{url}">{title}</a>', 'outer_tpl' => '<ul class="navbar-nav ml-auto">||</ul>', 'inner_tpl' => '<div class="dropdown-menu">||</div>', 'item_current_tpl' => '<a class="nav-link active" href="{url}">{title}</a>', ); $nav->addHookBefore("getListString", null, function($event){ $msn = $event->object; if($msn->iteration > 1){ // on level 2 and greater $msn->list_tpl = array("",""); } else { $msn->list_tpl = array("<li%s>","</li>"); } }); $sidebar .= $nav->render($options); ok @Soma, thanks soma for your help. There is another small problem, wich i can solve with overwrite this bootstrap.scss. The last problem is, that the <a>-tags in <div class="dropdown-menu">needs another class. With your 'Hook' (?) the a-tags getting class="nav-item" - bootstrap wants to have the <a>-tags with the class "dropdown-item".... In my opinion the bootstrap-structure is much to complex. I tested your solution only in a short break of my work, i'll give it a try as soon as possible - maybe begining of the next week - and will have a look to the other replies to my topics....... thx in advance Edited March 8, 2018 by horst deleted inapropriate wording! Link to comment Share on other sites More sharing options...
Christophe Posted March 8, 2018 Share Posted March 8, 2018 (edited) Hi, No swear/bad words please (even with *s)! These Forums are currently quite free from them. Thanks in advance. Have a nice day! Edited March 8, 2018 by Christophe 2 Link to comment Share on other sites More sharing options...
barneyy Posted March 8, 2018 Share Posted March 8, 2018 @kongondo & @Soma & @bernhard Thanks for your Help and time.... I'm sorry for wrong words. Good Luck & good night... Link to comment Share on other sites More sharing options...
Jon Posted April 28, 2018 Share Posted April 28, 2018 Hello, just wondering if the following is possible ive setting up a uikit menu. I have adjusted the inter_tpl to wrap the some additional DIVs around the UL. Which works fine I also need to have the inner inner UL with a different DIV around them or at the very least just default back to a UL without the additional tags. Ive tried the following code but this seems to close the the first UL of the menu after the first dropdown occurrence $menu->addHookAfter('getInnerStringOpen', null, 'customInnerString'); function customInnerString(HookEvent $event){ $item = $event->arguments('page'); if($item->numChildren(true) && count($item->parents) > 1){ $event->return = '<ul class="testtest">'; } } Iam trying to achieve this <ul> <li>Level 1 Nav</li> <li class="has-sub">Level 2 <div class="submenu"> <ul class="has-sub"> <li>Item 2.1</li> <li class="has-sub">Level 3 <div class="anothersub"> <ul> <li>Item 3.1</li> </ul> </div> </li> </ul></div> </li> </ul> Link to comment Share on other sites More sharing options...
gmclelland Posted May 7, 2018 Share Posted May 7, 2018 Hello @Soma, thank you for providing this module. On one site in production, I noticed that for some reason the top level menu items change randomly in a different order. On a page I can keep hitting the refresh button and the menu items will randomly change order. My tree order looks like this: Home About Us Support Us Resources Memberships Sometimes the menu is rendered correctly and other times it renders like: Home About Us Support Us Memberships Resources Here is how I'm calling it: (Note: I'm using the TemplateEngineFactory module. That is why you see the $view->set) Spoiler $view->set('mainMenu', $modules->get("MarkupSimpleNavigation")->render(array( 'parent_class' => 'selected', 'current_class' => 'selected', 'has_children_class' => 'has-children is-dropdown-submenu-parent', 'levels' => true, 'levels_prefix' => 'level-', 'max_levels' => 4, 'firstlast' => true, 'collapsed' => false, 'show_root' => true, 'selector' => 'template!=news|calendar-posting|community-event, hide_from_menus=0, sort=sort', 'outer_tpl' => '<ul class="dropdown menu level-0" data-dropdown-menu data-force-follow="true">||</ul>', 'inner_tpl' => '<ul class="menu sub-menu">||</ul>', 'list_tpl' => '<li%s>||</li>', 'list_field_class' => '', 'item_tpl' => '<a href="{url}">{menu_title|title}</a>', 'item_current_tpl' => '<a href="{url}">{menu_title|title}</a>', 'code_formatting' => false, 'debug' => false ))); I have also tried it without the sort=sort, but I have the same random results. Does anybody have any ideas as to why I'm seeing this problem? I'm running Processwire 3.0.101. Thank you for any help you can provide. Link to comment Share on other sites More sharing options...
gmclelland Posted May 11, 2018 Share Posted May 11, 2018 I just wanted to follow up and say that my issue is strangely now gone after upgrading from Processwire 3.0.101 to 3.0.102 Link to comment Share on other sites More sharing options...
Roych Posted June 6, 2018 Share Posted June 6, 2018 Hello, I'm having trouble creatin a menu. It wont work I tried all sorts of things here, I just got lost, not sure what to do to make it work. The original HTML looks like this: It looks simple but Im out of ideas ? <ul class="nav navbar-nav"> <li class="dropdown active"> <a href="index.html">Home</a></li> <li class="dropdown"> <a href="index.htm#" data-toggle="dropdown" class="dropdown-toggle js-activated">Contact<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="room-list.html">Contact 1</a></li> <li><a href="room-detail.html">Contact 2</a></li> </ul> </li> </ul> tried with: 'parent_class' => '', 'current_class' => 'active', 'has_children_class' => 'dropdown', 'levels' => true, 'levels_prefix' => 'level-', 'max_levels' => null, 'firstlast' => false, 'collapsed' => false, 'show_root' => true, 'selector' => 'template!=', 'selector_field' => '', 'outer_tpl' => ' <ul class="nav navbar-nav">||</ul>', 'inner_tpl' => '<ul class="dropdown-menu">||</ul>', 'list_tpl' => '<li%s>||</li>', 'list_field_class' => '', 'item_tpl' => '<a href="{url}" data-toggle="dropdown" class="dropdown-toggle js-activated">{title}</a>', 'item_current_tpl' => '<a href="{url}">{title}</a>', 'xtemplates' => '', 'xitem_tpl' => '<a href="{url}">{title}</a>', 'xitem_current_tpl' => '{title}', 'date_format' => 'Y/m/d', 'code_formatting' => false, 'debug' => false It won't work. and not sure how to put the dropdown <b class="caret"></b> inside also. Please any help is appreciated. Thank you R Link to comment Share on other sites More sharing options...
Soma Posted June 7, 2018 Author Share Posted June 7, 2018 @Roych there's various examples around. If you read the first post you'll see a link to a gist for a bootstrap navigation. Not sure if that's what you need. Link to comment Share on other sites More sharing options...
Roych Posted June 8, 2018 Share Posted June 8, 2018 On 6/7/2018 at 10:13 AM, Soma said: @Roych there's various examples around. If you read the first post you'll see a link to a gist for a bootstrap navigation. Not sure if that's what you need. Thank you, forgot about the first post, lol ? R Link to comment Share on other sites More sharing options...
Peter Knight Posted July 26, 2018 Share Posted July 26, 2018 On 5/7/2016 at 2:19 PM, Ivan Gretsky said: @Peter Knight: I believe it is this option: 'current_class' => 'active' This doesn't seem to work. It only applies 'active' to the active child link. On a drop down menu any page/link that is active should have it's root parent marked as active too. On my example a user has no obvious indicator of what 'section' they are on just by looking at the top navigation bar. Link to comment Share on other sites More sharing options...
dragan Posted July 26, 2018 Share Posted July 26, 2018 That depends on your CSS. I have a setup with a flyout menu that goes 3 levels down and all active parents are indeed red, e.g. #primary-menu ul li.parent > a { color: #e31231; } Link to comment Share on other sites More sharing options...
Soma Posted July 26, 2018 Author Share Posted July 26, 2018 On 6/25/2018 at 10:16 AM, bud said: Hi everyone, could may somenone help? Let's say I have the following navigation in my sidebar (which works just fine with the very default settings of MSN-module). Home Solutions - Solutions Overview - Solution 1 - Solution 2 Services - Services Overview - Service 1 - Service 2 Blog - Blog Post 1 - Blog Post 2 - Blog Post 3 Also let's say the current page I visit is Solutions and here comes why I need help: Instead of rendering the menu as you can see above it should only be rendered like Solutions - Solutions Overview - Solution 1 - Solution 2 If my current page would be Blog than only Blog - Blog Post 1 - Blog Post 2 - Blog Post 3 should be rendererd. At last I do not use any .css yet and take the MSN just as it comes with its defaults. You would just have to find out if your on "Solutions", then use that (the current page) as the root for the MSN. SO it renders only children of Solutions. You can get the level you're on also by using $page->parents->count which Would be 1 for Solutions, 2 for Solutions Overview. So there's no options to do what you want, you'd have to find out the condition via some logik and then simply use another root parent page. Link to comment Share on other sites More sharing options...
Soma Posted July 26, 2018 Author Share Posted July 26, 2018 1 hour ago, Peter Knight said: This doesn't seem to work. It only applies 'active' to the active child link. On a drop down menu any page/link that is active should have it's root parent marked as active too. On my example a user has no obvious indicator of what 'section' they are on just by looking at the top navigation bar. It actually only adds active to the active nav item. All parents of the active nav items get "parent". The first options in MSN. https://github.com/somatonic/MarkupSimpleNavigation#same-with-comments $options = array( 'parent_class' => 'parent', // overwrite class name for current parent levels 1 Link to comment Share on other sites More sharing options...
Peter Knight Posted July 26, 2018 Share Posted July 26, 2018 8 hours ago, Soma said: It actually only adds active to the active nav item. All parents of the active nav items get "parent". The first options in MSN. https://github.com/somatonic/MarkupSimpleNavigation#same-with-comments $options = array( 'parent_class' => 'parent', // overwrite class name for current parent levels Cheers Soma. Link to comment Share on other sites More sharing options...
iNoize Posted February 28, 2019 Share Posted February 28, 2019 Hello, how can i change the "has_children_class" for an special id ? Ex 1074. I have an page with automaticly created children. And in this ID 1074 it should not be generated the dropdown submenu (Bootstrap) This is actually my code $nav = $modules->get("MarkupSimpleNavigation"); // load the module $nav->addHookAfter('getTagsString', null, 'customNavItems'); function customNavItems(HookEvent $event){ $item = $event->arguments('page'); // first level items need additional attr if($item->numChildren(true) && count($item->parents) < 2 && $item->id != 1 && $item->id != 1074 ){ $title = $item->get("title|name"); $event->return = '<a href="#" class="dropdown-toggle" tabindex="0" data-toggle="dropdown" aria-expanded="false" >' . $title . ' <span class="caret"></span></a>'; } // submenus don't need class and data attribs if($item->numChildren(true) && count($item->parents) > 1 && $item->id != 1028 && $item->id != 1036 ){ $event->return = '<a href="#">' . $item->get("title|name") . '</a>'; } } $navMarkup = $nav->render( array( 'parent_class' => 'parent', 'current_class' => 'active', 'has_children_class' => 'dropdown', 'levels' => false, 'levels_prefix' => 'level-', 'max_levels' => 2, 'firstlast' => false, 'collapsed' => false, 'show_root' => false, 'selector' => '', 'selector_field' => 'nav_selector', 'outer_tpl' => '<ul class="nav navbar-nav">||</ul>', 'inner_tpl' => '<ul class="dropdown-menu">||</ul>', 'list_tpl' => '<li%s>||</li>', 'list_field_class' => '', 'item_tpl' => '<a 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' => 'd/m/Y', 'code_formatting' => true, 'debug' => true ) ); Link to comment Share on other sites More sharing options...
Lance O. Posted May 8, 2019 Share Posted May 8, 2019 @Soma I noticed that in the 1.3.6 version of your module that if a field name includes an underscore, the portion after the underscore is removed, which sometimes makes the link to the field incorrect. For example, if I have a field named "images_repeater" then the field will instead display as "images". This module has helped save me countless hours over the years. Thank you for providing it to the ProcessWire community. Link to comment Share on other sites More sharing options...
combicart Posted May 24, 2019 Share Posted May 24, 2019 Is it possible to show additional markup for a specific menu item? I would like to show the number of subpages (with it's own markup) for one specific main menu item. The page is a regular page with the same template as other pages in the menu. Would this be possible? Link to comment Share on other sites More sharing options...
dragan Posted May 24, 2019 Share Posted May 24, 2019 I'm not sure, but take a look at this: https://modules.processwire.com/modules/markup-simple-navigation/ -> hook for custom item string (new in 1.2.0) 2 Link to comment Share on other sites More sharing options...
combicart Posted May 24, 2019 Share Posted May 24, 2019 Hi @dragan, thanks! I've just implemented the hook and it's working perfectly! Thanks for pointing me in the right direction! Link to comment Share on other sites More sharing options...
Mike-it Posted June 18, 2019 Share Posted June 18, 2019 Assumption: Code for Dummies ... Hi, i'm trying to cutomize my menu to add a personal "title" to the link somthing like <a title='$child->mytitle' I've already added a field ("mytitle", type text) in my templates. This is not the right way to do that? Am i so away from the solution? // 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='nav-item active' aria-current='true'><a title='$child->mytitle' class='nav-link' href='$child->url'>$child->title</a></li>"; } else { echo "<li class='nav-item'><a title='$child->mytitle' class='nav-link' href='$child->url'>$child->title</a></li>"; } } Any help appreciated, thanks in advance... Link to comment Share on other sites More sharing options...
buster808 Posted July 22, 2019 Share Posted July 22, 2019 Hi, The parent url (work with me) doesn't work using MarkUpSimpleNavigation - Is there something in the options that I should be setting? Thanks Link to comment Share on other sites More sharing options...
teppo Posted July 22, 2019 Share Posted July 22, 2019 12 minutes ago, buster808 said: Hi, The parent url (work with me) doesn't work using MarkUpSimpleNavigation - Is there something in the options that I should be setting? You may need to be a bit more specific than that: what exactly do you mean when you say that the URL doesn't work? Is the screenshot from your actual site, and if so, could you add a link to that? Or is this an example that you're trying to achieve? Note that I've merged your question to the Markup Simple Navigation support thread. When you have a question related to a specific module, post it to the existing support thread for that module – thanks! 1 Link to comment Share on other sites More sharing options...
999design Posted August 1, 2019 Share Posted August 1, 2019 I love this module, but I've finally found something that I can't figure out how to do. I'm trying to style particular item(s) in the navigation different to the others by updating a class on that item, how would I do this? For example a "Donate" or "Sign up" page that I want to have more prominent styling. I've added a checkbox to my pages to say something along the lines of "Make me prominent in the navigation"... but I'm not quite sure how to hook that into markupsimplenavigation's options? Is there a way to say - if this page has the checkbox checked, add the "prominent" css class to the its menu item markup? Thanks in advance for any support :) Link to comment Share on other sites More sharing options...
999design Posted August 5, 2019 Share Posted August 5, 2019 Update: I hadn't read the documentation properly and was able to add a custom class to pages that had the checkbox field checkbox_nav_prominent checked ? 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($child->checkbox_nav_prominent == 1){ $event->return .= " is-prominent"; // add your custom class to the existing } } 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