text 从左到右滑动菜单

Posted 2021-04-30

*HTML 

<div class="menu-slide">
    <img src="<?php echo esc_url(get_template_directory_uri()); ?>/common/img/ico/ico-close.png" alt="" class="icon-close"/>
    <ul class="list-memu">
        <li>
            <a href="<?php echo esc_url(home_url('/')); ?>">トップページ</a>
        </li>
        <li>
            <a href="<?php echo esc_url(home_url('about-us/')); ?>">ノービスハイエスト サービスについて</a>
        </li>
        <li>
            <a href="#">代表挨拶</a>
        </li>
        <li>
            <a href="<?php echo esc_url(home_url('company/')); ?>">会社概要</a>
        </li>
        <li>
            <a href="#">アクセス</a>
        </li>
        <li>
            <a href="<?php echo esc_url(home_url('news/')); ?>">お知らせ</a>
        </li>
        <li>
            <a href="<?php echo esc_url(home_url('contact/')); ?>">お問い合わせ</a>
        </li>
        <li>
            <a href="#">プライバシーポリシー</a>
        </li>
        <li>
            <a href="#">サイトマップ</a>
        </li>
    </ul>
</div>




//----------------------------------------------
.menu-slide {
  position: fixed;
  top: 0;
  z-index: 1031;
  display: flex;
  flex-direction: column;
  transition: all 200ms linear;
  height: 100vh;
  padding-top: 25px;
  padding-right: 50px;
  padding-left: 80px;
  transform: translateX(-100%);
  background-color: rgba(0, 0, 0, 0.7);

  @media (max-width: $screen-xs-max) {
    padding-right: 50px;
    padding-left: 50px;
  }

  &.toggle {
    transform: none;
  }

  .list-memu {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 10px 0;
    list-style: none;

    @media (max-width: $screen-xs-max) {
      padding-right: 20px;
    }

    li {
      a {
        position: relative;
        display: inline-block;
        padding-right: 30px;
        color: #fff;

        @media (min-width: $screen-sm-min) {
          font-size: 16px;
        }

        &:after {
          position: absolute;
          top: -2px;
          right: 0;
          bottom: 0;
          display: block;
          width: 9px;
          height: 9px;
          margin-top: auto;
          margin-bottom: auto;
          border-top: 1px solid #fff;
          border-right: 1px solid #fff;
          transform: rotate(45deg);
          content: '';

          @media (max-width: $screen-xs-max) {
            top: -4px;
          }
        }
      }
    }
  }

  .icon-close {
    position: absolute;
    top: 25px;
    left: 30px;

    @media (max-width: $screen-xs-max) {
      left: 15px;
    }

    &:hover {
      @include opacity (.7);
      cursor: pointer;
    }
  }
}



.menu-trigger {
  position: absolute;
  top: 3px;
  right: 0;
  width: 27px;
  height: 24px;
  transition: all .3s;

  @media (max-width: $screen-xs-max) {
    display: inline-block;
  }

  &,
  &:hover,
  &:focus,
  &:active {
    background-color: transparent !important;
    border: 0;
    outline: 0;
  }

  .icon-bar {
    position: absolute;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 3px;
    background-color: #888;
    transition: all .3s;

    &:nth-of-type(1) {
      top: 0;
    }

    &:nth-of-type(2) {
      top: 11px;
    }

    &:nth-of-type(3) {
      bottom: 0;
    }

    & + .icon-bar {
      margin-top: 0;
    }
  }

  &:hover,
  &:focus {
    .icon-bar {
      &:first-child {
        transform: translateY(3px);
      }

      &:last-child {
        transform: translateY(-2px);
      }
    }
  }
}


/*
 * SLIDE MENU
 * ----------------------------------------------- */
jQuery(document).ready(function ($) {
  // Active Menu
  $('.menu-trigger').click(function(event) {
    $('.menu-slide').addClass('toggle');
    $('.menu-trigger').addClass('hidden');
  });
  $('.menu-slide .icon-close').click(function(event) {
    $(this).parent().removeClass('toggle');
    $('.menu-trigger').removeClass('hidden');
  });
});