Navigation - attaching an ID to a subcontainer
  • Hey guys,

    First of all, apologies if this discussion has been started in the wrong category, I wasn't quite sure where to put it.

    A brief summary of my situation: I'm building a relatively simple company website and decided to use Fuel in order to do so. The clear documentation and code have made it a painless journey even for a beginner like myself, but I've ran into a hurdle. I'm currently making the navigation for the site and trying to structure the menu, so I can style it using Materialize (a material design-based CSS framework).

    I need to have a dropdown menu, for reference this is how the html is supposed to look according to Materialize's documentation:


    <!-- Dropdown Structure -->
    <ul id="dropdown1" class="dropdown-content">
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
    </ul>
    <nav>
    <div class="nav-wrapper">
    <a href="#!" class="brand-logo">Logo</a>
    <ul class="right hide-on-med-and-down">
    <!-- Dropdown Trigger -->
    <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
    </ul>
    </div>
    </nav>


    Basically the ul element that wraps around the dropdown content needs to have both an id and a class for this to work. I want to have the following structure (very simplified example):


    <ul>
    <li>Link1</li>
    <ul id="dropdown1" class="dropdown-content">
    <li>LinkA</li>
    <li>LinkB</li>
    </ul>
    <li>Link2</li>
    <ul id="dropdown2" class="dropdown-content">
    <li>LinkA</li>
    <li>LinkB</li>
    </ul>
    </ul>


    Using the subcontainer_tag_class property, I've assigned the nested ul's a class, but I also need to attach an ID and I haven't figured out how to do that.

    Am I missing something or is there no way to do this easily? If so, what solution would you recommend? Right now, I'm thinking of either using jQuery to assign an ID or perhaps messing around with Fuel's Menu.php to work this functionality in. Would that work?

    Thank you for your time!
  • Search this forum for bootstrap menu related posts. There was one a few months ago that included links to some tools that allowed you to use Fuel commands to build bootstrap compatible menus (with the necessary ids and classes etc).

    It included an over-riding library that you can edit to suit your Materialize framework.

    PS: if you do create such a library, don't forget to post it back here.
  • Thank you for the info, much appreciated!

    I'll work on it today and report my findings, though I believe that helper function will solve my problem. Thanks again!

Howdy, Stranger!

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