このページの本文へ

jQuery不要!センスのいいナビゲーションをJSでサクッと実装する方法

2017年06月15日 11時23分更新

記事提供:WPJ

  • この記事をはてなブックマークに追加
本文印刷

WPJでも使っているアニメーション付きのスティッキーナビゲーションメニュー。いまならjQueryや専用ライブラリーに頼らなくても、たった数行のJavaScriptで実装できます。

Webページのナビゲーションメニュー作成には、考えるべきことがたくさんあります。どこに配置するか、スタイル、レスポンシブのデザイン、アニメーションなど。さらにセンスよく実装したいですよね。ここまで読んで、jQueryプラグインを連想したかもしれませんが、その必要はありません。ほんの数行のコードで簡単に実現できるのです。

この記事では、素のJavaScript、CSS、HTMLでアニメーション付き「スティッキーナビゲーションメニュー」の作成方法を紹介します。ページをスクロールダウンすると邪魔にならないメニューが上にスライドし、スクロールバックすると、スタイリッシュなシースルー効果で画面に戻ります。MediumHacker Noonなどの人気サイトで使われている技術です。

この技術をデザインに、うまくいけば効果的に活かせるようになります。気の早い人のために、この記事の最後にデモを用意しました。

この記事をWPJのサイトで読む

Web Professionalトップへ

Web Professionalトップページバナー

WebProfessional 新着記事

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く

ランキング