横からスライドして現れるヘルプパネル

ちょっと凝ったメールフォームを作っていると、テキストフォームなどの下に説明文を書きたくなるときが有ります。パソコンのみであれば領域が多く取れるので、ある程度の文章量でも大丈夫でしょうが、レスポンシブデザインが当たり前の昨今、無駄に長いヘルプを書くのはあまり宜しく有りません。また、より細かく記載されているページへブランクでリンクさせるような手抜き仕様もよく見かけます。

パソコンなら外部ページへのリンクも良いのでしょうが、パソコンですら外部ページを開いてまで見る事は無いものを、スマートフォンなら尚見ないと思われます。

そこで、ある程度の文章量があるヘルプであっても、同じ画面内にスライドして展開させる事で利便性を上げる方法を考えました。といっても、割と多く紹介されている手法だと思いますので、ご参考程度に。

サンプル

該当のHTML内にヘルプ用のHTMLを書き加えるものではなく、ヘルプ用に用意したシンプルなHTMLをスライド内にロードしますので、ヘルプの書き変えが容易です。

CSS

#help-slide{
  position: fixed !important;
  position: absolute;
  top: 0px;
  left: -2000px;
  z-index: 99999;
  overflow-y: scroll;
  background-color: #FFFFFF;
}
#help-slide #help-slide-close{
  display: block;
  padding: 5px;
  text-align: center;
  border-bottom: #DDDDDD solid 2px;
}
#help-slide #help-slide-contents{
  padding: 10px;
  font-size: 90%;
}

パネルは後ろのページの高さ・位置に関係なく上部に固定させるだけのスタイルを書いています。デフォルトで左-2000pxにして隠す形です。

Javascript

$(function() {
/*
 * body直下にスライド用のHTMLを挿入
 */
  $('body').prepend('<div id="help-slide"><a href="#" id="help-slide-close">閉じる</a><div id="help-slide-contents"></div></div>');
  
/*
 * ブラウザの幅や高さに合わせてスライドパネルの位置や大きさを変更
 */
  win_Slide();
  $(window).resize(function(){ win_Slide();})

/*
 * 表示したいHTMLを取得し、左端を左ぴったりまで移動
 */
  $(document).on('click','.help-slide-open',function(e){
    var tpl = $(this).data('tpl');
    $("#js_slide_wrap").html('');
      $.ajax({
            type: "POST",
            url: "get_help_html.php",
            data: 'tpl='+tpl,
            dataType :'html'
      }).done(function(html){
        
        $("#help-slide-contents").html(html);
      });
      
      $('#help-slide').animate({'left': '0px' }, "slow","easeOutQuart");
    
    e.preventDefault();
  });
  
/*
 * 閉じるボタンを押したら右端を左ぴたりまで移動
 */
  $(document).on('click','#help-slide-close',function(e){ 
    $('#help-slide').animate({'left': -$(window).width() }, "slow","easeInQuart");
    e.preventDefault();
  });

  
/*
 * ブラウザの幅に合わせて調整する
 */
  function win_Slide(){
    var h = $(window).height();
    var w = $(window).width();
    if(w < 959){
      w = (w * 0.95); //タブレットやスマートフォンはブラウザ幅の95%
    }else{
      w = (w * 0.30); //PCはブラウザ幅の30%
    } 
    $("#help-slide").width(w);
    $("#help-slide").height(h);
    $('#help-slide').css({'left': -$(window).width() }); //スライドパネルの位置を左へぴったりに移動して隠す
  }
});

jQueryで書いていますので、jQueryも読み込んでおいて下さい。あと、サンプルはeasing使っていますので、jQueryUIも読み込んでいます。easing使わないのであればjQueryだけで。

スライドの開閉は割と単純で、クリックしたらパネルの位置を左ピッタリまでアニメーションさせます。閉じる時は逆にアニメーションさせるだけですね。

ただ、ブラウザというのはデバイスによって幅にかなり差が出ます。例えば数行程度のヘルプを画面全体にスライドするスライドに展開するのは微妙です。そこで、ブラウザ幅(デバイス幅)959pxを境目とし、それ以上なら30%、それ以下なら95%と、スライドの幅を可変させています。

これにより、パソコンだと右へ帯のように展開され、スマートフォンだと後ろのページが少し見える形で展開される事になります。

ｊQueryとPHPの処理

前述した通り、ページにヘルプの内容をいちいち書いていたら更新が面倒なので、HTMLファイルをPHPで読み込んでいます。

<p><a href="#" class="help-slide-open" data-tpl="help1.html">help1.htmlを開く</a></p>

data-tpl=”XXXXX” この部分へ読み込ませたいファイル名を指定しています。

if( isset($_POST['tpl']) AND $_POST['tpl'] ){
  readfile('help_template/'.$_POST['tpl']);
}

後はPHPでそのファイルを取得し、内容をキックバックし、スライドの中に差し込むだけ。

これはファイルと同じディレクトリにhelp_template/ というディレクトリを作り、その中にヘルプページを入れています。
https://studio-key.com/Sample2/jquery/slide-help/help_template/help1.html

ホームページによっては階層が違う場合もあると思うので、絶対URLで読み込むようにカスタムしても良いかもしれません。

あと、上からみょーんと出したり、左から出したり下からなど、色々と試してみると面白いかもです。