Simplicity2、グローバルメニューを固定させてみる
ワードプレス
スポンサーリンク
Simplicity2って本当にすごい。
とは言っても今日はグローバルメニューのスクロール時に固定させてみたいと思ってGoogle先生どこを参考にしましょうか?
ってことでやってみました。
自分が使うだけなので、CSSはログイン時はアドミンバー?の下に固定され、ログインしていないときは上に固定としました。
分岐タグをつかってCSSを分けた訳ですね。
functions.php
if ( is_user_logged_in() ) {
//ログインしている時は表示
echo 'Welcome, registered user!';
} else {
//ログインしていない時に表示
echo 'Welcome, visitor!';
}
わいひらさんの記事でもありましたが、今回は上のやり方を実践しました。
自分的なメモなので、この記事を見た方には分からないですね。
スポンサーリンク
私へのオボエガキ
functions.php
<?php
function succeed_globalNavi() {
echo <<< EOF
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
var nav = $("#navi"),
offset = nav.offset();
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
nav.addClass("fixed");
} else {
nav.removeClass("fixed");
}
});
});
</script>
<style type="text/css" media="all">
EOF;
if (is_user_logged_in()) { //ログインしている時は表示
echo "#navi.fixed{top:32px;}\n";
} else { //ログインしていない時に表示
echo "#navi.fixed{top:0px;}\n";
}
echo <<< EOF
#navi.fixed{position:fixed;width:100%;z-index:1000;background:rgba(51, 51, 51, 0.7);border-bottom:1px solid #333;}
#navi.fixed ul > li{border-left:1px solid #fff;}
#navi.fixed ul > li:last-child{border-right:1px solid #fff;}
#navi.fixed a{float:none;display:table-cell;vertical-align:middle;color:#fff;}
#navi.fixed a:hover{color:#333;background:#fff;}
</style>
EOF;
}
add_action('wp_footer', 'succeed_globalNavi');
グローバルナビゲーションを固定する方法でした。
スポンサーリンク
この記事へのコメントはありません。