css中实现环形/扇形菜单的方法

这篇文章主要介绍了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' : '&middot;&middot;&middot;'                    }                </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)}]}/>

期望
 

本来是想写成灵活分布，在怎么计算位置这里稍稍卡了一下，项目时间紧，改天抽空优化一下

1. 灵活布局sectorMenuItem

2. 灵活展示SectorMenu的位置（left,right, top, bottom...）

踩坑

过渡动画一直没有用，后来才知道是我在sector-item这个类里使用了display:none导致的，改用visibility属性就可以了。

感谢你能够认真阅读完这篇文章，希望小编分享的“css中实现环形/扇形菜单的方法”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网精选频道，更多相关知识等着你来学习!