2分钟教你实现环形/扇形菜单(基础版)


Posted in HTML / CSS onJanuary 15, 2020

前言
 

项目需要用到环形菜单,初略在网上找了一下,没有找到合适的,于是自己写了一个很简单的,后续再优化。

这个组件是基于react,但是原理都一样。

展开效果如下:
 

2分钟教你实现环形/扇形菜单(基础版)

实现

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)}]}
/>

期望
 

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

  1. 灵活布局sectorMenuItem
  2. 灵活展示SectorMenu的位置(left,right, top, bottom...)

踩坑

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
HTML5如何适配 iPhone IOS 底部黑条
Mar 09 HTML / CSS
前端面试必备之CSS3的新特性
Sep 05 HTML / CSS
CSS3中的5个有趣的新技术
Apr 02 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 HTML / CSS
canvas粒子动画背景的实现示例
Sep 03 HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 HTML / CSS
HTML5中原生的右键菜单创建方法
Jun 28 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
Jul 06 HTML / CSS
boostrap modal 闪现问题的解决方法
Sep 01 HTML / CSS
使用CSS实现百叶窗效果示例代码
May 07 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 #HTML / CSS
Grid 宫格常用布局的实现
Jan 10 #HTML / CSS
CSS3 旋转立方体问题详解
Jan 09 #HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
Jan 06 #HTML / CSS
css3 flex布局 justify-content:space-between 最后一行左对齐
Jan 02 #HTML / CSS
详解CSS3新增的背景属性
Dec 25 #HTML / CSS
CSS3实现缺角矩形,折角矩形以及缺角边框
Dec 20 #HTML / CSS
You might like
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
献给php初学者(入门学习经验谈)
2010/10/12 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
JS 实现Json查询的方法实例
2013/04/12 Javascript
javascript:void(0)使用探讨
2013/08/27 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
Python 深入理解yield
2008/09/06 Python
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
常见python正则用法的简单实例
2016/06/21 Python
python逆向入门教程
2018/01/15 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
使用tensorflow实现线性svm
2018/09/07 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
python中reload重载实例用法
2020/12/15 Python
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
艺术设计专业个人求职信范文
2013/12/11 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
校园广播稿范文
2015/08/19 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电
Python OpenCV之常用滤波器使用详解
2022/04/07 Python