这篇文章主要介绍了css中实现环形/扇形菜单的方法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
前言
项目需要用到环形菜单，初略在网上找了一下，没有找到合适的，于是自己写了一个很简单的，后续再优化。
这个组件是基于react,但是原理都一样。
展开效果如下：
实现
css(less)
@centerIconSize: 30px;.flex(@justify: flex-start, @align: center) { justify-content: @justify; align-items: @align; display: flex;}.sector-menu-wrapper { position: relative; width: @centerIconSize; margin: auto; .center-icon { .flex(center); width: @centerIconSize; height: @centerIconSize; border-radius: 50%; background: rgba(0, 0, 0, 0.3); color: white; cursor: pointer; } .sector-item { position: absolute; .flex(center); width: @centerIconSize; height: @centerIconSize; border-radius: 50%; background: rgba(0, 0, 0, 0.3); cursor: pointer; color: white; top: 0; left: 0; transition: all linear 0.5s; transform: translate(0, 0); // display: none; visibility: hidden; } .sector-list { &.sector-list-active { transition: all linear 0.5s; .sector-item { .flex(center); transition: all linear 0.5s; transform: translate(0, 0); visibility: visible; &:first-child { transform: translate(0, -@centerIconSize * 1.5); } &:nth-child(2) { transform: translate(-@centerIconSize * 1.5, 0); } &:nth-child(3) { transform: translate(0, @centerIconSize * 1.5); } } } }}SectorMenu.js
import React from 'react';export default class SectorMenu extends React.Component { state = { direction: 'left', sectorMenuVisible: false, centerIconSize: 30, sectorItemSize: 30, } showSectorMenu = () => { const { sectorMenuVisible } = this.state; this.setState({ sectorMenuVisible: !sectorMenuVisible, }) } onClickSectorMenuItem = (index) => { const { sectorMenuItemFunctions } = this.props; if (!sectorMenuItemFunctions || typeof(sectorMenuItemFunctions[index]) !== 'function') { return; } sectorMenuItemFunctions[index](); } getSectorJsx = () => { const { sectorMenuItems } = this.props; if (!sectorMenuItems || !Array.isArray(sectorMenuItems) || sectorMenuItems.length === 0) { return; } const styles = {}; const { sectorMenuVisible } = this.state; return sectorMenuItems.map((item, i) => { // const styles = { // transform: translate(0, -centerIconSize * 2); // }; return (<div className={`sector-item ${sectorMenuVisible && 'sector-item-active'}`} style={styles} onClick={() => this.onClickSectorMenuItem(i)} key={i} > {item} </div>) }); } render() { const { sectorMenuVisible } = this.state; return ( <div className="sector-menu-wrapper"> <div className="center-icon" onClick={this.showSectorMenu}> { sectorMenuVisible ? 'x' : '···' } </div> <div className={`sector-list ${sectorMenuVisible && 'sector-list-active'}`}> {this.getSectorJsx()} </div> </div> ) }}调用
<SectorMenu sectorMenuItems={['A1', 'A2', 'A3']} sectorMenuItemFunctions={[function () {console.log(0)}, function () {console.log(1)}, function () {console.log(2)}]}/>期望
本来是想写成灵活分布，在怎么计算位置这里稍稍卡了一下，项目时间紧，改天抽空优化一下
灵活布局sectorMenuItem
灵活展示SectorMenu的位置（left,right, top, bottom...）
踩坑
过渡动画一直没有用，后来才知道是我在sector-item这个类里使用了display:none导致的，改用visibility属性就可以了。
感谢你能够认真阅读完这篇文章，希望小编分享的“css中实现环形/扇形菜单的方法”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!
