Drawer Menu

Ready

HTML
View
Context
Assets
Info
Notes


        
        <header class="drawer-header">
    <h1 class="drawer-header-logo">Drawer Menu</h1>
    <button type="button" class="drawer-header-btn js-open-drawer" aria-controls="drawer" aria-expanded="false" aria-label="メニューを開く">
        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="list" class="svg-inline--fa fa-list fa-w-16" role="img" viewBox="0 0 512 512" width="1.6rem" height="1.6rem">
            <path fill="currentColor" d="M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z" />
        </svg>
    </button>
    <div class="drawer-header-menu">menu</div>
</header>
<div id="drawer" class="drawer js-drawer" aria-expanded="false">
    <div class="drawer-backdrop js-backdrop"></div>
    <nav class="drawer-nav">
        <button type="button" class="drawer-nav-button js-close-drawer" aria-controls="drawer" aria-expanded="false" aria-label="メニューを閉じる"><span>×</span></button>
        <ul class="drawer-nav-list">
            <li class="drawer-nav-item">
                <a href="#" class="drawer-nav-link">- Drawer Nav Item1</a>
            </li>
            <li class="drawer-nav-item">
                <a href="#" class="drawer-nav-link">- Drawer Nav Item2</a>
            </li>
            <li class="drawer-nav-item">
                <a href="#" class="drawer-nav-link">- Drawer Nav Item3</a>
            </li>
            <li class="drawer-nav-item">
                <a href="#" class="drawer-nav-link">- Drawer Nav Item4</a>
            </li>
            <li class="drawer-nav-item">
                <a href="#" class="drawer-nav-link">- Drawer Nav Item5</a>
            </li>
            <li class="drawer-nav-item">
                <a href="#" class="drawer-nav-link">- Drawer Nav Item6</a>
            </li>
            <li class="drawer-nav-item">
                <a href="#" class="drawer-nav-link">- Drawer Nav Item7</a>
            </li>
            <li class="drawer-nav-item">
                <a href="#" class="drawer-nav-link">- Drawer Nav Item8</a>
            </li>
            <li class="drawer-nav-item">
                <a href="#" class="drawer-nav-link">- Drawer Nav Item9</a>
            </li>
            <li class="drawer-nav-item">
                <a href="#" class="drawer-nav-link">- Drawer Nav Item10</a>
            </li>
        </ul>
    </nav>
</div>
<main class="drawer-main main-wrapper">
    <section class="drawer-content">
        <h2 class="drawer-content-title">第1章 Lorem Ipsum</h2>
        <h3>第1節</h3>
        <p class="drawer-content-text">
            Integer fermentum leo nec elit hendrerit, et rhoncus ligula suscipit. Nulla tincidunt blandit dolor nec scelerisque. Suspendisse vulputate consequat elit, finibus auctor dui venenatis et. Ut feugiat nibh mauris, ac dapibus ante semper eu. Sed ornare, massa nec euismod bibendum, leo mi semper sapien, vel rhoncus mi sem finibus dui. Etiam diam elit, commodo et sapien eget, pretium tincidunt orci.
        </p>
        <ul class="drawer-content-list LinkList">
            <li>
                <a href="#" class="LinkList-link">Lorem ipsum</a>
            </li>
            <li>
                <a href="#" class="LinkList-link">dolor sit amet</a>
            </li>
            <li>
                <a href="#" class="LinkList-link">consectetur adipiscing elit</a>
            </li>
        </ul>
        <h3>第2節</h3>
        <p class="drawer-content-text">
            Maecenas eu felis diam. Duis pharetra luctus ante, pretium rutrum risus interdum non. Curabitur lobortis volutpat tortor ut commodo. Praesent vel dapibus turpis, eu sagittis diam. Praesent tristique justo vitae diam tristique, ac ultricies erat commodo. Quisque tincidunt laoreet ante nec semper. Proin convallis interdum tellus. Morbi eleifend et tellus mollis aliquet. Pellentesque ultrices sem quis odio aliquam accumsan. Phasellus facilisis tempor sem, et sagittis tortor molestie id.
        </p>
    </section>
    <div class="divider my32" role="separator"></div>
    <section class="drawer-content">
        <h2 class="drawer-content-title">第2章(終章) Почему он используется?</h2>
        <h3>第1節</h3>
        <p class="drawer-content-text">
            Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые модификации, например, юмористические вставки или слова, которые даже отдалённо не напоминают латынь.
        </p>
        <h3>第2節</h3>
        <p class="drawer-content-text">
            Если вам нужен Lorem Ipsum для серьёзного проекта, вы наверняка не хотите какой-нибудь шутки, скрытой в середине абзаца.
        </p>
        <h3>第3節</h3>
        <p class="drawer-content-text">
            Также все другие известные генераторы Lorem Ipsum используют один и тот же текст, который они просто повторяют, пока не достигнут нужный объём.
        </p>
        <h3>第4節</h3>
        <p class="drawer-content-text">
            Это делает предлагаемый здесь генератор единственным настоящим Lorem Ipsum генератором. Он использует словарь из более чем 200 латинских слов, а также набор моделей предложений.
        </p>
        <p class="drawer-content-text">
            Конец.
        </p>
    </section>
