Choose which top menu item is highlighted

I've created my own plugin and created a top menu item using elgg_register_menu_item which all works fine, when I click on the menu it highlights the menu item to show it's selected, but when I browse to any further pages I lose the highlight.

Is there a function to force a particular menu item to be highlighted when on a certain page?

  • Do you know CSS?

    Use specific class fot it, e.g.:

    .elgg-menu-page li.elgg-state-selected > a

  • @rivervanrain I think the problem is that the menu item doesn't have the .elgg-state-selected in the first place.

  • Well, @Stephen then add this class in your menu item:

          elgg_register_menu_item('page', array(
                ................

               'link_class' =>  'elgg-state-selected',
               ................
                ));

  • @rivervanrain After that it would be always highlighted no matter which page/tool (blog, file,etc) is being viewed. :)

    @ChiswickMe I think the only way is be to register a handler for 'register', 'menu:site' hook and then use elgg_get_context() inside the handler to see whether the menu item should be set as selected using $menu_item->setSelected(true); (By "top" menu you mean the main menu, right? Or the topbar menu?)

    It's not the best option to use page context inside the hook handler but I don't think there currently is any better solution.

    (Btw, the same happens with the budled plugins also so the fault is not really in your plugin.)

  • @Juho Jaakkola :) There is another CSS trick.

    I meant create CSS style and add link class into  menu:item.

     

    In css.php

     

    .elgg-menu-page li.elgg-state-selected > a {
        color: white;
    }

    .elgg-menu-page li > a.elgg-state-selected {
        color: black;
    }

     

    Sure, it's works for menu:page only.

    For other items need to create similar styles too, e.g.:

     

    .elgg-menu-extras li > a.elgg-state-selected {
        color: white;
    }
    .elgg-menu-extras li.elgg-state-selected > a {
        color: black;
    }

  • Make all your plugin pages push a context like "vendor_myplugin". Give your site menu item the same name.

    Elgg has a built-in menu handler that will auto-select the item based on current (topmost) context.

  • Thanks for the answers everyone.

    For clarity, if anyone else has the same question in the future:

    My menu item was setup using

    $item = new ElggMenuItem('item_name', elgg_echo('Menu Label'), 'plugin/link');
    elgg_register_menu_item('site', $item);

    Then on each plugin page where I want to highlight that menu item I used

    elgg_push_context('item_name');

    Seems to work anyway!