React Menus:

Circular React Menu with Toggle Button

Making variety can have a significant impact on the beauty of your website. So, if you have a page and would like to increase the number of its viewers, pay attention to this post carefully. It is a Circular React Menu with Toggle Button with a different theme. With the help of this fantastic React Circular Menu, you are able to add different kinds of information into several categories. Your viewers can access all information by using this JS Animating Menu. So, you can use this beautiful code to classify the content of your website and attract more viewers.

Pay attention to the following preview of this Rounded Menu Code to realize its function. This preview shows a simple dark page with a hamburger icon in a white circle. This icon is located at the left-up side corner of this page. When you click on this Circular Menu Hamburger Button, you will face various circular icons with different colors. Each icon illustrates a specific category, and you can see its related photo. The exit button is presented in the middle of all icons, and if you click on this button in black color, you will move to the first simple page.

React Circular Menu

JS Animating Menu

Rounded Menu Code

Circular Menu Hamburger Button

<!-- This script got from frontendfreecode.com -->
<div id="app">
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

body {
	height: 100%;
	width: 100%;
	padding: 0px;
	margin: 0px;
	background: #303c54;
}
.menu-item {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 6em;
	width: 6em;
	margin: -3em;
	text-align: center;
	display: flex;
	border-radius: 50%;
	box-shadow: 10px 10px 10px -11px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}
.menu-item i {
	color: white;
	font-size: 2em;
	display: flex;
	margin: auto;
	transition: font-size 0.1s ease-out;
}
.menu-item:hover {
	height: 7em;
	width: 7em;
	margin: -3.5em;
}
.menu-item:hover i {
	font-size: 2.5em;
}
.item-show {
	opacity: 1;
	transition: height 0.1s ease-out, width 0.1s ease-out, margin 0.1s ease-out, opacity 0.5s ease-out;
}
.item-hide {
	opacity: 0;
}
.menu-background {
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: 100;
	background-color: #f0e8d1;
}
.button-bg {
	position: relative;
	height: 18em;
	width: 18em;
	border-radius: 50%;
	margin: 1.75em auto 0;
	z-index: 1000;
	top: 50%;
	margin-top: -9em;
}
.menu-toggle {
	position: absolute;
	z-index: 2000;
	margin-top: 2em;
	margin-left: 2em;
	height: 6em;
	width: 6em;
	border-radius: 50%;
	background-color: transparent;
	outline: none;
	cursor: pointer;
}
.menu-toggle i {
	font-size: 20px;
}
.toggle-open {
	border: 3px solid #353535;
	color: #353535;
	top: 50%;
	left: 50%;
	margin-top: -3em;
	margin-left: -3em;
	-webkit-animation: fadeIn 1s 1 ease-in;
	animation: fadeIn 1s 1 ease-in;
}
.toggle-closed {
	border: 3px solid white;
	color: white;
}
.menu-wrapper-open {
	opacity: 1;
	visibility: visible;
	transition: all 0.2s ease-out;
}
.menu-wrapper-closed {
	opacity: 0;
	visibility: hidden;
	transition: all 0.2s ease-out;
}
.animate-menu {
	-webkit-animation: spin 1.3s 1 cubic-bezier(0.175, 0.585, 0.08, 1.2);
	animation: spin 1.3s 1 cubic-bezier(0.175, 0.585, 0.08, 1.2);
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}
@-webkit-keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

const itemClick = e => {
    console.log("clicked");
};
const menuData = [
    {
        color: "#b3462f",
        icon: "fa-paper-plane",
        click: itemClick
    },
    {
        color: "#e78b38",
        icon: "fa-pencil",
        click: itemClick
    },
    {
        color: "#353535",
        icon: "fa-trash",
        click: itemClick
    },
    {
        color: "#303c54",
        icon: "fa-tags",
        click: itemClick
    },
    {
        color: "#3a384e",
        icon: "fa-search",
        click: itemClick
    },
    {
        color: "#78332c",
        icon: "fa-users",
        click: itemClick
    },
    {
        color: "#78332c",
        icon: "fa-users",
        click: itemClick
    }];
