Create a Circular “Satellite” Menu using Divi

Are you looking for a unique way to add an interactive and visually appealing menu to your Divi website? Standard navigation is great, but sometimes you want something that truly stands out and offers a bit of design flair. That’s where a circular “satellite” menu comes in!

Imagine a sleek, subtle menu icon tucked away in the bottom left corner of your screen. When a user clicks it, four (or more!) perfectly aligned menu options gracefully fan out in a circular pattern, ready for selection. It’s a modern, space-saving, and incredibly engaging way to present secondary navigation or quick links.

A Circular, Expanding Design

This tutorial will guide you through creating a captivating circular menu right within your Divi theme. This isn’t your typical navigation bar; it’s a dynamic element that starts as a single button and, upon interaction, reveals a set of “satellite” links arranged in a stylish arc. We’ll achieve this impressive effect using a combination of clever CSS for styling and JavaScript for the interactive open/close functionality.

Whether you want to showcase social links, quick contact options, or specific calls to action, this circular menu is an excellent way to do it without cluttering your main layout.

For a complete, step-by-step walkthrough of how to build and implement this circular menu, be sure to watch our detailed video tutorial:

Your Code for the Divi Circular Satellite Menu

Below, you’ll find the CSS and JavaScript code snippets required to bring this interactive circular menu to life on your Divi website. The video will walk you through precisely where to place each part of this code within your Divi settings (e.g., Divi Theme Options, Code Modules, or custom CSS files) to ensure everything works seamlessly.

Remember to follow the video tutorial closely for optimal implementation and any specific Divi Builder setup steps involved in adding the initial trigger element.

Classes

Blurb 1

transform_target

Blurb 2, 3, 4 and 5

has-transform toggle-transform-animation

CSS Code

<style>
  .has-transform, .transform_target .et-pb-icon {
    transition: all 400ms ease-in-out;
  } 
  .toggle-transform-animation {
    transform: none !important;
  }
  .transform_target {
    cursor: pointer;
  }
  .toggle-active-target.et_pb_blurb .et-pb-icon {
    background-color: transparent;
  }
</style>

JavaScript Code

<script>
(function($) {
  $(document).ready(function(){
    $('.transform_target').click(function(){
      $(this).toggleClass('toggle-active-target');
      $('.has-transform').toggleClass('toggle-transform-animation');   
    });    
  });
})( jQuery );   
</script>

Adding Interactive Flair to Your Divi Site

And there you have it! With the power of custom CSS and a touch of JavaScript, you can transform a simple menu into a dynamic, visually stunning circular “satellite” experience right on your Divi website. This interactive element not only saves screen space but also provides a delightful user experience, encouraging exploration and engagement.

We’re excited to see how you implement this unique menu on your own projects. Don’t hesitate to share your creations or ask questions in the comments below. Happy Divi building!