CSS
【CSS】CSSから作られたサイドキックトグルメニューCSS Sidekick
December 7, 2016
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>
