UX给出这个要求,就是dc下有多个云环境,要求dc是下拉菜单,云环境在右边显示,拿到需求还有点蒙,同事说很像京东页面啊,搜了下,有人实现过,照着改了改
大概就是先写个下拉菜单,然后右边的部分先隐藏,等hover左边的li的时候,显示右边部分,用例很多绝对定位~还好之前多看了看张鑫旭老师的课~~
css部分
<style>
.nav_item{
/*width:300px;*/
/*text-align: center;*/
font-size: 12px;
height:30px;
line-height: 30px;
padding-right: 10px;
padding-left: 10px;
border-bottom: 1px solid #ccc;
}
.sub_menu{
display: none;
overflow-y: auto;
background: white;
height: 300px;
width: 270px;
position: absolute;
left: 152px;
top: -1px;
border: 1px solid #ccc;
}
.span_test{
display: none;
position: absolute;
right: 2px;
background-color: white;
height: 29px;
z-index: 20;
width: 10px;
}
.nav_item_color{
color: #000000;
}
ul li:hover .sub_menu{display:block}
ul li:hover .nav_item{
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
ul li:hover .span_test{display:inline-block}
ul li:hover .nav_item_color{color: #1898eb}
.Evnlist{
/*min-height: 300px;*/
list-style: none;
font-size: 12px;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.subMenuList {
padding-left: 5px;
}
.dropdown-menu-dc {
min-height: 300px;
position: absolute;
top: 100%;
left: 0;
float: left;
min-width: 160px;
padding: 0px 0px;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
box-shadow: none;
border-radius: 0px;
border: 1px solid rgba(0,0,0,.15);
}
.chooseInput{
width:270px;
padding: 5px;
height:30px;
border:1px solid #ddd;
}
.title{
margin-top: -20px;
margin-left: 6px;
position: absolute;
}
</style>
代码部分
<div class="form-group">
<label class="form-group-left">请选择云环境</label>
<div class="btn-group">
<input id="EnvTitle" [(ngModel)]="title" [ngModelOptions]="{standalone:true}" class="chooseInput" readonly="readonly" data-toggle="dropdown" id="dropdownMenu1" placeholder="请选择云环境" >
<ul class="dropdown-menu dropdown-menu-top dropdown-menu-dc" role="menu" aria-labelledby="dropdownMenu1">
<li class="nav_item" *ngFor="let item of dcs" role="presentation">
<div>
<span class="nav_item_color">{{item.name}}</span>
<span class="span_test"></span>
</div>
<div class="sub_menu">
<ul class="Evnlist">
<li class="subMenuList" *ngFor="let Evn of item.cloudEnvs" (click)="RefreshAlarmConfig(Evn,item)">{{Evn.name}}
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>