Jump to content

MarkupSimpleNavigation


Soma

Recommended Posts

  • 4 weeks later...
  • 3 weeks later...

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
Link to comment
Share on other sites

  • 2 months later...

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?

Link to comment
Share on other sites

  • 1 month later...

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!

Link to comment
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
Link to comment
Share on other sites

  • 3 weeks later...
  • 1 month later...

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
Link to comment
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
Link to comment
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!

Link to comment
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
Link to comment
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 )

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...