Add ability to add a class to a nested <ul> in r:site_menu

[adamjohnson]

Steps to reproduce the issue

CleanSlate is currently able to detect and add a class to the top level <li>'s that have a sub-menu available via the has_children_class attribute (docs and #118).

I'm looking to be able to add a class to the nested <ul>. For example, if you have the following tag:

<r:site_menu max_depth="2" ul_class="wvu-nav__items menu-items" has_children_class="dropdown" />

Results

It produces the following HTML:

  <ul class="wvu-nav__items menu-items">
    <li><a href="#">Home</a></li>
    <li class="dropdown">
      <a href="#">Academics</a>
      <ul>
        <li><a href="#">Sub 1</a>
        <li><a href="#">Sub 2</a>
      </ul>
    </li>
    <li><a href="#">About Us</a></li>
  </ul>

Expected results

I want to be able to add an HTML class to the nested unordered list, like this:

  <ul class="wvu-nav__items menu-items">
    <li><a href="#">Home</a></li>
    <li class="dropdown">
      <a href="#">Academics</a>
      <ul class="sub-menu"> <!-- This has a class! -->
        <li><a href="#">Sub 1</a>
        <li><a href="#">Sub 2</a>
      </ul>
    </li>
    <li><a href="#">About Us</a></li>
  </ul>

Here's a diff to make it extra clear about what changed in the code above.

Naming the attribute

Ideas:

• ul_class_level_2
• ul_class_depth_2
• nested_ul_class
• ul_class_nested
• ...?

I like the idea of being able to specify the depth level because I could see something like ul_class_level_3 being an attribute one day.

Goal

The goal of adding this functionality is so that we can have dropdown menus that mirror what's on wvu.edu. If you resize your browser to a mobile size, click "Open Menu", you'll see + icons to access second level pages. Being able to add a class to the nested <ul> allows us to add the + functionality.