How to add a class to dynamic menu <a> element in BC

[gchristo27]

When making a dynamic menu, I know I can assign my own CSS to the menu item, but when I do, it assigns the class to the <li> element.  I was wondering if there is a way to make the menu output with the class assigned to the <a> element with in the <li>?

[Liam Dilley]

With liquid and a custom template build or menu module v2 layouts you can do that but I have to ask why?

li.something > a { }

Is how you target that a so you do not need

[gchristo27]

Great! Thanks for the tip! So where do I place this mark-up? Will this mark-up apply the .something class to the <a> and not the <li> in a dynamic menu?

Reason I need to do this is because I am using a function for smooth scrolling but it conflicts with another onclick function the theme uses for data displayed in a div when tabs are activated. I can solve the conflict in the smooth scrolling function with an if statement, basically, the onclick function for the smooth scrolling will only trigger if the <a> clicked has a class of .something.  If I don't use this if statement, the clicked tabs will not trigger the function to display the corresponding data within the div. I can't apply this rule for <li> because generally, the links on a page that are clicked aren't always nestled in <li>'s

I apologize if my explanation above doesn't make sense.  I am a beginner with javascript. Please let me know if you would like a more in-depth explanation of the problem.  I can post screen-shots and what not.  Or, if you know of any other work around to the problem above that would be awesome, but I'll give your suggestion a try.  I just need to be sure where to put this code. Is it within the css file?

[Liam Dilley]

Any jquery plugin and script can have a different target, just as the css does:

$('.list >a').something();

Some plugins will have the options to specify and change the targets.

In terms of the layout changes:

https://docs.worldsecuresystems.com/reference/layouts-and-tags/menu-v2/menu-v2-child-item.html

https://docs.worldsecuresystems.com/user-manual/site-design/Menus/build-dynamic-menu-using-liquid

[gchristo27]

Thank you for the references. They were very helpful. After reading them, I thought it might be possible to simply add some easy logic to the liquid markup used to render the dynamic menu.  Below is the current liquid markup for my dynamic menu:

  {% for m in this.items -%}

  <li {% if m.css != "" -%}class="{{m.css}}"{% endif -%}><a {% if m.targetFrame != "" -%}target="{{m.targetFrame}}"{% endif -%} href="{{m.url}}">{{m.label}}</a> {% if m.items -%}

    <ul class="menu" >

      {% for s in m.items -%}

      <li {% if s.css != "" -%}class="{{s.css}}"{% endif -%}><a {% if s.targetFrame != "" -%}target="{{s.targetFrame}}"{% endif -%} href="{{s.url}}">{{s.label}}</a> {% if s.items -%}

        <ul class="menu ">

          {% for t in s.items -%}

          <li {% if t.css != "" -%}class="{{t.css}}"{% endif -%}><a {% if t.targetFrame != "" -%}target="{{t.targetFrame}}"{% endif -%} href="{{t.url}}">{{t.label}}</a> </li>

          {% endfor -%}

        </ul>

        {% endif -%} </li>

      {% endfor -%}

    </ul>

    {% endif -%} </li>

  {% endfor -%}

I thought the below logic work to add a class to the <a> element if the <li> element has a class of .smooth-scroll but it didn't.  It would be great if I could simply add this logic to this code below.  Any suggestions?

[gchristo27]

I added the class to all the <a> elements as show below, and it worked, but I would rather have the class applied dynamically, only if the list item also has this class...