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; }