基於CSS3的面板

我有這個基於CSS3的滑出面板。我怎樣才能讓這個幻燈片垂直而不是？非常感謝你的幫助。基於CSS3的面板

* { 
 
    margin:0; 
 
    padding:0; 
 
    font-family:"Helvetica Neue", Helvetica, Sans-serif; 
 
    word-spacing:-2px; 
 
} 
 

 
h1 { 
 
    font-size:40px; 
 
    font-weight:bold; 
 
    color:#191919; 
 
    -webkit-font-smoothing: antialiased; 
 
} 
 

 
h2 { 
 
    font-weight:normal; 
 
    font-size:20px; 
 
    color:#888; 
 
    padding:5px 0; 
 
} 
 

 
.message { 
 
    background:#181818; 
 
    color:#FFF; 
 
    position: absolute; 
 
    top: -250px; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 250px; 
 
    padding: 20px; 
 
    transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); 
 
    overflow: hidden; 
 
    box-sizing: border-box; 
 
} 
 

 
.message h1 { 
 
    color:#FFF; 
 
} 
 

 
#toggle { 
 
    position:absolute; 
 
    appearance:none; 
 
    cursor:pointer; 
 
    left:-100%; 
 
    top:-100%; 
 
} 
 

 
#toggle + label { 
 
    position:absolute; 
 
    cursor:pointer; 
 
    padding:10px; 
 
    background: #26ae90; 
 
    width: 100px; 
 
    border-radius: 3px; 
 
    padding: 8px 10px; 
 
    color: #FFF; 
 
    line-height:20px; 
 
    font-size:12px; 
 
    text-align:center; 
 
    -webkit-font-smoothing: antialiased; 
 
    cursor: pointer; 
 
    margin:20px 50px; 
 
    transition:all 500ms ease; 
 
} 
 

 
#toggle + label:after { 
 
    content:"Open" 
 
} 
 

 
.container { 
 
    transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); 
 
    padding:5em 3em; 
 
} 
 

 
#toggle:checked ~ .message { 
 
    top: 0; 
 
} 
 

 
#toggle:checked ~ .container { 
 
    margin-top: 250px; 
 
} 
 

 
#toggle:checked + label { 
 
    background:#dd6149; 
 
} 
 

 
#toggle:checked + label:after { 
 
    content:"Close" 
 
}

<input type="checkbox" name="toggle" id="toggle"/> 
 
<label for="toggle"></label> 
 

 
<div class="container"> 
 
    <h1>Pure CSS3 Slide Down Toggle Demo</h1> 
 
    <h2>Click the Open button to see content</h2> 
 
</div> 
 

 
<div class="message"> 
 
    <h1>Hidden message here</h1> 
 
    <h2>CSS3 slide out menu</h2> 
 
</div>

來源

2015-04-05 user244394

你的意思是_horizontally_？面板已經垂直滑出。 – Xufox 2015-04-05 20:27:12

所以，我轉向一些top和left值周圍，確信與內容的其餘部分改變了按鈕的位置等，最終我得到這個代碼：

* { 
 
    margin:0; 
 
    padding:0; 
 
    font-family:"Helvetica Neue", Helvetica, Sans-serif; 
 
    word-spacing:-2px; 
 
} 
 

 
h1 { 
 
    font-size:40px; 
 
    font-weight:bold; 
 
    color:#191919; 
 
    -webkit-font-smoothing: antialiased; 
 
} 
 

 
h2 { 
 
    font-weight:normal; 
 
    font-size:20px; 
 
    color:#888; 
 
    padding:5px 0; 
 
} 
 

 
.message { 
 
    background:#181818; 
 
    color:#FFF; 
 
    position: absolute; 
 
    top: 0; 
 
    left: -250px; 
 
    width: 250px; 
 
    height: 100%; 
 
    padding: 20px; 
 
    transition: left 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); 
 
    overflow: hidden; 
 
    box-sizing: border-box; 
 
} 
 

 
.message h1 { 
 
    color:#FFF; 
 
} 
 

 
#toggle { 
 
    position:absolute; 
 
    appearance:none; 
 
    cursor:pointer; 
 
    left:-100%; 
 
    top:-100%; 
 
    margin-left:0; 
 
    transition:margin-left 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); 
 
} 
 

 
#toggle + label { 
 
    position:absolute; 
 
    cursor:pointer; 
 
    padding:10px; 
 
    background: #26ae90; 
 
    width: 100px; 
 
    border-radius: 3px; 
 
    padding: 8px 10px; 
 
    color: #FFF; 
 
    line-height:20px; 
 
    font-size:12px; 
 
    text-align:center; 
 
    -webkit-font-smoothing: antialiased; 
 
    cursor: pointer; 
 
    margin:20px 0 20px 50px; 
 
    transition:background 500ms ease, margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); 
 
} 
 

 
#toggle + label:after { 
 
    content:"Open" 
 
} 
 

 
.container { 
 
    transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); 
 
    padding:5em 3em; 
 
} 
 

 
#toggle:checked { 
 
    margin-left: 250px; 
 
} 
 

 
#toggle:checked ~ .message { 
 
    left: 0; 
 
} 
 

 
#toggle:checked ~ .container { 
 
    margin-left: 250px; 
 
} 
 

 
#toggle:checked + label { 
 
    margin:20px 0 20px 300px; 
 
    background:#dd6149; 
 
} 
 

 
#toggle:checked + label:after { 
 
    content:"Close"; 
 
}

<input type="checkbox" name="toggle" id="toggle"/> 
 
<label for="toggle"></label> 
 

 
<div class="container"> 
 
    <h1>Pure CSS3 Slide Down Toggle Demo</h1> 
 
    <h2>Click the Open button to see content</h2> 
 
</div> 
 

 
<div class="message"> 
 
    <h1>Hidden message here</h1> 
 
    <h2>CSS3 slide out menu</h2> 
 
</div>

來源

2015-04-05 20:50:06 Xufox

基於CSS3的面板

回答

相關問題