const MenuWrapper = React.createClass({
    displayName: "MenuWrapper",
    getInitialState() {
        return {
            menuOpen: false
        };
    },
    componentWillMount() {
        this.makeMenu(menuData);
    },
    makeMenu(menuConfig) {
        const angle = 360 / menuConfig.length;
        let rotation = 0;
        let menuItems = [];
        menuConfig.forEach(({
            color,
            icon,
            click }) => {
            menuItems.push({
                color,
                icon,
                click,
                rotation,
                angle,
                show: false
            });
            rotation += angle;
        });
        this.setState({
            menuItems: menuItems
        });
    },
    toggleMenu() {
        this.setState({
            menuOpen: !this.state.menuOpen
        });
    },
    animateButtons() {
        const length = this.state.menuItems.length;
        const stagger = i => {
            if (i < length) {
                setTimeout(() => {
                    let items = this.state.menuItems;
                    let showing = this.state.menuItems[i].show;
                    this.setState({
                        menuItems: [
                            ...items.slice(0, i),
                            Object.assign({}, items[i], {
                                show: !showing
                            }),
                            ...items.slice(i + 1)]
                    });
                    stagger(i + 1);
                }, 60);
            }
        };
        stagger(0);
    },
    render() {
        return /*#__PURE__*/(
            React.createElement("div", null, /*#__PURE__*/
                React.createElement(MenuToggle, {
                    toggle: this.toggleMenu,
                    open: this.state.menuOpen,
                    animateButtons: this.animateButtons
                }), /*#__PURE__*/
                React.createElement(Menu, {
                    size: 18,
                    items: this.state.menuItems,
                    open: this.state.menuOpen
                })));
    }
});
const Menu = ({
    size,
    items,
    toggle,
    open }) => /*#__PURE__*/
    React.createElement("div", {
        className: open ?
            "menu-wrapper-open" :
            "menu-wrapper-closed"
    }, /*#__PURE__*/
        React.createElement("div", { className: "menu-background" }, /*#__PURE__*/
            React.createElement(MenuItems, {
                size: size,
                items: items,
                open: open
            })));
const MenuItems = ({
    size,
    items,
    open }) => {
    const buttons = items.map(item => {
        const styling = {
            transform:
                `rotate(${item.rotation}deg) 
         translate(${size / 2}em) 
         rotate(${-item.rotation}deg)`,
            backgroundColor: item.color
        };
        return /*#__PURE__*/(
            React.createElement("div", {
                className: item.show ?
                    "menu-item item-show" :
                    "menu-item item-hide",
                style: styling,
                onClick: item.click
            }, /*#__PURE__*/
                React.createElement("i", {
                    className: "fa " + item.icon,
                    "aria-hidden": "true"
                })));
    });
    return /*#__PURE__*/(
        React.createElement("div", {
            className: open ?
                "button-bg animate-menu" :
                "button-bg"
        }, " ",
            buttons));
};
const MenuToggle = ({
    toggle,
    open,
    animateButtons }) => /*#__PURE__*/
    React.createElement("button", {
        className: open ?
            "menu-toggle toggle-open" :
            "menu-toggle toggle-closed",
        onClick: () => {
            toggle();
            setTimeout(
                animateButtons,
                120);
        }
    }, " ", /*#__PURE__*/
        React.createElement("i", {
            className: open ?
                "fa fa-times" :
                "fa fa-bars",
            "aria-hidden": "true"
        }));
ReactDOM.render( /*#__PURE__*/
    React.createElement(MenuWrapper, null),
    document.getElementById('app'));

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script>
<style>
body {
	height: 100%;
	width: 100%;
	padding: 0px;
	margin: 0px;
	background: #303c54;
}
.menu-item {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 6em;
	width: 6em;
	margin: -3em;
	text-align: center;
	display: flex;
	border-radius: 50%;
	box-shadow: 10px 10px 10px -11px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}
.menu-item i {
	color: white;
	font-size: 2em;
	display: flex;
	margin: auto;
	transition: font-size 0.1s ease-out;
}
.menu-item:hover {
	height: 7em;
	width: 7em;
	margin: -3.5em;
}
.menu-item:hover i {
	font-size: 2.5em;
}
.item-show {
	opacity: 1;
	transition: height 0.1s ease-out, width 0.1s ease-out, margin 0.1s ease-out, opacity 0.5s ease-out;
}
.item-hide {
	opacity: 0;
}
.menu-background {
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: 100;
	background-color: #f0e8d1;
}
.button-bg {
	position: relative;
	height: 18em;
	width: 18em;
	border-radius: 50%;
	margin: 1.75em auto 0;
	z-index: 1000;
	top: 50%;
	margin-top: -9em;
}
.menu-toggle {
	position: absolute;
	z-index: 2000;
	margin-top: 2em;
	margin-left: 2em;
	height: 6em;
	width: 6em;
	border-radius: 50%;
	background-color: transparent;
	outline: none;
	cursor: pointer;
}
.menu-toggle i {
	font-size: 20px;
}
.toggle-open {
	border: 3px solid #353535;
	color: #353535;
	top: 50%;
	left: 50%;
	margin-top: -3em;
	margin-left: -3em;
	-webkit-animation: fadeIn 1s 1 ease-in;
	animation: fadeIn 1s 1 ease-in;
}
.toggle-closed {
	border: 3px solid white;
	color: white;
}
.menu-wrapper-open {
	opacity: 1;
	visibility: visible;
	transition: all 0.2s ease-out;
}
.menu-wrapper-closed {
	opacity: 0;
	visibility: hidden;
	transition: all 0.2s ease-out;
}
.animate-menu {
	-webkit-animation: spin 1.3s 1 cubic-bezier(0.175, 0.585, 0.08, 1.2);
	animation: spin 1.3s 1 cubic-bezier(0.175, 0.585, 0.08, 1.2);
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}
@-webkit-keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
</style>

