CSSUI スライドアウト サンプル

HTMLとCSSのみで作成。JavaScriptは未使用。

<link rel="stylesheet" href="cssui/cssui.css">
<link rel="stylesheet" href="cssui/slideout/slideout.css">
<style>
[data-slideout-panel] {
  --slideout-animation: left .5s ease-in-out;
}
@media only screen and (max-width: 767px) {
  [data-slideout-panel] {
    --slideout-size: 66vw;
  }
}
</style>

<a href="#slideout" data-slideout-toggle>スライドアウトを表示</a>
<div id="slideout" data-slideout-panel>
  <div data-slideout-header>
    <h3>スライドアウト</h3>
    <a href="#" data-slideout-close>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
    </a>
  </div>
  <p>画面外の左から右に表示されるのがスライドアウト。</p>
</div>

元記事を表示する