CSS实现自适应菜单

最新推荐文章于 2021-06-11 12:26:31 发布

wangweiren_get

最新推荐文章于 2021-06-11 12:26:31 发布

阅读量1.6k

点赞数 1

分类专栏：前端 js javascript 文章标签： react js 菜单 css 滚动条

本文链接：https://blog.csdn.net/wangweiren_get/article/details/85330919

版权

这篇博客展示了如何利用CSS和React实现一个自适应菜单。作者首先展示了一个菜单的效果图，接着详细介绍了菜单所需的数据结构，并提供了React实现菜单的JS代码。在CSS部分，作者探讨了样式设计，包括一个具有边框的创新滚动条设计。文章以简洁的总结收尾，强调了滚动条设计的特殊之处。

摘要由CSDN通过智能技术生成

先看效果图

效果图

菜单需要的数据结构

[{
   
    name: 'xxx0',
    children: [
      {
   
        name: "xxx01"
      }
    ],
  }, {
   
    name: 'xxx1',
    children: [],
}]

实现代码js(react)

import React from 'react'
import PropTypes from 'prop-types'

import styles from "./MenuNow.less"

class Menu extends React.Component {
   

  static propTypes = {
   
    navOpenKeys: PropTypes.array,
    changeOpenKeys: PropTypes.func,
    location: PropTypes.object,
    menu: PropTypes.array.isRequired
  }

  render() {
   
    const {
   
      menu: data = [],
      location = {
   },
      navOpenKeys = () => {
   },
      changeOpenKeys = () => {
   },
    } = this.props;
      // 递归生成菜单
      const getItems = (data) => {
   
        if(!data.length) {
   
          return <div className="menu-list">
            <a style={
   {
    color