Circular Menu with JavaScript and CSS3

An ultra lightweight (less than 2KB) circular menu with JavaScript and CSS3 to show your items in awesome way. This plugin uses pure JavaScript and CSS to create beautiful radial/circular menu. It shows a hamburger icon in initial step, after that iconic menu items trigger around that on click event.

The menu doesn’t require any heavy JavaScript or CSS library, that’s why it is simple, lightweight and fast. Moreover, you can fully customize it with additional CSS styles.

Plugin Overview

Plugin: animated-radial-circular-menu
Author: Creative Punch
Licence: MIT Licence
Published: September 1, 2019
Repository: Fork on CodePen
Dependencies: Font Awesome 4 and Normalize CSS (Optional)
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 3.71 KB

How to Use JavaScript Circular Menu

1. First of all load Normalize CSS, circular menu‘s CSS and JavaScript file into your HTML document.

<!-- Normalize CSS -->	
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css" />

<!-- Circular Menu CSS -->
<link rel="stylesheet" href="css/style.css">

<!-- Circular Menu JS -->
<script  src="js/script.js"></script>

Note: The menu requires Font Awesome CSS for icons. So, this CSS library imported in style.css by @import method. Therefore, you don’t need to load Font Awesome manually.

2. After loading all menu assets, create HTML structure for circular menu like below.

<nav class="circular-menu">
  <div class="circle">
    <a href="" class="fa fa-home fa-2x"></a>
    <a href="" class="fa fa-facebook fa-2x"></a>
    <a href="" class="fa fa-twitter fa-2x"></a>
    <a href="" class="fa fa-linkedin fa-2x"></a>
    <a href="" class="fa fa-github fa-2x"></a>
    <a href="" class="fa fa-rss fa-2x"></a>
    <a href="" class="fa fa-pinterest fa-2x"></a>
    <a href="" class="fa fa-asterisk fa-2x"></a>
  </div>
  <a href="" class="menu-button fa fa-bars fa-2x"></a>
</nav>

Save your document and done.