</head>
<body>
<div id="app">
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
const itemClick = e => {
    console.log("clicked");
};
const menuData = [
    {
        color: "#b3462f",
        icon: "fa-paper-plane",
        click: itemClick
    },
    {
        color: "#e78b38",
        icon: "fa-pencil",
        click: itemClick
    },
    {
        color: "#353535",
        icon: "fa-trash",
        click: itemClick
    },
    {
        color: "#303c54",
        icon: "fa-tags",
        click: itemClick
    },
    {
        color: "#3a384e",
        icon: "fa-search",
        click: itemClick
    },
    {
        color: "#78332c",
        icon: "fa-users",
        click: itemClick
    },
    {
        color: "#78332c",
        icon: "fa-users",
        click: itemClick
    }];
const MenuWrapper = React.createClass({
    displayName: "MenuWrapper",
    getInitialState() {
        return {
            menuOpen: false
        };
    },
    componentWillMount() {
        this.makeMenu(menuData);
    },
    makeMenu(menuConfig) {
        const angle = 360 / menuConfig.length;
        let rotation = 0;
        let menuItems = [];
        menuConfig.forEach(({
            color,
            icon,
            click }) => {
            menuItems.push({
                color,
                icon,
                click,
                rotation,
                angle,
                show: false
            });
            rotation += angle;
        });
        this.setState({
            menuItems: menuItems
        });
    },
    toggleMenu() {
        this.setState({
            menuOpen: !this.state.menuOpen
        });
    },
    animateButtons() {
        const length = this.state.menuItems.length;
        const stagger = i => {
            if (i < length) {
                setTimeout(() => {
                    let items = this.state.menuItems;
                    let showing = this.state.menuItems[i].show;
                    this.setState({
                        menuItems: [
                            ...items.slice(0, i),
                            Object.assign({}, items[i], {
                                show: !showing
                            }),
                            ...items.slice(i + 1)]
                    });
                    stagger(i + 1);
                }, 60);
            }
        };
        stagger(0);
    },
    render() {
        return /*#__PURE__*/(
            React.createElement("div", null, /*#__PURE__*/
                React.createElement(MenuToggle, {
                    toggle: this.toggleMenu,
                    open: this.state.menuOpen,
                    animateButtons: this.animateButtons
                }), /*#__PURE__*/
                React.createElement(Menu, {
                    size: 18,
                    items: this.state.menuItems,
                    open: this.state.menuOpen
                })));
    }
});
const Menu = ({
    size,
    items,
    toggle,
    open }) => /*#__PURE__*/
    React.createElement("div", {
        className: open ?
            "menu-wrapper-open" :
            "menu-wrapper-closed"
    }, /*#__PURE__*/
        React.createElement("div", { className: "menu-background" }, /*#__PURE__*/
            React.createElement(MenuItems, {
                size: size,
                items: items,
                open: open
            })));
const MenuItems = ({
    size,
    items,
    open }) => {
    const buttons = items.map(item => {
        const styling = {
            transform:
                `rotate(${item.rotation}deg) 
         translate(${size / 2}em) 
         rotate(${-item.rotation}deg)`,
            backgroundColor: item.color
        };
        return /*#__PURE__*/(
            React.createElement("div", {
                className: item.show ?
                    "menu-item item-show" :
                    "menu-item item-hide",
                style: styling,
                onClick: item.click
            }, /*#__PURE__*/
                React.createElement("i", {
                    className: "fa " + item.icon,
                    "aria-hidden": "true"
                })));
    });
    return /*#__PURE__*/(
        React.createElement("div", {
            className: open ?
                "button-bg animate-menu" :
                "button-bg"
        }, " ",
            buttons));
};
const MenuToggle = ({
    toggle,
    open,
    animateButtons }) => /*#__PURE__*/
    React.createElement("button", {
        className: open ?
            "menu-toggle toggle-open" :
            "menu-toggle toggle-closed",
        onClick: () => {
            toggle();
            setTimeout(
                animateButtons,
                120);
        }
    }, " ", /*#__PURE__*/
        React.createElement("i", {
            className: open ?
                "fa fa-times" :
                "fa fa-bars",
            "aria-hidden": "true"
        }));
ReactDOM.render( /*#__PURE__*/
    React.createElement(MenuWrapper, null),
    document.getElementById('app'));
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS