Learn how to create a simple dropdown menu (and submenu) on your Showit design with a step-by-step tutorial today!
Today I wanted to share with you a simple dropdown menu tutorial for Showit. If you’re not familiar with Showit, it is a drag and drop platform that requires absolutely no coding to customize.
You can learn all of the things here, I share why I went from WordPress + Elementor to Showit!
I know learning a new platform can be overwhelming BUT not with Showit! You’ll understand more once you’ve completed this easy tutorial.
First, you’ll need to create simple navigation or header with text, i.e. HOME, ABOUT, SERVICES, BLOG, etc.
For the sake of this tutorial, I used the Simple template on Showit.
Once you’ve created a header, “add canvas view” and move all of the navigation text into it.
After you’ve duplicated the canvas view and renamed it, you’ll want to determine which text is going to be a dropdown menu (or more if you need it!).
Now you’ll want to create a dropdown using the rectangle tool and icon (used an arrow).
Once you’ve created the dropdown, add text to it (I made the rectangle a little bigger):
For this tutorial, I’ve made my “gallery” text the dropdown menu. Click on “gallery” and go to your right under “click actions.”
You will want to set the click action to “canvas,”:
For view one: set the click actions to “canvas,” “this canvas,” and “view two” (to simulate opening dropdown menu).
For view two: set the click actions to “canvas,” “this canvas,” and “view one” (to simulate closing dropdown menu).
This is an optional step. My header has a horizontal lock, which means that the text, icons, and shape on the header itself are locked to the right of the website.
If you do not turn it on this design, the dropdown menu will not align with the correct text, “gallery.”
Instead it’ll be align to the “about” text, and I don’t want that.
Now you have a dropdown menu! Want to try adding a submenu within a dropdown menu? Keep reading.
Complete steps I through V, you will now have to create a third canvas view.
This one is going to open up a smaller submenu with more links.
I made the rectangle longer to accommodate the new links under the “families” category.
Add your text.
Since “families” has the subcategories, we are going to make the click actions in view two open up to “view three.”
To close the submenu, make the click actions for “families” in view three go to “view two.”
BAM! You have a dropdown menu and a submenu, say whaaaaat? Easy peasy am I right?
Subscribe and stay tuned for more easy Showit tutorials.
I share how to create both desktop and mobile dropdown menus on Showit.
Save this for reference later.