点击打开菜单宽度100%

Click open menu width 100%

本文关键字：100% 打开菜单      更新时间：2023-09-26

我正在尝试单击打开菜单。菜单工作得很好，但我想使它成为width:100% (现在菜单 max-width:160px;)。如何打开菜单width:100%; ?

这是我的工作DEMO。

HTML 

<div class="dd">
<a href="#" class="drop">
 <svg class="icon" enable-background="new 0 0 24 24" id="Layer_1" version="1.0" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="12" cy="12" r="2"></circle><circle cx="12" cy="5" r="2"></circle><circle cx="12" cy="19" r="2"></circle>
  </svg>
 </a>
  <div class="dd-menu">
    <ul>
      <li>Profile & status</li>
       <li>Notification</li>
       <li>Help</li>
       <li>Log out</li>
    </ul>
  </div>
</div>
CSS 

    body {
  margin:0;
  font-family:Arial;
  background:#ececec;
}
.drop {
  float:right;
}
.dd {
position:relative;
background:#404BB3;
  padding:20px;
  width:25%;
  box-sizing:border-box;
  color:#FFF;
  box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
  height:68px;
}
h1 {
  margin:0;
  padding:0;
  float:left;
  font-size:26px;
}
small {
 font-size:14px;
  color:#666;
  font-weight:normal;
}
svg {
  height:24px;
  width:24px;
}
svg circle {
 fill:#FFF; 
}
.dd-menu {
position: absolute;
  top: 70%;
  right:0;    /*changed here*/
  width:100%;  /*changed here*/
  z-index: 1000;
  font-size: 14px;
  text-align: left;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.175);
  background-clip: padding-box;
  -webkit-transition: all 0.2s ease;
  opacity:0;
  -webkit-transform-origin: right top 0px; 
  -webkit-transform: scale(0); 
}
.dd-menu ul {
   min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
  position:relative;
}
.dd-menu.active {
  opacity:1;
  -webkit-transform-origin: right top 0px; 
  -webkit-transform: scale(1); 
}
.dd-menu li {
  color:#666;
margin: 0;
padding: 5px 0 5px 15px;
height: 24px;
list-style: none;
  opacity: 0; 
  transform: translateY(0px);
}
.dd-menu li {
  -webkit-transition: all 0.3s ease;
  transform: translateY(-30%);
}
.dd-menu.active li {
  opacity: 1; 
  transform: translateY(0px);
}

你只需要给宽度为100%。它将占用100%的页面宽度。

工作演示。

下面是修改后的CSS:

.dd-menu {
  position: absolute;
  top: 70%;
  right:0;    /*changed here*/
  width:100%;  /*changed here*/
  z-index: 1000;
  font-size: 14px;
  text-align: left;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.175);
  background-clip: padding-box;
  -webkit-transition: all 0.2s ease;
  opacity:0;
  -webkit-transform-origin: right top 0px; 
  -webkit-transform: scale(0); 
}

EDIT:与。dd有25%的宽度。这是DEMO

可以使用

.dd-menu {
    width: 100%;
    right: 0;
}
相关文章：