How to create an animated sticky menu, with CSS3 and JS

by | Oct 7, 2016 | Tips & Tricks, Tutorial | 24 comments

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 demo:
Live Demo

This tuts is divided into two parts:

For those not using a child theme and for those who already have a child theme, because as you will see shortly, there are several steps to be followed as appropriate.

If you do not use a child theme

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.

DOWNLOAD CHILD THEME

Inside the package you will find three files:

  1. Child Theme.zip, 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

screenshot-upload-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:

DOWNLOAD 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.

<?php
 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:

<script>
 var el = '.js-menu';
 var myMenu = cssCircleMenu(el);
 </script>

footer_php screenshot

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:

structure-menu_html

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:

html-code-module-compressor

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.

Conclusion

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 https://m.me/XYZ and all you have to do is replace “XYZ” with your Facebook vanity username.
For example in my case it is: https://m.me/creativechildthemes

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 ;).

Live Demo


Author | Fabio Sarcona

I am a freelance developer, dad of Creative Child Themes and one a sweet puppy Cocker Spaniel named Camilla. You want to see me happy? You just need a computer and chips! πŸ˜€


Get the latest resources and freebies in your inbox

Join over 7000 people and get access to free resources, exclusive discounts and the latest tutorials. All directly in your mailbox!

Your email is safe 💌 . I hate SPAM same as you!

Pin It on Pinterest

Shares
Share This