【STINGER5】スクロールしてもフッターで固定するメニューを設置してみたよ!

 2014/10/06

STINGER5にスライド式フッターメニュを設置
スマホでの操作性をもう少し良くしてみたくなり、フェイスブックのようなスクロールしてもフッター部分でずっとついてくるメニューを装備しました。CSSだけで作ったのであっという間に設置できますよ!

スポンサーリンク


コピペでOK!スマホの固定式フッターメニューのコード

まずはstyle.cssに以下を記述します。場所は/*レイアウト スマートフォンより前の部分です。

/*--------------------------------
スマホのフッターメニュー
---------------------------------*/
ul.footer_menu {
margin: 0 auto;
padding: 3px 0;
width: 100%;
overflow: hidden;
display: table;
}
ul.footer_menu li {
margin: 0;
padding: 0;
display: table-cell;
vertical-align:middle;
list-style-type: none;
font-size: 10px;
}
ul.footer_menu li a i{
font-size: 24px;
}
ul.footer_menu li a {
border: none;
display: block;
color: #666;
text-align: center;
text-decoration: none;
}
.footer_menu {
position: fixed;
bottom: 0;
left:0;
background: #fff;
z-index: 9999999999;
-moz-opacity: 0.9;
opacity: 0.9;
}

次にfooter.php<!– /#wrapper –>の下に記述します。

 <?php if(is_mobile()) { ?>
<ul class="footer_menu">
<?php if(is_single()) { ?>
<?php
$prev_post = get_previous_post();
if (!empty( $prev_post )): ?>
<li><a href="<?php echo get_permalink( $prev_post->ID ); ?>"><i class="fa fa-chevron-circle-left"></i><br>前の記事</a></li>
<?php endif; ?>
<?php
$next_post = get_next_post();
if (!empty( $next_post )): ?>
<li><a href="<?php echo get_permalink( $next_post->ID ); ?>"><i class="fa fa-chevron-circle-right"></i><br>次の記事</a></li>
<?php endif; ?>
<?php } else { ?>          
<?php } ?>
<li><a href="<?php echo home_url(); ?>/"><i class="fa fa-home"></i><br>ホーム</a></li>
</ul>
<?php } else { ?> <?php } ?>

コードの説明

style.css

position: fixedとbottom: 0で一番下にDIV要素を固定させました。STINGER5のデフォルトの状態だとこれで問題ないみたいです。また、display: tableで横に均等になるようにしているので、メニューの項目が減ったりしてもうまく並ぶようにしています。

footer.php

スマホでしか表示させないのでis_mobileで分岐させています。(※STINGER5ではis_mobileの関数は実装済み)また、前の記事と次の記事は投稿ページにしか必要ないのでこれもis_singleで分岐させています。

前の記事と次の記事

この部分はSTINGERに元々あったのをちょっと変更して使いました。一番古い記事には『前の記事』というのは非表示に、また一番最新記事には『次の記事』は必要ないので非表示になります。
footer-menu3

中間の記事

これには前の記事、次の記事どちらも表示されます。
footer-menu2

投稿以外のページ

これには前の記事、次の記事どちらも表示されません。
footer-menu4

トップへ戻るボタンを実装したいときは

footer.phpの</ul>の前に以下を追記

<li><a id="mobile-top" href="#wrapper"><i class="fa fa-chevron-circle-up"></i><br>TOP</a></li>

js/base.jsへ追記

jQuery(function() {
var pageTop = jQuery('#mobile-top');
//スクロールしてトップ
pageTop.click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

もともとあるページトップのJqueryはある程度スクロール後ぽわっと表示される仕様になっているため、こちらに変更してみました。

POINT

スマホでの表示ですと、元々あるページトップボタンとフッターメニューに追加したボタンがバッティングしてしまうのでis_mobileで分岐や、smanoneで非表示にしてください。

当ブログではJqueryプラグイン『Sidr』でメニューを表示しています。『Sidr』の設置については前日エントリーを書いています。

まとめ

スマホのスライド式のフッターメニューにしたのはウェブさえさんの直帰率の改善にウフフ!スマホサイトのメニューをアプリっぽくしてみたらというエントリーを拝見したのがきっかけでした。わたしもウフフ!ってしたい!

それではちゅんこ@shufulifeがお送りしましたー。

STNGER5

Please comment!

  

Messege




5件のトラックバック