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.
Similar Code Snippets:
Lightweight Hamburger Menu with CSS and jQuery
Overlay Hamburger Menu Code with Example
Pure CSS Stylish Dropdown Menu
Simple Dropdown Menu using jQuery and CSS
Bootstrap Responsive Navigation Menu with Scroll Effect
CSS Fixed Menu at Bottom of the Page for Mobile
Hierarchical Tree Structure in HTML CSS
Off Canvas Menu with Submenu - jQuery Pushy
CSS and jQuery Tree View Navigation Menu
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.