フローティングメニューを作る
ボタンを押したら画面外からシュって出てくるメニューがほしかったので頑張って作ってみた。
xクリックで出したり消えたりします。
デモ
サンプルコード
<section class="slide-box">
<div class="slide-tab">
<div>x</div>
</div>
<div class="slide-content">
<div class="slide-menu">メニュー1</div>
<div class="slide-menu">メニュー2</div>
<div class="slide-menu">メニュー3</div>
<div class="slide-menu">メニュー4</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");
});
});
ディスカッション
コメント一覧
まだ、コメントがありません