Modal Box in Navigation array
  • Hi,
    I'd like to implement a modal box within the navigation array. I'm trying to use bootstrap's modal functionality, so I need the link to have an attribute like data-toggle='modal'. How can this be coded into the navigation array? I have a seen that a container_tag_attrs exists for the main container, this is pretty close to what I want except that it doesn't seem to be available for a specific item.
    Thanks a lot in advance,
  • you can specify on the $nav menu item the "attributes" parameter if done using the $nav array or under the "Attributes" field in the CMS which will be specific attributes to the link surrounding the menu item:
    $nav['my_menu_item'] = array('label' => 'My Menu Item', 'location' => 'my_location', 'attributes' => 'data-toggle="modal"');
  • Hi,
    thank you very much for your continued support, it is very much appreciated and much much better than in other CMS/software packages! It works flawlessly.
  • My first question is does this work in 0.9.3? (I seem to be having trouble adding attributes just to test and wanted to make sure it was possible and not that I'm doing something wrong).

    Secondly, if so, is there a way give a data attribute that is based on something specific to each link (id, title or anything really)? For context we are attempting to add some click tracking data and would rather add it to our code than go into the CMS and add it for each menu item individually.

    Here's an example of how we load the nav:

    <?=fuel_nav(array('group_id' => 'Primary', 'parent' => uri_segment(1), 'container_tag_class' => 'f-dropdown', 'container_tag_id' => uri_segment(1)))?>
  • It should be. You would add it to the $nav array as specified above though and not as an option when callling the fuel_nav() function. What sort of problems were you seeing?
  • The basic functionality just isn't working. When I add the code to our 2 menus the data attributes don't show up. Right now I'm just trying to get any attribute in there. I haven't even gotten to the variable part yet.

    <?=fuel_nav(array('group_id' => 'Primary', 'depth' => 1, 'attributes' => 'data-toggle="test"', 'styles' => array('small button')))?>
    <?=fuel_nav(array('group_id' => 'Secondary', 'depth' => 1, 'attributes' => 'data-toggle="test"', 'styles' => array('tiny button'))); ?>

    No data-toggle="test" appears in the code anywhere. Am I doing something wrong?

    Thanks for your help.
  • I'm looking more closely at your reply now and see that you cannot add it when calling the fuel_nav function but I'm not exactly sure why and how I would refactor what I have.
  • if you can't add it to the nav.php file, you can use the "append" attribute of fuel_nav() which can take an array of menu items in the same format as those found in the nav.php file.
  • I'm looking through the documentation to see how to implement the "append" attribute and not seeing it so if you could post or point me to it that would be much appreciated. It's not showing up just using what I assumed:

    <?=fuel_nav(array('group_id' => 'Secondary', 'depth' => 1, 'append' => 'data-toggle="test"', 'styles' => array('tiny button'))); ?>


    <?=fuel_nav(array('group_id' => 'Secondary', 'depth' => 1, 'append' => array('data-toggle="test"'), 'styles' => array('tiny button'))); ?>

    Also, just FYI we're using nav in the db not from the nav file. Not sure if this affects the rest of the discussion above.
  • If you are using the CMS, then there should be an "Attributes" field under the "Advanced" tab when editing a menu item that you can add data-toggle="test" to. This will get added to the anchor link and not the containing li.

    Regarding the proper usage of "append" it would be something like the following:
    <?php $append = array('my_menu_item' => array('label' => 'My Menu Item', 'parent_id' => 'my_parent_id', 'attributes' => 'data-toggle="test"')); ?>
    <?=fuel_nav(array('group_id' => 'Secondary', 'depth' => 1, 'append' => $append, 'styles' => array('tiny button'))); ?>
  • Sorry I am just now responding to this. Had to focus on other things and finally have a minute to return to this experiment.

    So is this saying that you can only append an attribute to one menu item at a time?
  • That's correct in that it needs to be set for each menu item. The "styles" parameter can be applied within the fuel_nav function which can apply to a whole set of menu items but is used only to set classes (like in your example).
  • Is this something that can be done in 1.0? Seems quite useful.
  • Which part are you referring too?
  • Being able to apply additional attributes to multiple items in the nav.
  • Unfortunately not unless you want to use the"styles" parameter which can mass assign class names to "li" elements. Other parameters need to be added on a per navigation basis.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!