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 相关文章推荐
浅析两列自适应布局的3种思路
May 03 HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
详解CSS3选择器的使用方法汇总
Nov 24 HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
Jul 11 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 HTML / CSS
处理HTML5新标签的浏览器兼容版问题
Mar 13 HTML / CSS
canvas绘制圆角头像的实现方法
Jan 17 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
使用CSS实现六边形的图片效果
Aug 05 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
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
javascript下查找父节点的简单方法
2007/08/13 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
一个JavaScript的求爱小特效
2014/05/09 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
2019/04/02 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
微信小程序自定义模态弹窗组件详解
2019/12/24 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
Python代码解决RenderView窗口not found问题
2016/08/28 Python
Python命令行解析模块详解
2018/02/01 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
运动会广播稿200字
2014/01/15 职场文书
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
大学生个人学年总结
2015/02/15 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
Django如何与Ajax交互
2021/04/29 Python