2分钟教你实现环形/扇形菜单(基础版)CSS3 分类菜单效果CSS实现菜单按钮动画CSS导航条菜单之带小三角形的实现代码CSS多级菜单的实现代码css利用transform skewX制作平行四边形导航菜单CSS设置列表样式和创建导航菜单实现代码CSS中的导航栏和下拉菜单的实现HTML+CSS实现下拉菜单的实现纯CSS实现的大型下拉菜单的示例代码纯CSS实现可折叠树状菜单

 @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); } } } } } 

 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 (
 this.onClickSectorMenuItem(i)} key={i} > {item} 
) }); } render() { const { sectorMenuVisible } = this.state; return ( 
 { sectorMenuVisible ? 'x' : '···' } 
 {this.getSectorJsx()} 
 ) } }