Jump to content
Soma

MarkupSimpleNavigation

Recommended Posts

@Soma I used a line of your code and some new code from Ryan and it works. Thank you very much indeed again for your help.

Share this post


Link to post
Share on other sites

@Soma; THANK you for your nav module, just used it again — brilliant.

  • Like 1

Share this post


Link to post
Share on other sites

Hey alan, thanks! Glad you like it. :)

Share this post


Link to post
Share on other sites

Okay, so I'm different. Usually, people want to exclude stuff from an automagically generated navigation – I would like to add stuff. :)

Let's see if I can explain this: I have a primary navigation which this module is just perfect for. But the site also has a secondary navigation in the footer, so there should be an item in the primary nav which skips to said secondary nav in the footer. So basically, I would have to append an item to the nav generated by the module, technically another list item containing a link to an anchor on the same page.

Conveniently, this "skip to service nav" item would be the last item of the primary navigation, so I came up with this:

'outer_tpl' => '<ul class="clearfix">||<li><a id="skip-to-service" href="#service">Service</a></li></ul>'

which works fine unless I'm on a page which has children (<li class="current has_children">). In that case, outer_tpl is "reset" to '<ul class="clearfix">||</ul>' or something, at least the "appended" list item is not rendered.

Not being a PHP coder myself, I can't figure out if this is intended behaviour of the module or maybe a bug. (Although I'm aware I might be misusing 'outer_tpl' here.) I also thought about different approaches to realize that kind of nav item, maybe by using a "dummy page" or something, but I can't figure out how to do that. (Suggestions welcome, of course.)

  • Like 2

Share this post


Link to post
Share on other sites

Yeah it's a bug, thanks for finding it. Should be fixed in the last commit. Let me know if it works for you too.

Share this post


Link to post
Share on other sites

Soma: I have used your module in one project and I like it very much. Have worked without any worries. But now I have navigation scenario that I am not sure if it is possible with MarkupSimpleNavigation or should I code snippet for this.

Default view works like this (normal two levels deep):

LEVEL1 Page a

---LEVEL2 Page aa

---LEVEL2 Page ab

---LEVEL2 Page ac

LEVEL1 Page b

---LEVEL2 Page ba

---LEVEL2 Page bc

LEVEL1 Page c

---LEVEL2 Page ca

But when I go to level2, it should collapse that page and show level3 pages there, but not from other branches. Like this:

LEVEL1 Page a

---LEVEL2 Page aa

---LEVEL2 Page ab

------LEVEL3 Page aba

------LEVEL3 Page abb

---LEVEL2 Page ac

LEVEL1 Page b

---LEVEL2 Page ba

---LEVEL2 Page bc

LEVEL1 Page c

---LEVEL2 Page ca

Is this something that is possible with just settings?

Share this post


Link to post
Share on other sites

No its not possible. Kinda very special case.

Well u could try making it max levels 3 and hide third level with css and open on click.

  • Like 1

Share this post


Link to post
Share on other sites

True, should be possible with css. I'll go that route for now, thanks!

Share this post


Link to post
Share on other sites

Hi Soma, I just downloaded and installed this on a new site, and there's a weird problem:

I have pages like:

Home

About Us

More About Us

Even More About Us

Donate Online

Contact Us

If I click on "More About Us" above, the page loads fine. But, if I click on "About Us" from the "More About Us" page, I get a 404 Page Not Found error. The menu has prepended "/home/" to the URL instead of "/about-us/". So if I try to go to "Even More About Us," I also get a 404, because the URL is now "/home/even-more-about-us" instead of "/about-us/even-more-about-us"

Do you know what could cause this? I thought it might have to do with show_root but that wasn't it. Thanks!

Share this post


Link to post
Share on other sites

Marc can you show a little more of what you're doing exactly? I can't think of anything that would produce this, so far it works without known problems.

Share this post


Link to post
Share on other sites

One problem I noticed while using (and really enjoying!) this module. If I have this kind of structure:

/news/ (tpl: news)
  /pw3-released/ (tpl: news-item)
  /ryan-looking-for-drupal-work/ (tpl: news-item)
  /soma-takes-over-pw-project/ (tpl: news-item)

And all those pages use Simple Navigation with these options:

$options = array(
   'collapsed' => true,
   'selector' => 'template!=news-item'
   );

