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 相关文章推荐
学做Bootstrap的第一个页面
May 15 HTML / CSS
CSS3教程(4):网页边框和网页文字阴影
Apr 02 HTML / CSS
css3实现图片遮罩效果鼠标hover以后出现文字
Nov 05 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
Mar 29 HTML / CSS
html5+css3之制作header实例与更新
Dec 21 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 HTML / CSS
html5 拖拽上传图片实例演示
Apr 01 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 HTML / CSS
canvas小画板之平滑曲线的实现
Aug 12 HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 HTML / CSS
详解flex:1什么意思
Jul 23 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
一漂亮的PHP图片验证码实例
2014/03/21 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
jQuery 表单验证扩展(三)
2010/10/20 Javascript
html组件不可输入(只读)同时任何组件都有效
2013/04/01 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
微信小程序合法域名配置方法
2019/05/06 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
Python中列表的一些基本操作知识汇总
2015/05/20 Python
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
python调用外部程序的实操步骤
2019/03/04 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
实习生自荐信范文分享
2013/11/27 职场文书
业绩倒数第一的检讨书
2014/09/24 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
Python实现列表拼接和去重的三种方式
2021/07/02 Python
Javascript之datagrid查询详解
2021/09/15 Javascript