簡単!jQueryで作る画面横から見え隠れするサイドバナー

ECサイトでよく見かける、画面の左側から見え隠れするサイドバナーのサンプルです。
タブにマウスオーバーすると、バナーーが横からスライドして現れる仕組みです。簡単なjQueryのコードで設置出来ます。

⇒ライトプラン 詳細はこちら ライトプラン 詳細はこちら

デモはこちら

タブにマウスオーバーする。

1

バナーーが横からスライドして現れる。マウスアウトすると、バナーはスライドして戻ります。

2

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

⇒ライトプラン 詳細はこちら ライトプラン 詳細はこちら

デモはこちら

投稿者:

kishiken

企業務めのWEBデザイナーです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です