</main>
<footer class="drawer-footer">
    <p class="drawer-footer-text">@ 2021 footer</p>
</footer>


        <header class="drawer-header">
  <h1 class="drawer-header-logo">Drawer Menu</h1>
  <button type="button" class="drawer-header-btn js-open-drawer" aria-controls="drawer" aria-expanded="false" aria-label="メニューを開く">
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="list" class="svg-inline--fa fa-list fa-w-16" role="img" viewBox="0 0 512 512" width="1.6rem" height="1.6rem"><path fill="currentColor" d="M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"/></svg>
  </button>
  <div class="drawer-header-menu">menu</div>
</header>
<div id="drawer" class="drawer js-drawer" aria-expanded="false">
  <div class="drawer-backdrop js-backdrop"></div>
  <nav class="drawer-nav">
    <button type="button" class="drawer-nav-button js-close-drawer" aria-controls="drawer" aria-expanded="false" aria-label="メニューを閉じる"><span>×</span></button>
    <ul class="drawer-nav-list">
      <li class="drawer-nav-item">
        <a href="#" class="drawer-nav-link">- Drawer Nav Item1</a>
      </li>
      <li class="drawer-nav-item">
        <a href="#" class="drawer-nav-link">- Drawer Nav Item2</a>
      </li>
      <li class="drawer-nav-item">
        <a href="#" class="drawer-nav-link">- Drawer Nav Item3</a>
      </li>
      <li class="drawer-nav-item">
        <a href="#" class="drawer-nav-link">- Drawer Nav Item4</a>
      </li>
      <li class="drawer-nav-item">
        <a href="#" class="drawer-nav-link">- Drawer Nav Item5</a>
      </li>
      <li class="drawer-nav-item">
        <a href="#" class="drawer-nav-link">- Drawer Nav Item6</a>
      </li>
      <li class="drawer-nav-item">
        <a href="#" class="drawer-nav-link">- Drawer Nav Item7</a>
      </li>
      <li class="drawer-nav-item">
        <a href="#" class="drawer-nav-link">- Drawer Nav Item8</a>
      </li>
      <li class="drawer-nav-item">
        <a href="#" class="drawer-nav-link">- Drawer Nav Item9</a>
      </li>
      <li class="drawer-nav-item">
        <a href="#" class="drawer-nav-link">- Drawer Nav Item10</a>
      </li>
    </ul>
  </nav>
