スナックバーについて
スナックバーは通常、画面下部に表示するUIの一種です。細長いバーのような形状になっているのが定番で、何かのお知らせを表示するのによく使われます。モーダルウインドウと異なり、スクロールやクリックなど他の動作ができるようにしておくケースが多いでしょう。
スナックバーのおすすめの使い方
- お得な情報などを伝える
- 成功やエラーなど操作の結果を表示する
- お問い合わせやチャット用のボタンなど
ネットサーフィンをしていると、お問い合わせページへの誘導や、サブスク契約か会員登録への誘導、クッキーの設定などで見かけることがあるかもしれません。他には、チャット相談を呼び出すためのボタンとしても利用されていそうです。
SnackBarの作り方
第一条 この法律は、道路における危険を防止し、その他交通の安全と円滑を図り、及び道路の交通に起因する障害の防止に資することを目的とする。
（定義）
第二条 この法律において、次の各号に掲げる用語の意義は、それぞれ当該各号に定めるところによる。
HTMLとCSSでバー部分の表示デザインを作り、スタイル設定をDisplay:Fixedにして重ねておきます。ただ、これだとずっと表示されているので、消したい場合はJavascriptでクラスを付与または除去するなどの処理が必要です。
単純に透明にするだけだと、スナックバーが重なっている部分の操作が邪魔されるので、ひと工夫します。今回はスタイル設定をHeight:0にすることで、邪魔にならないようにしました。他にも表示順を変更するなどしても大丈夫だと思います。
発火条件は、今回はページを開いた時と、ボタンを押したときに設定しています。一般的な用途としては、ページを開いたときか、少しスクロールしたときに表示させるケースが多いでしょう。これらの発火条件も、Javascriptで設定します。
ソースコード
HTML
<div id="SbAREA"><span id="SBN1"></span><span id="SBN2"></span> ここにメッセージを表示します </div>
CSS
#SbAREA{
width:750px;
height:150px;
background:linear-gradient(to right ,#ff2600,#cc7b00); position: fixed;
bottom:20px;
left:50%;
margin-left:-375px;
animation: aniSNB 0.5s!important;
color:white;
padding:20px 50px 20px 20px;
box-sizing:border-box;
border-radius: 10px;
box-shadow: 0px 0px 4px 0px rgb(0, 0, 0) ;
z-index:9999;
}
@keyframes aniSNB {
0% {
opacity: 0.0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
#SbAREA.activer{
bottom:20px;
}
.closeSNB{
height:0!important;
opacity: 0;
transition:all 0.6s;
}
#SbAREA span{
z-index:650;
position: absolute;
transition: all .4s;
right: 14px;
height: 3px;
border-radius: 2px;
background: #fff;
width: 18px;
}
#SbAREA span:nth-of-type(1) {
top:18px;
transform: translateY(1px) rotate(-45deg);
}
#SbAREAspan:nth-of-type(2) {
transform: translateY(-1px) rotate(45deg);
top:34px;
}
#SbAREA.hover span{
background: #505050;
}
#SbAREA.activer span:nth-of-type(1) {
transform: translateY(1px) rotate(-45deg);
}
#SbAREA.activer span:nth-of-type(2) {
transform: translateY(-1px) rotate(45deg);
}
width:750px;
height:150px;
background:linear-gradient(to right ,#ff2600,#cc7b00); position: fixed;
bottom:20px;
left:50%;
margin-left:-375px;
animation: aniSNB 0.5s!important;
color:white;
padding:20px 50px 20px 20px;
box-sizing:border-box;
border-radius: 10px;
box-shadow: 0px 0px 4px 0px rgb(0, 0, 0) ;
z-index:9999;
}
@keyframes aniSNB {
0% {
opacity: 0.0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
#SbAREA.activer{
bottom:20px;
}
.closeSNB{
height:0!important;
opacity: 0;
transition:all 0.6s;
}
#SbAREA span{
z-index:650;
position: absolute;
transition: all .4s;
right: 14px;
height: 3px;
border-radius: 2px;
background: #fff;
width: 18px;
}
#SbAREA span:nth-of-type(1) {
top:18px;
transform: translateY(1px) rotate(-45deg);
}
#SbAREAspan:nth-of-type(2) {
transform: translateY(-1px) rotate(45deg);
top:34px;
}
#SbAREA.hover span{
background: #505050;
}
#SbAREA.activer span:nth-of-type(1) {
transform: translateY(1px) rotate(-45deg);
}
#SbAREA.activer span:nth-of-type(2) {
transform: translateY(-1px) rotate(45deg);
}
JavaScript
const SbAREA = document.getElementById("SbAREA");
const SBN1 = document.getElementById("SBN1");
const SBN2 = document.getElementById("SBN2");
document.addEventListener('DOMContentLoaded', function() {
SbAREA.classList.toggle("activer");
});
SbAREA.addEventListener('click', ()=>{
SbAREA.classList.add("closeSNB");
console.log("SbAREA ", SbAREA )
});
SbAREA.addEventListener('mouseover', ()=>{
SbAREA.classList.add("hover");
console.log("SbAREA ", SbAREA )
});
SbAREA.addEventListener('mouseleave', function() {
SbAREA.classList.remove("hover");
});
const SBN1 = document.getElementById("SBN1");
const SBN2 = document.getElementById("SBN2");
document.addEventListener('DOMContentLoaded', function() {
SbAREA.classList.toggle("activer");
});
SbAREA.addEventListener('click', ()=>{
SbAREA.classList.add("closeSNB");
console.log("SbAREA ", SbAREA )
});
SbAREA.addEventListener('mouseover', ()=>{
SbAREA.classList.add("hover");
console.log("SbAREA ", SbAREA )
});
SbAREA.addEventListener('mouseleave', function() {
SbAREA.classList.remove("hover");
});
まとめ
スナックバーのご紹介でした。ソースコードは簡単なので、色々カスタムしやすいはず。お役に立てれば幸いです。
目次-Index-
