How to create an animated sticky
menu with CSS3 and JS

Follow us on

Fabio Sarcona, Web Developer, Italy

7 Oct 2016

In this new tutorial I will show you how you can add an animated sticky menus to your website and add shortcuts that can improve the user experience.

I know, there are are a few great plugins you can use, but I do not love so much plugins and when I can, I always prefer to find an “alternative route” as for this tuts where I will use circleMenu a simple and lightweight, dependency-free JavaScript library

I know you’re curious to see immediately what you will learn from this tutorial, so here is a live:

Let’s started..

The first thing you have to do is download the child theme that I have prepared, and which already contains the JS and CSS code needed to run properly the menu.

Then download the file and open the .zip package.

Inside the package you will find three files:

  1. Child, which is the child theme
  2. Circle-Menu-Layout.json, a “Code” module that contains the HTML code for the menu structure.
  3. structure-menu.html (of this file I’ll tell you at the end of the tutorial)

You have to do now is load the child theme in your WordPress and activate it.

NOTE: If you do not know how you do, do not worry, just follow these simple steps:

Go to Appearance > Themes > and click on the Add New Theme. 
After click on Upload Theme and install the child theme.

Import the JSON file in the library

Now only missing the last step, import the JSON file in the library and upload the page where you want to add your new menu. That’s all you need to do to add a submenu to your website.

If you already use a child theme..

If you already use a child theme then the steps are a little different but still very simple. Again I created a package that contains all the necessary files for each step, so you’ll first need to download this package:

Now you just need to follow these 5 simple steps:

Step 1: Log in to your child theme folder via FTP and add the JS files that you can find inside the package.

Step 2: Open the functions.php file and add this code:

NOTE: This code is used to load properly a js file in WordPress.

 function child_add_scripts() {
 wp_register_script('circleMenu', get_bloginfo('stylesheet_directory') . '/circleMenu.js');
 wp_enqueue_script( 'circleMenu' );
 add_action( 'wp_enqueue_scripts', 'child_add_scripts' )

Step 3: Now add this script to the footer.php file before closing body tag:

 var el = '.js-menu';
 var myMenu = cssCircleMenu(el);

Step 4: Add the CSS code (which always are inside the .zip package) in your stylesheet.

Step 5: Import the JSON file in your library and add the new menu in the pages that you prefer.

Last Step: enjoy! 🙂

HTML Structure

Before concluding this tuts, I want to tell you about the menu HTML structure and how you can customize it. Look at this screenshot:


Icons: I used Font Awesome for icons, so all you need to do and add icons of your choice.
Label: Here you can add a label that will be shown on mouse-over
New Items: You can add new items by copying the list item.

Note: inside the module “Code” the HTML code looks like this:


as you can see the code is a single block and this makes customization definitely more difficult, so I thought I would add a further package in .zip files with HTML code that you can customize using your favorite editor. That way when you have applied your changes, you need only copy and paste the code inside the module.


Finally I thought I’d give you some ideas to make the most of this new menu, for example, you could use it to open messenger, how? it’s very simple!

Use this link and all you have to do is replace “XYZ” with your Facebook vanity username.
For example in my case it is:

Another possible use that comes to mind is to create a trigger button to open a pop-up with a contact form or a form to subscribe to the newsletter using the plugin DIVI POP-UP MODAL.

But now it’s your time:

How do you plan to use these shortcuts in your projects? you have some ideas to share?

Write it in the comments ?

Next Tuts

In the next tutorial I’ll show you how to create a beautiful CTA bar with a Mobile App style. Do you want to preview it? Open the link below from your smartphone or tablet ;).