Menu Part - using dropdown

Kerry Shippam

I'm trying to add dropdown items into a Menu part but I need to apply a class to the drop down <ul> tag, this doesn't seem possible?

I'm hoping it is just Friday and I'm missing something obvious otherwise I'll just use a unformatted part.


In the following I can set mainNav from the Menu part style tab but I want to add a class on the ul where NC has set nccUlMenuSub1


<ul class="mainNav">

    <li class=" menuItem1 first parent">

        <a href="#">News and Events</a>

        <ul class="nccUlMenuSub1">  

            <li class="menuItem1 first last"><a href="#">Events</a></li>

        </ul>

    </li>

    <li class=" menuItem2"><a href="#">Social</a></li>

    <li class=" menuItem3"><a href="#">Community</a></li></li>

</ul>

 

Chris McGrane

Hello Kerry, you can add a class to an element via JS and an unformatted text part. One of the following should work...

Example 1: JS-only


<script>

    var menu = document.getElementsByClassName('nccUlMenuSub1');

    menu.className += " otherclass";

</script>

Example 2: jQuery


<script>

    $(document).ready(function(){

        $('.nccUlMenuSub1').addClass('otherclass');

    });

</script>

Let me know if you're having issues once you add one of these scripts to an unformatted text part.

Edit: And it probably goes without saying, replace "otherclass" with your desired class, keep the single quotes though.


Chris

 

Kerry Shippam

Thanks Chris, I think I've decided just to build the entire menu using unformatted part rather than introducing JS to fix it up afterwards as it will need a couple of other tweaks as well.