简单的Material Design风格手机App菜单特效 ``` body.navOpen .nav-toggle { box-shadow: none;/*点开后取消阴影*/ } body.navOpen .do-nav-btn:before { width: 1200px; height: 1200px; background-color: rgba(74, 117, 230, 0.95);/*点开背景颜色*/ } .do-nav-btn { width: 60px; height: 60px; z-index: 2; border-radius: 50%; margin: 10px; position: absolute; cursor: pointer; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);/*阴影颜色*/ -webkit-transition-duration: 0.66s; transition-duration: 0.66s; -webkit-transition-timing-function: swing; transition-timing-function: swing; } .do-nav-btn:before { width: 60px; height: 60px; border-radius: 50%; background-color: #4A75E6;/*按钮颜色*/ content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transition-duration: 0.66s; transition-duration: 0.66s; -webkit-transition-timing-function: swing; transition-timing-function: swing; } .do-nav-m .do-nav-m-bar{padding: 0 120px;} .do-nav-m-bar { background-color: rgba(0, 0, 0, 0)!important; /*取消自带导航下拉背景颜色*/ } [do-phone-nav='do-drop-half'] .do-nav-m-bar{height: 100vh!important;} .do-nav-m .do-phoneNav-overlay{ background-color: rgba(0, 0, 0, 0)!important;/*取消下拉遮罩*/} [do-phone-nav='do-drop-half'] .do-nav-m-bar, [do-phone-nav='do-drop-full'] .do-nav-m-bar, [do-phone-nav='do-drop-half'] .do-phoneNav-overlay{z-index: 2;} .do-nav-m-ul > li > a, .do-nav-m-ul > li > ul { border-bottom-color: rgb(206, 206, 206,.5); /*线条颜色*/ } ```