</div>
<main class="drawer-main main-wrapper">
  <section class="drawer-content">
    <h2 class="drawer-content-title">第1章 Lorem Ipsum</h2>
    <h3>第1節</h3>
    <p class="drawer-content-text">
      Integer fermentum leo nec elit hendrerit, et rhoncus ligula suscipit. Nulla tincidunt blandit dolor nec scelerisque. Suspendisse vulputate consequat elit, finibus auctor dui venenatis et. Ut feugiat nibh mauris, ac dapibus ante semper eu. Sed ornare, massa nec euismod bibendum, leo mi semper sapien, vel rhoncus mi sem finibus dui. Etiam diam elit, commodo et sapien eget, pretium tincidunt orci.
    </p>
    <ul class="drawer-content-list LinkList">
      <li>
        <a href="#" class="LinkList-link">Lorem ipsum</a>
      </li>
      <li>
        <a href="#" class="LinkList-link">dolor sit amet</a>
      </li>
      <li>
        <a href="#" class="LinkList-link">consectetur adipiscing elit</a>
      </li>
    </ul>
    <h3>第2節</h3>
    <p class="drawer-content-text">
      Maecenas eu felis diam. Duis pharetra luctus ante, pretium rutrum risus interdum non. Curabitur lobortis volutpat tortor ut commodo. Praesent vel dapibus turpis, eu sagittis diam. Praesent tristique justo vitae diam tristique, ac ultricies erat commodo. Quisque tincidunt laoreet ante nec semper. Proin convallis interdum tellus. Morbi eleifend et tellus mollis aliquet. Pellentesque ultrices sem quis odio aliquam accumsan. Phasellus facilisis tempor sem, et sagittis tortor molestie id.
    </p>
  </section>
  <div class="divider my32" role="separator"></div>
  <section class="drawer-content">
    <h2 class="drawer-content-title">第2章(終章) Почему он используется?</h2>
    <h3>第1節</h3>
    <p class="drawer-content-text">
      Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые модификации, например, юмористические вставки или слова, которые даже отдалённо не напоминают латынь.
    </p>
    <h3>第2節</h3>
    <p class="drawer-content-text">
      Если вам нужен Lorem Ipsum для серьёзного проекта, вы наверняка не хотите какой-нибудь шутки, скрытой в середине абзаца.
    </p>
    <h3>第3節</h3>
    <p class="drawer-content-text">
      Также все другие известные генераторы Lorem Ipsum используют один и тот же текст, который они просто повторяют, пока не достигнут нужный объём.
    </p>
    <h3>第4節</h3>
    <p class="drawer-content-text">
      Это делает предлагаемый здесь генератор единственным настоящим Lorem Ipsum генератором. Он использует словарь из более чем 200 латинских слов, а также набор моделей предложений.
    </p>
    <p class="drawer-content-text">
      Конец.
    </p>
  </section>
</main>
<footer class="drawer-footer">
  <p class="drawer-footer-text">@ 2021 footer</p>
</footer>


        
            
            /* No context defined. */

File:

Content:


                                /* 暫定コード */
/* /js/modules/DrawerMenu.js */

export function drawerMenu() {
  const openButton = document.querySelector('.js-open-drawer');
  const drawer = document.querySelector('.js-drawer');
  const closeButton = drawer.querySelector('.js-close-drawer');
  const backdrop = drawer.querySelector('.js-backdrop');
  let drawerOpen = false;

  function changeAriaExpanded(state) {
    const value = state ? 'true' : 'false';
    drawer.setAttribute('aria-expanded', value);
    openButton.setAttribute('aria-expanded', value);
    closeButton.setAttribute('aria-expanded', value);
  }

  function changeState(state) {
    if (state === drawerOpen) {
      return;
    }
    changeAriaExpanded(state);
    drawerOpen = state;
  }

  function openDrawer() {
    changeState(true);
    fixBackdrop();
  }

  function closeDrawer() {
    changeState(false);
    unfixBackdrop();
  }

  function fixBackdrop() {
    const body = document.body;
    const scrollY = document.documentElement.style.getPropertyValue('--scroll-y');
    body.style.position = 'fixed';
    body.style.top = `-${scrollY}`;
    body.style.width = '100%';
    body.style.overflow = 'hidden';
  }

  function unfixBackdrop() {
    const body = document.body;
    const scrollY = body.style.top;
    body.style.position = '';
    body.style.top = '';
    body.style.width = '';
    body.style.overflow = '';
    window.scrollTo(0, parseInt(scrollY || '0') * -1);
  }

  function onClickOpenButton() {
    openDrawer();
  }

  function onClickCloseButton() {
    closeDrawer();
  }

  openButton.addEventListener('click', onClickOpenButton, false);
  closeButton.addEventListener('click', onClickCloseButton, false);
  backdrop.addEventListener('click', onClickCloseButton, false);
  window.addEventListener('scroll', () => {
    document.documentElement.style.setProperty('--scroll-y', `${window.scrollY}px`);
  });
}

/* /js/main.js */

import { drawerMenu } from './modules/DrawerMenu.js';

const openButton = document.querySelector('.js-open-drawer') ? drawerMenu() : false;

URL: /components/raw/drawer-menu/index.js
Filesystem Path: src/components/5-effect/drawer-menu/index.js
Size: 2.1 KB

Content:


                                .drawer-header {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e6e6e6;
  box-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}

.drawer-header-logo {
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
  line-height: 1;
  font-size: 24px;
}

.drawer-header-menu {
  position: fixed;
  top: 4px;
  right: 12px;
  font-size: .9rem;
}

