二级浮动菜单（angularjs2 + css）

来源：互联网发布：期货套利分析软件编辑：程序博客网时间：2024/05/17 09:22

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>

0 0