Expandable menu: active entry isn't working right

HTML & CSS
1

Hi there everyone!

Here’s my page:

https://wheeltastic.com/sidemenu.html
https://wheeltastic.com/theme/1/css/sidebarmenu.css
https://wheeltastic.com/includities/sidebarmenu.js

I’ve used the menu found on a tutorial(I’m trying to find the page I got it from and will update if found). The way it works is that any li that has an active class should be expanded. In the page I linked above, I’ve added the active class to wheels under wheels and accessories. The problem I’m having is that the menu isn’t expanding on page load to show the “wheels” category. I’m loading the jquery and css but I’m just not getting it to work.

Could someone tell me what I need to alter to get the menu to expand and highlight the active menu entry?

Thanks for your time!

2

Hi,

I’d need to see the documentation to see the proper way to do it as there is probably something built in, but the JS you are showing will do nothing for the menu on page load as it is only activated once you click the menu.

You could do something like this.

Add the open class to the parent list of the item that you added the active class to.

e.g.

<div id="cssmenu">
  <ul>
    <li class="has-sub open"><a href="#"><span>Wheels & Related</span></a>
      <ul>
        <li class=""><a href="/category/wheel-accessories"><span>Wheel Accessories</span></a></li>
        <li class="active last"><a href="/category/wheels"><span>Wheels</span></a></li>
      </ul>
    </li>
    <li class="has-sub last"><a href="#"><span>Winches & Recovery</span></a>
      <ul>
        <li class="last"><a href="/category/winches"><span>Winches</span></a></li>
      </ul>
    </li>
  </ul>
</div>

Then get css to open it by default.

#cssmenu .open ul{display:block}

I also notoice the arrow is moving when the menu is open so rather than top:50% use top:18px instead.

#cssmenu ul > li.has-sub::after{top:18px}

3

Thank you, Paul. I think I implemented it as instructed: https://wheeltastic.com/sidemenu.html

The only unintentional alteration I see is that the smooth opening & closing is gone and the action is now abrupt(where it used to have a sliding action). Is this something I’ll just have to accept with this modification or could it be brought back?

Thanks!

4

Ok you can probably get around that by removing the CSS I gave you and instead write display:block into the tag itself which is how the js is handling it.

  <ul style="display:block">

e.g.Here:

<div id="cssmenu">
  <ul>
    <li class="has-sub open"><a href="#"><span>Wheels & Related</span></a>
      <ul style="display:block">
        <li class=""><a href="/category/wheel-accessories"><span>Wheel Accessories</span></a></li>
        <li class="active last"><a href="/category/wheels"><span>Wheels</span></a></li>
      </ul>
    </li>
    <li class="has-sub last"><a href="#"><span>Winches & Recovery</span></a>
      <ul>
        <li class="last"><a href="/category/winches"><span>Winches</span></a></li>
      </ul>
    </li>
  </ul>
</div>
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.