點擊打開菜單寬度100％

我正在嘗試點擊打開菜單。菜單運行良好，但我想使它width:100%（現在的菜單max-width:160px;）。我怎樣才能打開菜單width:100%;？點擊打開菜單寬度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); 
}

來源

2015-05-25 innovation

所以你想要用三個圓圈打開的菜單佔據整個頁面的寬度是？ – blairmeister

@blairmeister是的，我想使它像 – innovation

您只需讓寬度爲100％。它將採用100％的頁面寬度。

工作DEMO。

下面是你的代碼改變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); 
}

編輯：與.DD有25％的寬度。這是DEMO。

來源

2015-05-25 14:07:59

感謝您的回答，它運作良好。但我可以問你，如果我可以改變'.dd {width：25％;}'我可以在那個時候爲'.dd-menu {width：100％;}'做些什麼？ – innovation

無論寬度爲25％還是100％，它都會跨越.dd的100％。我的意思是如果你給.dd 25％的寬度。然後.dd菜單仍然會覆蓋它的全部寬度。檢查我已更新的新筆。 –

我明白你的意見和答案。但是我的英語很抱歉。我的問題是例如請點擊[THIS DEMO]（http://codepen.io/shadowman86/pen/OVbNEK）並更改您的瀏覽器寬度最小大小，然後單擊菜單按鈕，然後查看這裏出現了什麼問題。 – innovation

你可以做到這一點與

.dd-menu { 
    width: 100%; 
    right: 0; 
}

來源

2015-05-25 14:02:50 Rudi

點擊打開菜單寬度100％

回答

相關問題