CSS

【CSS】CSSから作られたサイドキックトグルメニューCSS Sidekick

December 7, 2016
CSS Sidekick

CSS SidekickはCSSから作られたサイドキックトグルメニュー。

CSS

  <link href="styles/normalize.css" rel="stylesheet">
  <link href="styles/base.css" rel="stylesheet">
  <link href="styles/sidekick.css" rel="stylesheet">

HTML

<body class="sidekick-demo">

  <!--
    Required markup
    Watch out, order matters!
    Especially: #sidekickToggle, .sidekick-toggle, .sidekick-panel
    -->
  <input type="checkbox" id="sidekickToggle">
  <label class="sidekick-toggle" for="sidekickToggle">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
      <g>
        <rect x="96" y="241" width="320" height="32" />
        <rect x="96" y="145" width="320" height="32" />
        <rect x="96" y="337" width="320" height="32" />
      </g>
    </svg>
    <span class="sr-only">Menu Toggle</span>
  </label>
  <!-- .sidekick-toggle -->
  <div class="sidekick">
    <nav class="sidekick-panel">
      <h1>Sidekick Menu</h1>
      <ul>
        <li><a href="#">Nav Item 1</a></li>
        <li><a href="#">Nav Item 2</a></li>
        <li><a href="#">Nav Item 3</a></li>
        <li><a href="#">Nav Item 4</a></li>
        <li><a href="#">Nav Item 1</a></li>
        <li><a href="#">Nav Item 2</a></li>
        <li><a href="#">Nav Item 3</a></li>
        <li><a href="#">Nav Item 4</a></li>
        <li><a href="#">Nav Item 1</a></li>
        <li><a href="#">Nav Item 2</a></li>
        <li><a href="#">Nav Item 3</a></li>
        <li><a href="#">Nav Item 4</a></li>
        <li><a href="#">Nav Item 1</a></li>
        <li><a href="#">Nav Item 2</a></li>
        <li><a href="#">Nav Item 3</a></li>
        <li><a href="#">Nav Item 4</a></li>
        <li><a href="#">Nav Item 1</a></li>
        <li><a href="#">Nav Item 2</a></li>
        <li><a href="#">Nav Item 3</a></li>
        <li><a href="#">Nav Item 4</a></li>
      </ul>
    </nav>
    <!-- .sidekick-panel -->
    <div class="sidekick-body">
      <!--
        Author's Page
        -->
      <h1>Sidekick Demo</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit nihil provident similique alias, ea omnis, rem nostrum quaerat corporis fugit recusandae beatae reprehenderit error reiciendis cum, dolore facilis! Non, dolores.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit nihil provident similique alias, ea omnis, rem nostrum quaerat corporis fugit recusandae beatae reprehenderit error reiciendis cum, dolore facilis! Non, dolores.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit nihil provident similique alias, ea omnis, rem nostrum quaerat corporis fugit recusandae beatae reprehenderit error reiciendis cum, dolore facilis! Non, dolores.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit nihil provident similique alias, ea omnis, rem nostrum quaerat corporis fugit recusandae beatae reprehenderit error reiciendis cum, dolore facilis! Non, dolores.</p>
      <hr>
      <h2>Documentation Will Go Here</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit nihil provident similique alias, ea omnis, rem nostrum quaerat corporis fugit recusandae beatae reprehenderit error reiciendis cum, dolore facilis! Non, dolores.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit nihil provident similique alias, ea omnis, rem nostrum quaerat corporis fugit recusandae beatae reprehenderit error reiciendis cum, dolore facilis! Non, dolores.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit nihil provident similique alias, ea omnis, rem nostrum quaerat corporis fugit recusandae beatae reprehenderit error reiciendis cum, dolore facilis! Non, dolores.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit nihil provident similique alias, ea omnis, rem nostrum quaerat corporis fugit recusandae beatae reprehenderit error reiciendis cum, dolore facilis! Non, dolores.</p>
      <hr>
      <h2>Documentation Will Go Here</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit nihil provident similique alias, ea omnis, rem nostrum quaerat corporis fugit recusandae beatae reprehenderit error reiciendis cum, dolore facilis! Non, dolores.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit nihil provident similique alias, ea omnis, rem nostrum quaerat corporis fugit recusandae beatae reprehenderit error reiciendis cum, dolore facilis! Non, dolores.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit nihil provident similique alias, ea omnis, rem nostrum quaerat corporis fugit recusandae beatae reprehenderit error reiciendis cum, dolore facilis! Non, dolores.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit nihil provident similique alias, ea omnis, rem nostrum quaerat corporis fugit recusandae beatae reprehenderit error reiciendis cum, dolore facilis! Non, dolores.</p>
    </div>
  </div>
  <!-- .sidekick -->
</body>