Question

我有这个基于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"
    }

<!-- language: lang-html -->

    <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>

<!-- end snippet -->

<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>

Answer 1

如果您希望它在默认情况下处于打开状态，只需选中该复选框，方法是为其提供checked属性：

Example Here

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

Css3面板默认保持打开状态

1 个答案: