jQuery

上スクロールすると出現し,下スクロールで消える,メニューバーの作り方【jQuery】

上スクロール,下スクロール

WebページやWebアプリを使っている時に,「画面せまいな〜」とか「メニューバーがなければ良いのに」とか「今メニューバーいらんねん!」とか思ったことありませんか??自分のWebページを作るときは是非今回の「上スクロールすると出現し,下スクロールで消える,メニューバー」を採用してみてください!モバイルファースを意識した,良いサイトになること間違いなしです!それでは,解説していきます!

続きを読む

【jQuery】Webページにおける縦方向の現在位置を示すインジケーターをjQueryで実装する

この記事では,Webページにおける縦方向の現在位置を示すインジケーターをjQueryで実装します.ウィンドウのスクロール量に応じてインジケータが指し示す点も上下に移動します.また現在のインジケーター以外のインジケーターをクリックすることで,その高さのウィンドウまで自動スクロールするように実装します.Webページ全長がとても長い場合等に有効な方法です.それではインジケーターの作り方を見ていきましょう.

続きを読む

コピペで実装!jQueryでレスポンシブなハンバーガーメニューを実装する

ハンバーガーメニューとは,三本線のボタンのことです.クリックまたは,タップするとメニューが表示されます.一般的にはスマートフォン用のデザインで採用されることが多く,画面領域の有効活用ができます.もちろんPC等の画面が広いデバイスでも使用されることはありますが,今回はスマホ用の画面で,ハンバーガーメニューを表示し,大きい画面ではメニューを横並びにヘッダーに表示させます.これはCSSのみでは難しいので,jQueryを交えて実装していきます.

続きを読む

SNSアイコンのレイヤー展開するマウスオーバーアニメーションをjQueryで作る

この記事ではSNSアイコンのホバーエフェクトを作っていきます.CSSだけでも実装することはできるのですが,CSSが冗長になってしまうので,アニメーションはjQueryで作成していきます.今回は複数のレイヤーがマウスオーバー時に縦に展開するアニメーションを作成します.単純なボタンにするより,おしゃれでモダンなサイトに近づくことでしょう!

続きを読む

jQueryで作るWebページ最上部へ戻るスムーズスクロールボタン

Webページってコンテンツが増えると,どんどん長くなっていきますよね.ヘッダーにサイトメニューを置いていたりすると,一番上まで戻らないといけません.結構めんどくさかったりします.もちろんスティッキヘッダーを使ったり,サイドバーを使ったりすれば,解決できますが,上の方のコンテンツを見るために戻ることもあると思います.そこで下から上へ戻るスムーズスクロールボタンがあれば,親切なサイトになるでしょう.今回はWebページ最上部へ戻るスムーズスクロールボタンをjQueryとCSSで作っていきます.

続きを読む

jQueryで小さな領域で情報を重ねて表示するタブを作る(画面の有効活用)

Webページを作っているときに,画面が狭くて全ての情報を載せられない!!ってなったりしませんか?今回はメニューをクリックするとページ内で切り替わるタブをjQueryで実装していきます.jQueryではクリックに合わせてactiveクラスを追加したり消去したりするだけなので,そこまで難しくはないでしょう.

続きを読む

jQueryでスティキーヘッダーを実装してイケサイに近づく!

今回はスティッキーヘッダーをjQueryで作っていきます.スティッキーヘッダーとは,メニュバーやサイト名がついている横長のバーのことです.Webページが長くなればなるほど,ヘッダーのメニュー情報を見るために上まで戻らなければなりません.フッターにも同じ情報を載せてもいいのですが,あまりスマートじゃないですよね.そこで,スクロールしても常時上にあるようなヘッダーを作っていきます.

続きを読む