MarkupSimpleNavigation

[alan]

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

[alan]

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

[Soma]

Hey alan, thanks! Glad you like it.

[yellowled]

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

[Soma]

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.

[yellowled]

Works like a charm, thanks.

[apeisa]

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?

[Soma]

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.

[apeisa]

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

[MarcC]

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!

[Soma]

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.

[MarcC]

Thanks Soma, I just sent you a message with specific information.

[apeisa]

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.

[Soma]

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.

[Soma]

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

Thanks apeisa for finding it.

[arjen]

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

[Soma]

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

[onjegolders]

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!

[Martijn Geerts]

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>'
   );

[Soma]

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>"
 )
);

[onjegolders]

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!

[Martijn Geerts]

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();
   });
}

[onjegolders]

Thanks Martijn, you're probably right!

Is there any fallback for select menus without js that you know?

[interrobang]

Is there any fallback for select menus without js that you know?

A submit button and a little bit of php on top of your templates. Here is a good explanation:

http://css-tricks.com/unobtrusive-page-changer/

[Martijn Geerts]

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 )