Including a floating pop-out Menu on your web site will make it simple for guests to get entry to your menu at anytime right through your web page. That is nice for sub navigation menus that go with your number one navigation on the best of your web page. It additionally means that you can show menus explicit on your web page content material. As an example, you might need to have a customized sub navigation menu to your services and products web page that gives hyperlinks to all your other services and products.
On this educational, I’m going to turn you the best way to create a floating pop-out menu in Divi. The elemental thought is to profit from Divi’s accordion module for the menu capability after which upload complicated customization to a row to flow it to the left of the web page and feature it pop-out when soaring over a portion of the row.
Let’s get began!
Sneak Peek
Here’s a fast sneak peek of the design and capability we can be development on this educational:
What you’ll want
For this educational, you’ll want the next:
- The Divi Theme
- The Charity Donate Page Layout from the Charity Structure Pack (to be had at no cost throughout the Divi Builder)
Including the Web page Structure
For this educational, I’m going to make use of the Charity Donate Web page Structure from the Charity Structure Pack. So as to add the premade structure on your web page, first create a brand new web page and provides your web page a identify. Then deploy the visible builder. Make a selection the choice “Select a Premade Structure”. From the burden from library popup, choose the Charity Structure Pack and the clicking to make use of the Donate web page.
As soon as the structure has been added to the web page, you are prepared to begin!
Upload the Segment and Row to your Pop-out Menu
To start out, we wish to upload a brand new phase to the highest of your web page. Then upload a row with a three-fourths one-fourth column structure.
Within the left column, upload a brand new accordion module. Replace (or create) a complete of 3 accordions. For the content material of each and every accordion, upload a Name (this may occasionally function a class menu merchandise to your sub navigation menu. And within the content material field, create a couple of hyperlinks (each and every on a separate line) to function your sub menu pieces.
Give each and every of your own accordions a customized margin:
Customized margin: 0px best, 0px backside
To have the accordion fit the design of the structure, reproduction probably the most toggle modules getting used at the web page and paste it throughout the row along with your accordion (the location doesn’t subject, we’re simplest preserving it right here quickly). Now we’re going to use Divi’s prolong types function to increase the types of the toggle to our new accordion. To try this, open the toggle settings and proper click on at the icon class heading and choose “prolong icon types” from the checklist.
Then choose to increase the icon types to all accordions within the phase.
Subsequent, proper click on at the toggle types and choose “prolong toggle types” from the checklist.
Then make a selection to increase the toggle types to all accordion modules within the phase.
Subsequent, proper click on at the Name Textual content and choose “prolong Name Textual content Kinds” from the checklist.
Then make a selection to increase the Name Textual content types to all accordion modules within the phase.
Now that you’ve the types prolonged, you’ll delete the toggle module.
Now pass on your Accordion Module and provides it a white background.
And wrap up the accordion design with the next:
Customized margin: 20px best, 20px backside
Backside Border width: 1px (set all different border widths to 0px)
Now your accordion module is all set!
In the proper column, upload a textual content module with the phrase “menu” because the content material. This whole column with the textual content will function our label that can stick out of the facet of the web page in order that while you hover over the label, the remainder of the row (with the accordion) will seem.
Then replace the textual content design settings as follows:
Textual content Font Weight: Daring
Textual content Font Taste: TT
Textual content textual content Colour: #ffffff
Textual content Textual content Dimension: 16px
Textual content Letter Spacing: 1px
Textual content Orientation: heart
Disable on: Telephone, Pill
You gained’t be capable to see the textual content at this level as a result of we haven’t added the colour background to our row. Additionally, understand that we disabled the module on telephone and pill. It’s because we’re going to disable the hover capability of the menu on cell so there will probably be no use for the menu label.
Styling the Row and Extending it on Hover
Now it’s time to begin styling our row. Open the row settings and replace the next:
Background Colour: #26c699
Customized Width: 320px
Gutter Width: 1
Equalize Column Heights:YES
Customized Margin (desktop): -241px left
Customized Margin (hover): 0px left
Customized Margin (pill): 10% left, 10% proper
The customized margin is the important thing to the capability of the hover impact. Through surroundings the left margin to -241px on desktop, at the proper column with the textual content menu is visual. On hover, the left margin reverts to 0px to show the left column of the row with the menu accordion.
Customized Padding: 0px best, 0px backside
Rounded Corners: 10px best proper, 10px backside proper
As an alternative of the use of customized padding to vertically heart the menu textual content, we will use a couple of snippets of customized css to vertically heart the contents of column 2. Beneath the complicated tab, upload the next CSS beneath Column 2 Primary Component:
show: flex; flex-direction: column; justify-content: heart;
For more information in this idea, take a look at how to vertically align content in Divi.
Updating the Segment
The phase will probably be hidden on desktop since we can ultimately give our row a hard and fast place. On the other hand, we can wish to customise our phase for cell with an identical background colour on some right kind spacing:
Background Colour: #f7f9f9
Customized Margin: 0px best, 0px backside
Customized Padding (desktop): 0px best, 0px backside
Customized Padding (pill): 5% best, 5% backside
Positioning the Row with Customized CSS
Lately the phase along with your pop-out menu stays in a bit on the best of your web page. To flow the menu in order that it remains fastened at a definite place at the web page always as you scroll, you’ll first wish to give your row a customized CSS ID. To do this, open the row settings and upload the next beneath the Complicated tab:
CSS ID: flow
After that, open the your web page settings the use of the visible builder settings menu on the backside of the web page. Then upload the next customized CSS on your web page settings:
@media (min-width: 981px){
#flow {
place: fastened;
best: 200px;
left: 0px;
z-index: 99998;
}
}
Now your pop-out menu will keep fastened on desktop however will revert to a default taste on cell.
Take a look at the overall end result.
And right here it’s on cell.
Ultimate ideas
We’re all on the lookout for other ways to stay our menus (and submenus) readily to be had for our guests. I’m hoping this educational provides you with a treasured choice for making a submenu this is fastened (so it remains visual) and pops out on hover (in order that it saves house to your web page till the consumer wishes it). In fact, this design isn’t restricted to menus. You’ll be able to make a selection any module to show numerous diversifications of content material in a pop-out row. Take a look at #5 on this post for any other instance. I look ahead to listening to about your personal concepts within the feedback under.
Cheers!
The put up How to Create a Floating Pop-out Menu in Divi gave the impression first on Elegant Themes Blog.
WordPress Web Design