[css + js]ブラウザ下部固定コンテンツの開閉ギミック

簡潔に作ったほうが後が楽になる。

完成イメージ

問い合わせとか何かしらの訴求でリンクバナーをブラウザ下部に固定表示するものがある。というか、広告界隈では当たり前になってるアレ。

そういうものは上下左右色んなところに設置されてるけど、前提として下部固定に限定した話にする。大差ないし、一般的だし、これをベースに展開すればいいって感じで応用してください。

で、常時表示はあまり親切じゃないので「閉じる」をくっつける。本当に閉じちゃうと訴求力に欠けるので、閉じた場合は「開く」ボタンを出す。

広告だったら絶対見ねえよ邪魔くせえなだけど、サイト内のコンテンツだったら、ページ閲覧においては邪魔だけどあとで見たいってことも考えられる。そんな感じでやっていく。

やっていく

いつも通りだけど、うちの記事はコピペで済むというよりは読んで内容を理解して自分でやっていく感じなんだよなって。時間がないときはあんまりあてにならないね。

HTML

汎用性を考えて、あまり凝ったことはやらない。

<div class="f_fix" id="f_fix">
    <div class="change"><a id="change_btn"><span>閉じる</span></a></div>
    <div class="content">
中身
    </div>
</div>

classはcss用、idはjs用。idに対してcssを振るのは好みじゃない。好きにやればいいと思うけどね。

css

表示時と非表示時、切り替えの際の動作を仕込む。

.f_fix{
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    transition: transform .4s;
}
.f_fix .change{
    position: absolute;
    right: 4px;
    top: -4px;
    transform: translate(0,-100%);
}
.f_fix .change a{
    padding: 12px;
    background: #eee;
    text-decoration: none;
    display: inline-block;
    transition: all .4s;
}

/* close */
.f_fix.close{
    transform: translate(0,100%);
}
.f_fix.close .change a{
    background: red;
    color: #fff;
}

コンテンツの位置はtransformで調整。こうすることで、コンテンツのサイズに関係なく開閉が可能になる。transformはtransitionが効くので、画面外に消えたり画面外から出てきたりが実現する。

ちょっと掘り下げると、コンテンツ自体はtranslateで-100%にすることでまるっと外に逃がせる。切り替え用のボタンをposition:absolute;にしておくことで領域外に逃がせるんで、コンテンツを画面外にずらしても残ることになる。

js(jQuery)

切り替えボタンを押したら発火。

$(function(){
    $('#change_btn').on('click',function(){
        $('#f_fix').toggleClass('close');
        if($('#f_fix').hasClass('close')){
            $(this).find('span').html('開く');
        }else{
            $(this).find('span').html('閉じる');
        }
    })
})

.closeをつけたり外したりする。ついでに、非表示時にボタンの文言を変更。

これだけ。

疑似要素で表記変更

上記はjsで表記を変更したけど、疑似要素を使えばcssだけで表記を変えられる。

ボタンの中身は空にしておく。

<div class="f_fix" id="f_fix">
    <div class="change"><a id="change_btn"><span></span></a></div>
    <div class="content">
中身
    </div>
</div>

こんな感じにする。

.f_fix .change a span::after{
    content: "閉じる";
}

.f_fix.close .change a span::after{
    content: "開く";
}

jsはこれで済む。

$(function(){
    $('#change_btn').on('click',function(){
        $('#f_fix').toggleClass('close');
    })
})

レスポンシブでスマホ表示時だけ表示したいとか、どっかしらでリセットが発生する場合を考えたらこっちの方が楽だと思う。

要素を空っぽにするのはあんまり好きでない。どうなんでしょう。

まとめ的なもの

個人的なコーディングの傾向の話。

ここ数年、というか実は初めのうちから、画像に文字を乗せるとか装飾をするとか、極力画像で作らずにhtmlとcssでうまいことやりたい派。LPであっても同様。画像で作っちゃえば早いと言うのは分かる。でも修正を投げつけられたときに画像データを編集して上げ直すのがすごく嫌だった。画像だったら縦横比が固定されるから設置の際に色々と楽。分かるけどさ。

レスポンシブになってくるとPC/SPで同じ画像を使えないじゃんねって話になりがち。文字が小さくなって読めないとか、デカすぎて邪魔くさいとか。ちょっと変えたらOKでも実際のところ画像を2枚作らなきゃで、そんな手間はアホらしいんじゃないのって。そうすると自分の主義がある意味正しいというか、柔軟性が高くて対応しやすくて救われた感じがある。

transformで実数を指定しなくても枠外に逃がせる方法、要素のサイズが不定形でもそのまま流用できちゃう方法が確立されてるおかげでほんとにもう、怖いものはなくなったというか。

そういう面倒くさいどうのこうのを踏まえて今回の内容がある。踏まえなくても普通にやれるけど。カタルシス的なものを感じる。偏屈ですね。

コメント

タイトルとURLをコピーしました