Hi,

I know that the user plugin may do this, but I'm using foundation and not bootstrap so I would prefer to understand how to do this. The demo layout checks if the page.data.id == "section" but I would like to set my menu as active when I access its submenus, so for:

• section -- subsection1 -- subsection2

So each time I access /section/subsection1 I want to set an active class on the "section"

anyone?

What I did myself to solve this issue is add a regular expression to the page using the onEnd hook. You can make it look like this: http://www.codeshare.io/kTYet

Thanks @Demetrius but I don't understand how this can help me. I cannot specify the "section-" string like you did because I have multiple menus, I need something like:

li class="has-dropdown {% if starts_with(this.page.id, 'foo-'); %}active{% endif %}" li class="has-dropdown {% if starts_with(this.page.id, 'bar-'); %}active{% endif %}"

But october doesn't accept laravel's start_with function. Any other solution?

Last updated 9 years ago

That's what I meant. You create your own "starts_with" using a regular expression. Whenever the expressions matches "foo-", you set the page id to "foo".

function onEnd(){
    $regex = '/foo-(.*)/';
    preg_match($regex, $this->page->id, $match);
    if($match)
        $this->page->id = 'foo';
}

Then in the template you put:

<li class="has-dropdown {% if this.page.id == 'foo' %}active{% endif %}">Foo</li>

But this is just a dirty workaround I used to highlight my only menu item with subpages.

Last updated 9 years ago

But like this I have to create several functions for each menu... and also I'm overwriting some data (this.page.id) I might need in other situations. Is there any cleaner way to achieve this?

BMCouto, if you are using StaticPages you can set the code value on each menu item (it means adding individual items to a menu instead of just selecting ALL static pages) but with that you add the following code to the php section of the item "layout" file.

function onInit()
{
    $this['activeMenuItem'] = 'work';
}

This would then set an active state on the parent for the following URL. /work/itemname

I can explain a little further later hopefully, need to head out of the office now. This link will give you examples of code for the top level pages http://octobercms.com/blog/post/getting-started-static-pages (it's in bootstrap) which you could convert to the navigation layouts of Foundation.

Last updated 9 years ago

@pxpxp thank you! Could you please explain to me, how should I build the if statement for the li element on the menu?

Sorry, just updated my post with a little more info - should point you in the right direction. Heading home now, but will likely be online again tonight as I am trying to get a project out.

Sorry but I'm not understading how can I convert that to my foundation menu's... I already have my menu markup all set, just need to set a condition on the li's to identify the active main section. Please take some time to explain with a little more detail. Thank you!

With the code I gave above within the template, you can add the following conditional.

class="{{ item.isActive or item.isChildActive ? 'active' : '' }}"

Hope that helps. This is based on your using StaticMenus.

This will need to be within your staticmenu partial.

Last updated 9 years ago

Did you get this working BMCouto?

I didn't, this involves using the menu plugin, i have custom menu and I haven't understood how should I use it in my scenario... Can I get your personal contact or find you at the IRC channel?

I am jraw on IRC.

Thanks to @pxpx aka jraw who solved this issue for me with the following conditional:

class="{% if 'section-' in this.page.id %}active{% endif %}"

I was missing the power of if ... in ... :)

Last updated 9 years ago

Actually, this solution has a bug.

Imagine the following scenario:

• Products -- Categories -- Prices

• Prices -- Lower

When going to Products > Prices, both main menus Producst and Prices get activated, since "prices" is both menu and sub-menu of a different category (hope to me explaining the situation correctly). Do you know how to fix this?

I know that it's been 7 months since this topic was posted, but I'll share my solution. In my pages, I set $this->page->nav_highlight like so:

 title = "Our Team - Neebob Pevsley"
 url = "/our-team/neebob-pevsley"
 layout = "default"
 is_hidden = "0"
 ==
 function onEnd(){
    $this->page->nav_highlight = 'our_team';
 }
 ==
 <div class="profile">
     I am Neebob!
 </div>

Then in my layout, I have something like this:

 <li class="{% if this.page.nav_highlight == 'our_team' %}active{% endif %}"><a href="{{ 'our-team'|page }}">Our Team</a></li>

Last updated 8 years ago

Hey,

I fixed this by comparing the node.url with the page.url in the twig navi template, like this (works also for single static pages with subpages):

{% macro render_menu(items,page,domain) %}
    {% import _self as nav %}
    {% for item in items %}
        <li role="presentation" class="{{ item.isActive ? 'active' : '' }} {{ item.isChildActive ? 'active' : '' }} {{ (item.url|replace({(domain): ''}) in page.url and item.url|replace({(domain): ''})) ? 'active' : ''  }} ">
...
{ nav.render_menu(mainMenu.menuItems, this.page, domain) }}

Code:

function onStart()
{
    $this['domain'] = Request::root();
}

Last updated 8 years ago

pxpx said:

With the code I gave above within the template, you can add the following conditional.

class="{{ item.isActive or item.isChildActive ? 'active' : '' }}"

Hope that helps. This is based on your using StaticMenus.

This will need to be within your staticmenu partial.

I just cannot get this to work for some reason.

I'm using the Static Pages and Menu plugin but the following code has absolutely no effect whatsoever.

function onInit()
{
    $this['activeMenuItem'] = 'work';
}

Could anyone please suggest what I might be doing wrong ?

In all other respects, the navigation works fine.

I'm using the following code to display the navigation.

https://github.com/rainlab/relax-theme/blob/master/partials/nav.htm

Last updated 8 years ago

Here is my solution

<li class="{{ this.page.url starts with '/projects/' ? 'dropdown active' : 'dropdown' }}">

Last updated 7 years ago