写一个动态创建的菜单组件

功能如下

• 根据功能传入的数据生成菜单的item和subitem

• 菜单有展开收起的功能

image.png

如图右上角的按钮就是操作菜单展开收起的功能按钮。

hideMenu = ()=>{
    let temp = this.state.hiddenMenu;
    this.setState({
        hiddenMenu:!temp
    })
}
<div className={this.state.hiddenMenu?
'mapleftnav mapleftnav-hidden':'mapleftnav'}>
    <div className={this.state.hiddenMenu?'left-side side-hidden':'left-side'}>
        <div className='map-title'><span>任务</span></div>
        <div className='left-menu'>
            <ul>
                {this.renderTree()}
            </ul>
        </div>
    </div>
   <i className={this.state.hiddenMenu?
   'icon font_family icon-s-back-default map-title-collspan-defalut':
   'icon font_family icon-s-up-default map-title-collspan-defalut'} 
   onClick={()=>this.hideMenu()}
/>
</div>

原理很简单，按钮通过设置组件的state状态来控制菜单的样式。如果state的hiddenMenu属性为true，就给组件添加hidden类样式，如果为false，就设置普通类样式。其实想记录一下这个组件的样式怎么写。

1.按钮的样式不必多说，使用绝对定位在菜单栏的右上方，菜单展开和收起时改变按钮的left值即可改变其位置。

.map-title-collspan-defalut{
    color:#e6e6e6;
    position: absolute;
    top: 0px;
    left: 186px;
    &.icon-s-back-default{
      left: -15px;
    }
  }

2.那么菜单容器的样式设置是重点，菜单容器展开时类名为mapleftnav，关闭时类名为mapleftnav-hidden。

<div className={this.state.hiddenMenu?
'mapleftnav mapleftnav-hidden':'mapleftnav'}>
    <div className={this.state.hiddenMenu?'left-side side-hidden':'left-side'}>
    <div>
</div>

3.菜单展开时宽度为200px，那么收起时设置width为0px，并设置transition过渡为0.2s，使其自然过渡。

.mapleftnav{
  width: 200px;
  height: 100%;
  float: left;
  position: relative;
  background-color: #F8F8F8;
  border-right: 1px solid #F8F8F8;
  transition: width .2s;
  -moz-transition: width .2s;
  -webkit-transition: width .2s;
  -o-transition: width .2s;
  &.mapleftnav-hidden{
    width:0px
  }
}

4.但是当关闭菜单时只是使菜单容器的宽度为0，其子元素包含的文本依然显示，这里要设置包含文本的元素的opacity，并且也可以给一个transition自然过渡。这里有个小诀窍，在关闭菜单时，菜单的width变化时间为0.2s，所以设置opacity从1变为0的时间快过0.2s，opacity从0变为1的时间慢过0.2s。

.left-side{
    .map-title{
      background-color: white;
      height: 60px;
      line-height: 60px;
      font-size: 16px;
      span{
        opacity: 1;
        margin-left: 60px;
        transition: opacity .25s;
        -moz-transition: opacity .25s;
        -webkit-transition: opacity .25s;
        -o-transition: opacity .25s;
      }
    }
    &.side-hidden{
      .map-title span{
        opacity: 0;
        transition: opacity .1s;
        -moz-transition: opacity .1s;
        -webkit-transition: opacity .1s;
        -o-transition: opacity .1s;
      }
    }
  }