When looking one of the news-item pages it will render the navigation just fine (excluding the news-items, but showing the "/news/" page. But what is missing is the "parent" class from the news page in nav list. Not sure if that is intended or something that is difficult to fix, but it is frustrating to lose css class there. We are still under the news-page.

  • Like 1

Share this post


Link to post
Share on other sites

Well it gets kinda complex, and my guess is since there's no childs output it doesn't get added.

I'm not sure how easy it will be to add it.

Share this post


Link to post
Share on other sites

I just pushed an update and is now to 1.1.2. It was easier than first thought.

Thanks apeisa for finding it.

  • Like 2

Share this post


Link to post
Share on other sites

Soma, I use this all the time, because it's such a timesaver. Just stopping by to say thanks!

  • Like 2

Share this post


Link to post
Share on other sites

Thanks, that's kind of you arjen. Glad it's well recognized and helpful. :)

  • Like 1

Share this post


Link to post
Share on other sites

Hi again Soma, thanks so much for this module which saves me loads of time.

Do you have any tips for using it with a select/option menu for mobile. I can't seem to get it to display correctly.

Thanks!

Share this post


Link to post
Share on other sites

maybe:

   $options = array(
 'has_children_class' => '',
 'levels' => false,
 'max_levels' => 2,
 'show_root' => true,
 'outer_tpl' => '<select id="select_mobile">||</select>',
 'inner_tpl' => '<optgroup label="¬">||</optgroup>',
 'list_tpl' => '||',
 'item_tpl' => '<option value="{url}">{title}</option>',
 'item_current_tpl' => '<option value="{url}" selected="selected">{title}</option>'
   );
  • Like 3

Share this post


Link to post
Share on other sites

Not sure what you're about.

But this should give a select menu dropdown

$treeMenu = $modules->get("MarkupSimpleNavigation");
echo $treeMenu->render( array(
   'collapsed' => true,
   'max_levels' => 1,
   'outer_tpl' => "<select>||</select>",
   'list_tpl' => "||",
   'item_tpl' => "<option value='{url}'>{title}</option>"
 )
);
  • Like 1

Share this post


Link to post
Share on other sites

Soma and Martijn, thank you both, I have no idea why but I hadn't seen your replies until now, I apologize.

I ended up using a slightly adapted version as you'd need the "onchange" part of the select:

<select id="mobile_menu" class="visible-phone flr" onchange="location = this.options[this.selectedIndex].value;">
     <?php
     $mobile_nav = $modules->get("MarkupSimpleNavigation");
$options = array(
        'has_children_class' => '',
        'levels' => false,
        'max_levels' => 2,
        'show_root' => true,
        'selector' => 'template!=blog_entry|gallery|category|partner|portfolio_entry|event|testimonial|project_skill',
        'inner_tpl' => '<optgroup label="¬">||</optgroup>',
        'list_tpl' => '||',
        'item_tpl' => '<option value="{url}">{title}</option>',
        'item_current_tpl' => '<option value="{url}" selected="selected">{title}</option>'
       );
echo $mobile_nav->render($options); ?>
     </select>

Thanks again!

Share this post


Link to post
Share on other sites

onchange part if you have jQuery:

If you have jQuery loaded, this example look nicer I think. ( although your inline js is quicker )

// check if input select exists & stick the onchange part to it
if($("#mobile_menu").size() > 0) {
   $("#mobile_menu").change(function() {
    window.location = $(this).find("option:selected").val();
   });
}
  • Like 1

Share this post


Link to post
Share on other sites

The input select menu is used on mobile most likely. To turn off js there is just a little harder then on normal desktop environment. So most people don't tough the js setting at all.

