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 相关文章推荐
使用JS+CSS3技术:让你的名字动起来
Apr 27 HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
Oct 20 HTML / CSS
详解HTML5新增标签
Nov 27 HTML / CSS
html5 application cache遇到的严重问题
Dec 26 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
Apr 25 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
Dec 17 HTML / CSS
Html5大屏数据可视化开发的实现
Jun 11 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
phpmyadmin 3.4 空密码登录的实现方法
2010/05/29 PHP
PHP 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
PHP访问Google Search API的方法
2015/03/05 PHP
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
Cookie 注入是怎样产生的
2009/04/08 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
JQuery 中几个类选择器的简单使用介绍
2013/03/14 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
javascript数据结构之二叉搜索树实现方法
2015/11/25 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
Python的时间模块datetime详解
2017/04/17 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
应届毕业生求职自荐书
2014/01/03 职场文书
大学专科自荐信
2014/06/17 职场文书
调研汇报材料范文
2014/08/17 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
团代会闭幕词
2015/01/28 职场文书
工作会议通知
2015/04/15 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
导游词之江西赣州
2019/10/15 职场文书
python创建字典及相关管理操作
2022/04/13 Python