最近ちょっと流行りの、スクロールしていくと画面上部にグローバルメニューが張り付いて消えることなく追従してくれるやつ。（表現が難しい）
LIGさんのサイトが採用していますね。
これを簡単に実現することが出来るらしいプラグインがあるとのことで試してみました。
追従式グローバルメニュー「Clingify」とは
追従式と言うらしいです。
メニューに限らずヘッダー要素なども手軽に固定できるjQueryのプラグインです。
早速実装してみましょう
ファイルのダウンロード
まずは、ファイルをダウンロードします。
画面右側の方の［Download ZIP］のボタンからダウンロードします。
DLサイト→ https://github.com/theroux/clingify
こちら公式サイト→ Clingify
Clingifyサイトのデモページを参考に必要なファイルをアップロード
今回は『clingify.css』と『jquery.clingify.js』を使うようです。
こちらをサーバーへアップロードします。
HTML・CSS・JSの設定
以前記事にしましたWebフォントのデモページを流用します。
Clingifyサイトのデモページや公式サイトは英語ですが、変更箇所がわかりやすく記載されています。
HTML index.html
アップロードした2つのファイルとjQueryファイルの読み込み、JSの指定を記述します。
アップロードした2つのファイルの編集は必要ありません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>追従式グローバルメニュー</title> <!-- Keyword,Description --> <meta name="keywords" content="" > <meta name="description" content="" > <!-- StyleSheet --> <link rel="stylesheet" href="common/styles/style.css"> <link rel="stylesheet" href="common/styles/clingify.css"><!-- ←ここ --> <!-- JQuery --> <!-- ↓ここから --> <script src="common/scripts/jquery.js"></script> <script src="common/scripts/jquery.clingify.js"></script> <script type="text/javascript"> jQuery(function() { jQuery('nav').clingify(); }); </script> <!-- ↑ここまで --> </head> <body> <div class="webfonts" style="margin-top: 100px;"> <nav><!-- ←jQueryで指定した通りnavタグで作成 --> <ul> <li><a href="#">HOME<span>ホーム</span></a></li> <li><a href="#">SERVICE<span>サービス</span></a></li> <li><a href="#">ABOUT US<span>企業概要</span></a></li> <li><a href="#">SHOP LIST<span>取扱店舗一覧</span></a></li> <li><a href="#">CONTACT US<span>お問い合わせ</span></a></li> </ul> </nav> </div> </body> </html> |
CSS
CSSはグローバルメニューの装飾とスクロール用に高さ設定、スクロールがわかりやすいように背景画像を付けました。これらはデモ用の設定なので無くでも大丈夫です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
body { background: url("../images/bg_demo.png") repeat-x; height: 2000px; } .webfonts { font-family: 'Kazesawa-Regular'; } ul { display: table; margin: 0 auto; width: 900px; text-align: center; } ul li { display: table-cell; vertical-align: middle; font-size: 20px; } ul li a { display: block; padding: 2em 0; color: #FFFFFF; text-decoration: none; } ul li a:hover { background: #CCCCCC; color: #000000; text-decoration: underline; } ul li a span { display: block; font-size: 14px; } ul li:first-child { background: #999999; } ul li:nth-child(2) { background: #777777; } ul li:nth-child(3) { background: #555555; } ul li:nth-child(4) { background: #333333; } ul li:nth-child(5) { background: #111111; } |
かっこ悪いのでそれっぽく装飾し直します
CSSの装飾で各メニューの色を統一しborderで仕切り線を、またnavに対する背景色をボタンと同じ色にすることで帯っぽくしてみたいと思います。
CSS
本来であれば各ボタンの色の統一はまとめてすっきりさせることが出来るのですが、あえて元のCSSの色を変更する形にしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
body { background: url("../images/bg_demo.png") repeat-x; height: 2000px; } .webfonts { font-family: 'Kazesawa-Regular'; } nav { background: #777777; } ul { display: table; margin: 0 auto; width: 900px; text-align: center; } ul li { border-left: #555555 1px solid; display: table-cell; vertical-align: middle; font-size: 20px; } ul li a { display: block; padding: 2em 0; color: #FFFFFF; text-decoration: none; } ul li a:hover { background: #CCCCCC; color: #000000; text-decoration: underline; } ul li a span { display: block; font-size: 14px; } ul li:first-child { background: #777777; } ul li:nth-child(2) { background: #777777; } ul li:nth-child(3) { background: #777777; } ul li:nth-child(4) { background: #777777; } ul li:nth-child(5) { background: #777777; border-right: #555555 1px solid; } |
まとめ
思ったより簡単でした。
既存のWebサイトにも容易に組み込む事が出来ます。
Clingify公式サイトではもっと複雑なオプションによって見せ方を変えているようです。
英語なので理解を深めるには時間がかかりますが、もうちょっと工夫して張り付く前と後で違った表示が出来るようになればと思います。
近々スマホ対応の折りたたみメニューとも組み合わせてみたいと思いました。
それではまた。
![群馬の法人ITサポートサービス Wide Net[ワイドネット]](https://www.nedia.ne.jp/wp-content/themes/nedia/images/bnr_bt_widenet02.png "群馬の法人ITサポートサービス Wide Net[ワイドネット]")
![群馬の法人ITサポートサービス Wide Net[ワイドネット]](https://www.nedia.ne.jp/wp-content/themes/nedia/images/bnr_bt_widenet03.png "群馬の法人ITサポートサービス Wide Net[ワイドネット]")
