yu.css.ui/dist/component/menu.css

纯CSS通用UI模块和组件

.yu-menu{width:200px;font-size:0}.yu-menu .sub-menu{transition:height .4s ease;line-height:40px}.yu-menu .sub-menu i{padding:0 8px}.yu-menu .sub-menu .menu-title{font-size:14px;cursor:pointer;transition:color .4s ease;height:40px}.yu-menu .sub-menu .menu-title i.icon-angle-down{float:right;transition:all .4s ease}.yu-menu .sub-menu .menu-title i.icon-angle-right{float:right}.yu-menu .sub-menu .menu-title.active i.icon-angle-down{transform:rotate(-180deg)}.yu-menu .sub-menu .menu-item{font-size:14px;cursor:pointer;transition:color .4s ease;height:40px}.yu-menu.dark{color:#ccc;background-color:#001528}.yu-menu.dark .sub-menu .menu-item:hover,.yu-menu.dark .sub-menu .menu-title:hover{color:#fff}.yu-menu.dark .sub-menu .menu-item.active{background-color:#409eff;color:#fff}.yu-menu.light{border-right:1px solid #e4e7ed}.yu-menu.light .sub-menu{background-color:#fff}.yu-menu.light .sub-menu .menu-item:hover,.yu-menu.light .sub-menu .menu-title:hover{color:#409eff}.yu-menu.light .sub-menu .menu-item.active{background-color:#e8f3ff;color:#409eff;border-right:3px solid #409eff}.yu-menu.popup .transition{transform:scaleY(0);opacity:0;transform-origin:center top;transition:transform .3s ease,opacity .3s ease}.yu-menu.popup .transition.transition-enter{transform:scaleY(1);opacity:1}.yu-menu.popup .transition.transition-leave{transform:scaleY(0);opacity:0}.yu-menu.popup>.sub-menu{position:relative}.yu-menu.popup>.sub-menu .menu-title+.sub-menu{box-shadow:0 2px 12px 0 rgba(0,0,0,.1);margin-left:8px;position:absolute;top:0;left:100%}.yu-menu.popup>.sub-menu .sub-menu{min-width:120px;position:absolute;z-index:1;border-radius:4px}.yu-menu.popup>.sub-menu .sub-menu+.menu-item{margin-top:40px}.yu-menu.popup>.sub-menu .sub-menu .menu-item{word-break:keep-all;width:auto;border-right:none;padding-right:14px}.yu-menu.horizontal{width:100%;display:flex;border-right:none;border-bottom:1px solid #e4e7ed}.yu-menu.horizontal>.sub-menu>.menu-title{padding:0 14px;transition:color .4s ease}.yu-menu.horizontal>.sub-menu>.menu-title.active{border-bottom:2px solid #409eff;color:#409eff}.yu-menu.horizontal.popup>.sub-menu>.menu-title+.sub-menu{margin-left:0;margin-top:8px}.yu-menu.horizontal.popup>.sub-menu>.sub-menu{margin-left:0;position:absolute;top:100%;left:0}