首页 > 程序开发 > web前端 > HTML/CSS >

按钮点击展开菜单列表

2016-12-28

按钮点击展开菜单列表。首先我们定义一个button按钮和一个菜单列表,我们把他们封装到一个块级元素中,并指定position属性,其次我们对button定义一个选择器。

首先我们定义一个button按钮和一个菜单列表,我们把他们封装到一个块级元素中,并指定position属性,其次我们对button定义一个选择器,来设置其样式:

<html>
 <head></head>
 <body>
  <div style="position: relative;"> 
   <button class="button-menu" (click)="showButtonList()" (blur)="hiddenList()">button</button> 
   <ul *ngif="_showbuttonlist"> 
    <li><a href="">aaa</a> </li> 
    <li><a href="">bbb</a> </li> 
    <li><a href="">ccc</a> </li> 
   </ul> 
  </div>
 </body>
</html>

在button里面我们添加click事件和失去焦点事件,让控制菜单的show和隐藏

然后我们定义监听事件要做的事情:

showButtonList(){
      this._showbuttonlist = this._showbuttonlist?false:true;
  }
hiddenList(){
      this._showbuttonlist = false;
  }

最后我们只要设置一下样式就可以:

第一我们设置一下按钮的属性

.button-menu {
width: 100px;
height: 36px;
background-color: white;
color: red;
border-radius: 4px;
border: 1px solid blue;
position: absolute;
}

第二我们设置一下列表的按钮属性

.button-menu + ul li {
width: 100px;
height: 36px;
background-color: white;
color: red;
border-radius: 4px;
border: 1px solid blue;
z-index: 1000;
list-style: none;
}

第三我们设置一下列表的属性

.list-menu {
margin-top: 36px;
position: absolute;
}

.button-menu + ul li a {
text-decoration: none;
}
相关文章
最新文章
热点推荐