A solution with a button: wrapping a submit button in a <noscript> tag. Then if javascript is turned off you will see the submit button. ( never done this, but probably work )

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 gebeer
      Although the PW backend is really intuitive, ever so often my clients need some assistance. Be it they are not so tech savvy or they are not working in the backend often.
      For those cases it is nice to make some help videos available to editors. This is what this module does.
      ProcessHelpVideos Module
      A Process module to display help videos for the ProcessWire CMS. It can be used to make help videos (screencasts) available to content editors.
      This module adds a 'Help Videos" section to the ProcessWire backend. The help videos are accessible through an automatically created page in the Admin page tree. You can add your help videos as pages in the page tree. The module adds a hidden page to the page tree that acts as parent page for the help video pages. All necessary fields and templates will be installed automatically. If there are already a CKEditor field and/or a file field for mp4 files installed in the system, the module will use those. Otherwise it will create the necessary fields. Also the necessary templates for the parent help videos page and it's children are created on module install. The module installs a permission process-helpvideos. Every user role that should have access to the help video section, needs this permission. I use the help video approach on quite a few production sites. It is stable so far and well received by site owners/editors. Up until now I installed required fields, templates and pages manually and then added the module. Now I added all this logic to the install method of the module and it should be ready to share.
      The module and further description on how to use it is available on github: https://github.com/gebeer/ProcessHelpVideos
      If you like to give it a try, I am happy to receive your comments/suggestions here.
    • By Robin S
      A module created in response to the topic here:
      Page List Select Multiple Quickly
      Modifies PageListSelectMultiple to allow you to select multiple pages without the tree closing every time you select a page.
      The screencast says it all:

       
      https://github.com/Toutouwai/PageListSelectMultipleQuickly
      https://modules.processwire.com/modules/page-list-select-multiple-quickly/
    • By gebeer
      Hello all,
      sharing my new module FieldtypeImagePicker. It provides a configurable input field for choosing any type of image from a predefined folder.
      The need for it came up because a client had a custom SVG icon set and I wanted the editors to be able to choose an icon in the page editor.
      It can also be used to offer a choice of images that are used site-wide without having to upload them to individual pages.
      There are no image manipulation methods like with the native PW image field.
      Module and full description can be found on github https://github.com/gebeer/FieldtypeImagePicker
      Kudos to @Martijn Geerts. I used his module FieldTypeSelectFile as a base to build upon.
      Here's how the input field looks like in the page editor:

      Hope it can be of use to someone.
      If you like to give it a try, I'm happy to hear your comments or suggestions for improvement. Eventually this will go in the module directory soon, too.
    • By bernhard
      @Sergio asked about the pdf creation process in the showcase thread about my 360° feedback/survey tool and so I went ahead and set my little pdf helper module to public.
      Description from PW Weekly:
       
      Modules Directory: https://modules.processwire.com/modules/rock-pdf/
      Download & Docs: https://github.com/BernhardBaumrock/RockPDF
       
      You can combine it easily with RockReplacer: 
      See also a little showcase of the RockPdf module in this thread:
       
    • By ukyo
      FieldtypeFontIconPicker
      Supported Icon Libraries
      FontAwesome 4.7.0 Uikit 3.0.34 IonicIcons 2.0.1 Cahangelog
      NOTE: Module store data without prefix, you need to add "prefix" when you want to show your icon on front-end, because some of front-end frameworks using font-awesome with different "prefix".
      Module will search site/modules/**/configs/IconPicker.*.php and site/templates/IconPicker.*.php paths for FieldtypeFontIconPicker config files.
      All config files need to return a PHP ARRAY like examples.
      Example config file : create your own icon set.
      File location is site/configs/IconPicker.example.php
      <?php namespace ProcessWire; /** * IconPicker : Custom Icons */ return [ "name" => "my-custom-icons", "title" => "My Custom Icon Set", "version" => "1.0.0", "styles" => array( wire("config")->urls->templates . "dist/css/my-custom-icons.css" ), "scripts" => array( wire("config")->urls->templates . "dist/js/my-custom-icons.js" ), "categorized" => true, "attributes" => array(), "icons" => array( "brand-icons" => array( "title" => "Brand Icons", "icons" => array( "google", "facebook", "twitter", "instagram" ) ), "flag-icons" => array( "title" => "Flag Icons", "icons" => array( "tr", "gb", "us", "it", "de", "nl", "fr" ) ) ) ]; Example config file : use existing and extend it.
      File location is site/configs/IconPicker.altivebir.php
      <?php namespace ProcessWire; /** * IconPicker : Existing & Extend */ $resource = include wire("config")->paths->siteModules . "FieldtypeFontIconPicker/configs/IconPicker.uikit.php"; $url = wire("config")->urls->templates . "dist"; $resource["scripts"] = array_merge($resource["scripts"], ["{$url}/js/Altivebir.Icon.min.js"]); $resource["icons"]["flag-icons"] = [ "title" => "Flag Icons", "icons" => array("tr", "en", "fr", "us", "it", "de") ]; $resource["icons"]["brand-icons"]["icons"] = array_merge($resource["icons"]["brand-icons"]["icons"], array( "altivebir" )); return $resource; After you add your custom config file, you will see your config file on library select box. Library Title (Location Folder Name).

      If your library categorized and if you have categorized icons set like uikit and fontawesome libraries, you will have category limitation options per icon field or leave it empty for allow all categories (default).

      Example : output
      if ($icon = $page->get("iconField")) { echo "<i class='prefix-{$icon}' />"; } MarkupFontIconPicker Usage
      // MarkupFontIconPicker::render(YourIconField=string, Options=array) echo MarkupFontIconPicker::render($page->YourIconField, [ 'prefix' => 'uk-icon-', // Icon class prefix, if you have different prefix, default is : "fa fa-" 'tag' => 'span', // Icon tag default is : "i" 'class' => 'fa-lg', // If you have extra cutom classes, for example : icons sizes, Array or Sting value 'style' => 'your custom styles if you have' // Array or String Value ]); Theme support

      Search support

      Category support

       
×
×
  • Create New...