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: January 19, 2024
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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...