[Resolved] Sidebar Menu – Design and Functionality

[andrachans]

Hello there,

Can you please point me towards any article that can assist me with replicating the design and functionality of the left sidebar menu, on the demo website link below.

Thank you.

Kallad

[Ying]

Do you mean a sticky sidebar on desktop?

This can be achieved using some CSS, something like this:

.inside-left-sidebar {
    position: sticky;
    top: 0;
}

On smaller screen it hides or shows by clicking a button, this will require some custom development with JavaScript.

[andrachans]

Thank you Ying,

No, what I am after is: when I click on a category menu item, that the category menu stays open, and allows me to view all sub category menu items.

So that, when clicking through the sub category menu items, the category menu item always remains open.

For example: when you click on “ELEMENTS” category menu item (in the demo website link below), you will then view 5 sub category items. When you click on one of the sub category items, for example “Tabs Widget”, the category menu item “ELEMENTS” always remains open.

The category menu item “ELEMENTS” will only close when you click on another category item, for example “CONTENT”. “CONTENT” will then display all sub category menu items, allowing you to click through each one until closing the “CONTENT” category menu item.

I hope I explain myself better this time.

Thank you.

[Ying]

Check the example 7 here:
https://docs.generatepress.com/article/header-examples/#example-7

Is it what you are looking for?

[andrachans]

Hello there,

No, this is not what I am after.

I am wanting to know if you can help me with the functionality only, not where or, how to position the menu on my website.

Maybe I should have started with this: “After I have positioned the main navigation menu in the left sidebar…’Can you please point me towards any article that can assist me with replicating the design and functionality of the left sidebar menu, on the demo website link below.’ ”

Thank you.

[David]

Hi there,

are you using the Primary Navigation or Secondary Navigation in your sidebar ?

[andrachans]

Hello David

I will be using the Primary Navigation menu.

I am wanting to build a documentation website.

I need related articles (sub menu items) to fall under the relevant topic (a menu item) on the Primary Navigation menu – and I also need the relevant topic (menu item) to remain open to allow a person to read one article after the other (moving from one sub menu item to the next), without needing to navigate back and forth.

[David]

I need related articles (sub menu items) to fall under the relevant topic (a menu item) on the Primary Navigation menu

That isn’t something the Theme can do. There are some snippets out there like this one:

https://www.isitwp.com/auto-add-subpages-to-menus/

Which will automatically add any Child Pages to its Parent page in the menu. So if you use Parent/Child Pages hierarchy then that should work.

and I also need the relevant topic (menu item) to remain open to allow a person to read one article after the other (moving from one sub menu item to the next)

To keep the current Sub Menu open can be done using some Javascript.

1. Create a new Hook Element.
https://docs.generatepress.com/article/hooks-element-overview/

2. Add this Script to the element text area:

<script>
var sideNav = document.querySelector('.gen-sidebar-nav');
var cma = sideNav.querySelectorAll('.current-menu-ancestor');
var cmaChild = cma[0].querySelectorAll('.sub-menu');
cma[0].classList.add('sfHover');
cmaChild[0].classList.add('toggled-on');
</script>

3. Set the Hook to: wp_footer

4. Set the Display Rules to Entire Site

For it to work correctly you should set the Customizer > Layout > Primary Navigation –> Navigation Dropdown to: Click - Arrow

[andrachans]

Thank you David.

[andrachans]

.

[David]

You’re welcome!

[Author]

Posts