.drawer-header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
  width: 60px;
  height: 60px;
  border: 1px solid #333;
}

.drawer-header-btn svg {
  position: absolute;
  top: 24px;
}

.drawer-header-button:hover::before {
  opacity: 1;
}

.drawer-nav {
  background-color: #333;
}

.drawer-nav-button {
  position: absolute;
  right: 0;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 1px solid #fff;
  background-color: transparent;
  font-size: 3rem;
  color: #fff;
  box-sizing: border-box;
}
.drawer-nav-button > span {
  display: inline-block;
  height: 60px;
  transition: transform .3s linear;
}
.drawer-nav-button:hover span {
  animation: rotate-anime .3s linear;
}

@keyframes rotate-anime {
  0% {
    margin-top: -1px;
    transform: rotate(0);
  }
  100% {
    margin-top: 2px;
    transform: rotate(180deg);
  }
}
.drawer-nav-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition-duration: .1s;
  transition-property: opacity;
  transition-timing-function: linear;
}

.drawer-nav-button:hover::before {
  opacity: 1;
}

.drawer-nav-list {
  list-style-type: none;
  margin-top: 60px;
  margin-bottom: 0;
  padding-left: 0;
}

.drawer-nav-item {
  border-color: rgba(0, 0, 0, .2);
  border-style: solid;
  border-width: 0 0 1px;
}

.drawer-nav-item:first-child {
  border-top-width: 1px;
}

.drawer-nav-link {
  display: block;
  position: relative;
  padding: 1.5rem;
  text-decoration: none;
  line-height: 1.2;
  color: ivory;
}

.drawer-nav-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .2);
  opacity: 0;
  transition-duration: .1s;
  transition-property: opacity;
  transition-timing-function: linear;
}

.drawer-nav-link:hover::before {
  opacity: 1;
}

.drawer-main.main-wrapper {
  margin-top: 6rem;
  margin-right: auto;
  margin-left: auto;
  padding-top: 0;
  padding-bottom: 0;
}

.drawer-content-title {
  margin-block-start: .83rem;
  margin-block-end: .83rem;
  font-size: 1.5rem;
  font-weight: bold;
}
.content:not(:first-of-type) .drawer-content-title {
  margin-block-start: 2rem;
}

.drawer-content-list {
  list-style-type: disc;
  margin-block-start: 1rem;
  margin-block-end: 1rem;
  padding-inline-start: 40px;
}

.drawer-content-text {
  margin-block-start: 1rem;
  margin-block-end: 1rem;
}

.drawer-main h3 {
  margin-block-start: 1rem;
  margin-block-end: 1rem;
  font-size: 1.17rem;
  font-weight: bold;
}
.drawer-main h4 {
  font-weight: bold;
}

.drawer-footer {
  margin-top: 3rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: darkgray;
}

.drawer-footer-text {
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
  color: white;
}

.drawer-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
}

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.drawer-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: hsla(0, 0%, 0%, .5);
}

.drawer-nav {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
}

.drawer-nav {
  overflow: auto;
}

.drawer[aria-expanded] {
  transition-duration: .25s;
  transition-property: visibility;
}

.drawer[aria-expanded] .drawer-backdrop {
  transition-duration: .25s;
  transition-property: opacity;
  transition-timing-function: linear;
}

.drawer[aria-expanded] .drawer-nav {
  transition-duration: .25s;
  transition-property: transform;
  transition-timing-function: ease;
}

/* 開いているとき */
.drawer[aria-expanded="true"] {
  visibility: visible;
}

.drawer[aria-expanded="true"] .drawer-backdrop {
  opacity: 1;
}

.drawer[aria-expanded="true"] .drawer-nav {
  overflow: auto;
  transform: translateX(0);
}

/* 閉じているとき */
.drawer[aria-expanded="false"] {
  visibility: hidden;
}

.drawer[aria-expanded="false"] .drawer-backdrop {
  opacity: 0;
}

.drawer[aria-expanded="false"] .drawer-nav {
  transform: translateX(100%);
}

URL: /components/raw/drawer-menu/style.css
Filesystem Path: src/components/5-effect/drawer-menu/style.css
Size: 4.6 KB

Handle: @drawer-menu
Preview:
- With layout
- Component only
Filesystem Path: src/components/5-effect/drawer-menu/drawer-menu.hbs

No notes defined.