50 lines
2.1 KiB
CSS
50 lines
2.1 KiB
CSS
@charset "utf-8";
|
|
/* 以下实际使用若已初始化可删除 .nav height父级需逐级设置为100%*/
|
|
|
|
/* 以上实际使用若已初始化可删除 */
|
|
|
|
/* nav */
|
|
.nav{width: 210px;height: 100%;background: #263238;transition: all .3s;text-transform: capitalize;}
|
|
.nav a{display: block;overflow: hidden;padding-left: 10px;line-height: 46px;color: #ABB1B7;transition: all .3s;word-wrap:break-word;text-align: left;margin-right:10px;}
|
|
.nav a span{margin-left: 30px;}
|
|
.nav-item{position: relative;}
|
|
.nav-item + .nav-item{
|
|
border-top: 2px solid #545454;
|
|
}
|
|
.nav-item.nav-show{border-bottom: none;}
|
|
.nav-item ul{display: none;background: #C4C4C4;}
|
|
.nav-item ul a{color:#111;}
|
|
.nav-item ul li + li {border-top: 1px solid #eee;}
|
|
.nav-item.nav-show ul{display: block;}
|
|
.nav-item>a:before{content: "";position: absolute;left: 0px;width: 5px;height: 46px;background: #A31C31;opacity:0;transition: all .3s;}
|
|
.nav .nav-icon{font-size: 20px;position: absolute;margin-left:-1px;}
|
|
/* 此处修改导航图标 可自定义iconfont 替换*/
|
|
.icon_1::after{content: "\e62b";}
|
|
.icon_2::after{content: "\e669";}
|
|
.icon_3::after{content: "\e61d";}
|
|
/*---------------------*/
|
|
.nav-more{float:right;margin-right: 10px;font-size: 12px;transition: transform .3s;}
|
|
/* 此处为导航右侧箭头 如果自定义iconfont 也需要替换*/
|
|
.nav-more::after{content: "\e621";}
|
|
/*---------------------*/
|
|
.nav-show .nav-more{transform:rotate(90deg);}
|
|
.nav-show,.nav-item>a:hover{color: #FFF;background:rgba(0,0,0,.1);}
|
|
.nav-show>a:before,.nav-item>a:hover:before{opacity:1;}
|
|
.nav-item li:hover a{color: #A81E32;background: rgba(0, 0, 0,.1);}
|
|
|
|
/* nav-mini */
|
|
.nav-mini.nav{width: 60px;}
|
|
.nav-mini.nav .nav-icon{/* margin-left:-2px; */}
|
|
.nav-mini.nav .nav-item>a span{display: none;}
|
|
.nav-mini.nav .nav-more{margin-right: -20px;}
|
|
.nav-mini.nav .nav-item ul{position: absolute;top:0px;left:60px;width: 180px;z-index: 99;background:#3C474C;overflow: hidden;}
|
|
.nav-mini.nav .nav-item:hover{background:rgba(255,255,255,.1);}
|
|
.nav-mini.nav .nav-item:hover .nav-item a{color:#FFF;}
|
|
.nav-mini.nav .nav-item:hover a:before{opacity:1;}
|
|
.nav-mini.nav .nav-item:hover ul{display: block;}
|
|
|
|
|
|
|
|
|
|
|