[K] [web]いまさらながらページトップに固定できるヘッドメニューを実装してみた (サンプルコードあり)

Web技術

jQuery

2012/08/12

[K] [web]いまさらながらページトップに固定できるヘッドメニューを実装してみた (サンプルコードあり)

どうもお久しぶりです、@knk_nです。
忙しさやら何やらでひと月も空いてしまいましたが、今日からぼつぼつ再開です。
今回は未だ不慣れなブログカスタム系の記事を書いてみますよ。
最近はことさらよくみかけるようになった上部に固定されたヘッドメニューですね。

ずいぶん前に実装したヘッドメニューしかし…

ヘッドメニューの実装自体はずいぶん前のことになります。
しかし、コードを載せていなかった。
というのも、当時書いたコードは私自身「これは載せるほど綺麗に書けていない」と思っていませんでした。まだまだ恥を晒す度胸もないわけで。
その後もそのままにしていたのですが、先日ハイパー中学生ブロガーの@_tenbiくんより

けんけん.comみたいに永遠とついてくるスクロール機能付きなんでもツールバーを設置したいけど肝心のコードが書いてない

— てんび～さん (@_tenbi) 8月 6, 2012

とのご指摘を受けました。
聞けばブログテーマを自作中とのこと（ｶﾞﾝﾊﾞﾚ。その手助けの一端になるのならここはひとつ「恥のいくらかくらいかいてみるか」と。
言われたらやる。これぞダメな大人の典型！
（そもそも頼まれれば、NOとは言えない。）

ヘッドメニューのサンプルコード

基本的には#headmenuの中に

リンクメニューのリスト
ページトップへのリンク
検索フォーム

をリスト形式で記述してそれぞれCSSで外観をいじっています。
今回は記事埋め込みのためにサイズを抑えていますが、ほとんどのWEBページは640~1000pxのため横幅は各々のページ環境に合わせて調整してください。

要素位置の固定はCSSで

要素をスクロール中に延々とついてくるように表示させるにはCSSで

position: fixed;

と記述します。
今回は#headmenuに記述しているのでヘッドメニューまるごとがスクロール中もページ上部に張り付いているわけですね。
つーか、これ前も書いたのか。(ﾟεﾟ)ｷﾆｼﾅｲ!!ｷﾆｼﾅｲ!!

ページトップへのスクロールはjQueryで実装

ページトップへの移動にはjQueryを使っています。これもかなり有名になってきましたね。

少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス

<head>~</head>内に

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

jQueryの宣言を記述し、
<body>~</body>内に

<script type="text/javascript">
$(function(){
     $("#toTop a").click(function(){
     $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing');
     return false;
     })
});
</script>

とスクロールの挙動部分を書く。

ページトップへのリンクは・・・

背景をヘッドメニュー同様黒にしているので非常にわかりづらいですが、メニュー4と検索フォームの間にページトップへスクロールするためのリンクが仕込んであります。（.gototop）

display: block;

でブロック要素にしているためクリックできる範囲をwidthで調整できます。
おそらくヘッドメニューに仕込む機能の量に合わせてこの部分の横幅を変えることになろうかと思います。

もっとスマートに書けないものかなとも考えましたが、まだこれが精一杯のようです。
（たしか挙動優先で妥協していた気が・・・）
ヘッドメニューの背景に溶け込ませているので

良くは目立たず邪魔にならない
悪くは言わないと誰も気づかない空気機能

といった効果があります。
さらに

cursor: default;

と記述する方法があります。
これを記述するとリンク部分でもカーソルのカタチが標準の矢印と変わらないので（リンク時のカーソルは☝のようなひとさし指みたいなやつ）、更に~~空気機能に~~目立たなくなりますね。

WordPressの管理バーは表示しない

これも前に書いた内容。WordPress使用者限定。

管理人が見た時のみ表示されるWordPress管理バー。
WordPress3.4になってスクロール機能が搭載されたらしいですね。（もともとそれがキッカケだったりしますが。）
ともかく独自でブログトップにバーを設置すると管理バーと被ること必至なので、管理バーは非表示に。
function.phpに

add_filter( 'show_admin_bar', '__return_false' );

と記述すると管理バーが消えます。
コードを欠かずに済ませるやり方もあるとかないとか。

[WordPress][小ネタ]ログインした状態で自サイトを見るとでてくる「管理バー（Admin Bar）」を消す | OZPAの表4

おわりに

とまぁ、このように誰でもカンタンにヘッドメニューは実装できます。
もっと綺麗に書けそうではありますし総ツッコミを食らいそうですが今回ばかりはどうぞご勘弁を。
しかしfloatの使い方がいささか難しいですね。私も未だに馴れません。
狭いスペースなのであまりたくさんの機能を盛り込むことはできませんが主要なリンクなどはトップに集めておくとわかりやすいですよ！
最後に@_tenbiくん、遅くなってしまい申し訳ない。