Expanding circular menu

Divi expanding circular menu layout & tutorial

This free Divi layout and tutorial is from the Elegant Themes website blog post “How to Create a Circular Icon Menu that Expands on Click in Divi”.

This layout uses a combination of Divi modules and options along with some Javascript code that will create a clickable menu that opens up in a circle around the menu icon.

The tutorial will show you how to;

• Use a  Divi blurb module as the main navigation icon and duplicate for menu items
• Use position: absolute !important; as custom CSS on the blurb modules to make them sit on top of each other by default
• Use transform translate hover options to place the menu items in a circular pattern around the main navigation icon
• Add a CSS class to each of the menu items
• Use a Divi code module to add custom CSS and Javascript for the hover animations

Download this layout on the Elegant Themes blog

To download the JSON layout file for this tutorial you will need to enter an email into the subscription box on the blog post. If you are already signed up to the Elegant Themes mailing list you will not be re-added. This sign-up form is found just below the layout Demos near the top of the post.

To import the layout to your Divi website you will need to extract the zip file and drag-and-drop the JSON file into your Divi Builder page.

Affiliate disclosure* – Links to layouts on Elegant Themes and 3rd party websites may contain affiliate code. You will never pay any extra for using these links. Thanks for supporting Divi Theme Examples.