jqueryを使ったスマホでよく使うアコーディオン型ナビゲーションの作り方

-
カテゴリー:
javascript 

所得税めっちゃもってかれたぁーーーー!
かなり久々の更新となってしまいました。(汗)

今日は、jqueryを使ったスマホでよく使うアコーディオン型ナビゲーションの作り方をご紹介したいと思います。

スマホ用のサイトですとよくフッター辺りに使われているのを目にします。

このアコーディオン型のナビゲーションのメリットは、項目などが多い場合、アコーディオン型のナビゲーションを使うことで、非常にコンパクトにまとめられる点にあります。

 

では、早速その作り方なのですが、jqueryが読み込まれていることを前提に、htmlは以下のようにコーディングを行います。

 

dtで囲まれている部分がアコーディオンをスライド開閉させる際のボタンの役割を果たします。
※今回はdl、dt、ddで構成しましたが、これは個人的な好みなので、コードの変更は適応行ってください。

続いてcssを記述します。

 

右端に画像で矢印をつけるためにdtに:afterを指定し、画像を配置しています。
ちなみに背景画像で指定する方がコードは短くできると思います。が、:after使いたくなったので、上記の記述しました(汗)

最後にjavascriptの記述です。

ここはかなりシンプルなんですが、dtがクリック(タップ)されたら処理を実行させています。
ちなみにtoggleClassでナビゲーションが開いた際にdtにactiveクラスを付与し、矢印の画像を変更し、ナビゲーションが閉じれば、元に戻ります。
next().slideToggleでクリックされたdtの次の要素にあたるddがスライドし、開きます。

HTMLの構成が変わった場合は、ある程度工夫は必要なのですが、非常に簡易的に実装はできますね。

それでは、この辺に失礼しますm(。。)m
サンプルはコチラ

スクロールに追随するナビゲーションの作成

-
カテゴリー:
javascript 

新年1発目のサンプルになります。

画面をスクロールするとヘッダーやナビゲーションが画面上部からニョキッと現れてそのままスクロールに追随する演出を最近よく見るのですが、簡単なサンプルを作ってみたいと思います。

と、言っても実際はほぼjavascriptのみで実装しますので、簡単なのですが、まずjqueryを使用しますので、サイトよりダウンロードを行い、外部ファイルとして読み込みます。

次にスクロールされた際にナビゲーションを追随させるためのjavascriptを書きます。

ヘッダーとナビゲーションの高さ分スクロールされるとナビゲーションにpositionのfixedを設定し、一度画面外に配置します。
次に画面上部からニョキッと現れるようにアニメーションさせています。

画面の上部にスクロールされ、元々のナビゲーションの位置にまで戻るとナビゲーションのpositionをstaticに戻し、完成です。

これを応用させれば、ヘッダー全体をスクロールに追随させたりすることができます。

サンプルはこちら

 

 

jqueryで外部JSONファイルを読み込む

-
カテゴリー:
javascript 

たまにボタンを押したりした際に、クリックなどのイベントをトリガーにして外部の情報を読み込んだりすることがあるのですが、そんな時に使えるjqueryの外部JSONファイルの読み込み処理のご紹介です。

今回はサンプルなので、非常に単純な記述なのですが、商品Aと商品Bの情報が記載JSONファイルを読み込みます。

まず、HTMLの記述です。

もちろんサンプルなので、上記のHTMLはかなり適当です。
id=”product_a”に商品Aの情報を挿入し、id=”product_b”には商品Bの情報を挿入します。

続いて外部JSONファイル。※今回はtest.jsonとしました。

最後にjavascriptの記述です。

$.getJSONでjsonファイルの情報を取得し、完了したらdataにその情報が代入されます。

dataに代入された情報は配列で取り出すことができるので、一つ一つ取り出し、id=”product_a”とid=”product_b”に挿入します。
※for文を使った方が効率的なのですが、今回はサンプルのため使っていません。

 
サンプルはこちらこちら