ECサイトでよく見かける、画面の左側から見え隠れするサイドバナーのサンプルです。
タブにマウスオーバーすると、バナーーが横からスライドして現れる仕組みです。簡単なjQueryのコードで設置出来ます。
タブにマウスオーバーする。
バナーーが横からスライドして現れる。マウスアウトすると、バナーはスライドして戻ります。
html
<div class="container">
<div class="bnrL">
<ul>
<li><a href="#"><img src="http://placehold.it/600x200/" alt="バナー" class="bnrImg"></a></li>
</ul>
<button><img src="http://placehold.it/50x200/333/ffffff" alt="ボタン"></button>
</div>
</div>
jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.8.3"></script>
<script>
$(function(){
var duration = 300;//スライドの速さ
var $aside = $('.container .bnrL');//バナーの指定
$aside.on('mouseover',function(){//マウスオーバーした場合
$aside.toggleClass('open');
$aside.stop(true).animate({
left: '0px'
},duration);
}).on('mouseout',function(){//マウスアウトした場合
$aside.toggleClass('open');
$aside.stop(true).animate({
left: '-600px'
},duration);
});
});
</script>
css
.container {position: relative;}
.container .bnrL {
position: fixed;
top: 50px;
left: -600px;
width: 600px;
height: 200px;
background: #eee;
}
.container .bnrL ul {
position: absolute;
top: 0px;
left: 0px;
margin: 0;
padding: 0;
}
.container .bnrL li {
margin: 0 0 20px;
}
.container .bnrL button {
position: absolute;
top: 0px;
left: 600px;
width: 50px;
height: 200px;
display: block;
margin: 0;
padding: 0;
border: none;
}