SERVICES
Your Title Goes Here
Your content goes here. Edit or remove this text inline.
Your Title Goes Here
Your content goes here. Edit or remove this text inline.
Your Title Goes Here
Your content goes here. Edit or remove this text inline.
CONTACT
Do It Yourself!
In this tutorial we are going to use DiviMenus Flex to show and hide a page section on Menu Item click.
For that purpose, please reproduce the following steps.
Add the elements to the page
First of all, you need to add the elements that you want to show. For this example we want to show a section.
Give them a CSS ID / CSS Class
This will bind the page elements to the Menu Item that will show them. For this example we have assigned the yellow-section CSS ID to the section.
If you want to show multiple elements, you will need to give them CSS classes instead.
Add a DiviMenu to the page
Choose either the DiviMenus module or the DiviMenus Flex module from the modules list.
Add a Menu Item
Click on Add New Menu Item and type Show.
We are customizing the Menu Item style for this example, but you can leave it as is and move on to the next step.
Change the Link Type to Show
Now, we will be able to show the elements that we previously added to the page!
Showing the page elements
Once we have selected the Show Link Type, we can finally show and hide our section on Menu Item Click!
For that purpose, we only have to type our section CSS ID in the CSS ID field and leave the remaining fields as is.
🥳 That’s it!
Feel free to use all the Show Link Type fields to customize the behavior of the page elements that we are showing.
Apart from typing the CSS ID or CSS class of the element(s) that you want to show, you can change the visibility behavior, show on Menu Item hover instead, hide them when either clicking outside them or closing the DiviMenu, as well as other customizations this Link Type provides and you may need.
We will be adding tutorials on the Show Link type and other features every now and then. Please, check our website and subscribe to our YouTube channel for upcoming updates!