フローティングメニューを作る

2018年9月21日2018年10月17日

ボタンを押したら画面外からシュって出てくるメニューがほしかったので頑張って作ってみた。
ｘクリックで出したり消えたりします。

デモ

DEMO

サンプルコード

<section class="slide-box">
  <div class="slide-tab">
    <div>x</div>
  </div>
  <div class="slide-content">
    <div class="slide-menu">メニュー１</div>
    <div class="slide-menu">メニュー２</div>
    <div class="slide-menu">メニュー３</div>
    <div class="slide-menu">メニュー４</div>
  </div>
</section>

slide-box {
  position: fixed;
  width: 120px;
  bottom: 60px;
  left: -100px;
  z-index: 10;
  transition: all 300ms 0s ease;
}
.active {
  transform: translateX(120px);
}
.slide-box .slide-tab {
  float: right;
  width: 20px;
  height: 20px;
  background-color: #333
}
.slide-box .slide-content {
  flex-direction: row;193874281
}
.slide-box .slide-menu {
  height: 60px;
  width: 100px;
  border: 1px solid #000;
  background-color: #FFF;193874281
}

$(function(){
  $(".slide-tab").on('click',function(){
    $(".slide-box").toggleClass("active");
  });
});