ゴールデンウィーク期間中の休業日のお知らせ
-
- カテゴリー：
- お知らせ
2014年5月3日(土)から2014年5月6日(火)のゴールデンウィーク期間中は休業とさせていただきます。
ご不便をおかけしますが、何卒ご理解いただきますようお願いいたします。
消費税率変更のお知らせ
-
- カテゴリー：
- お知らせ
jqueryを使ったスマホでよく使うアコーディオン型ナビゲーションの作り方
-
- カテゴリー：
- javascript
所得税めっちゃもってかれたぁーーーー！
かなり久々の更新となってしまいました。（汗）
今日は、jqueryを使ったスマホでよく使うアコーディオン型ナビゲーションの作り方をご紹介したいと思います。
スマホ用のサイトですとよくフッター辺りに使われているのを目にします。
このアコーディオン型のナビゲーションのメリットは、項目などが多い場合、アコーディオン型のナビゲーションを使うことで、非常にコンパクトにまとめられる点にあります。
では、早速その作り方なのですが、jqueryが読み込まれていることを前提に、htmlは以下のようにコーディングを行います。
|
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 |
<nav id="navi"> <dl> <dt>メニュー1</dt> <dd> <ul> <li><a href="#">リンクテキスト1</a></li> <li><a href="#">リンクテキスト2</a></li> <li><a href="#">リンクテキスト3</a></li> <li><a href="#">リンクテキスト4</a></li> </ul> </dd> <dt>メニュー2</dt> <dd> <ul> <li><a href="#">リンクテキスト5</a></li> <li><a href="#">リンクテキスト6</a></li> <li><a href="#">リンクテキスト7</a></li> <li><a href="#">リンクテキスト8</a></li> </ul> </dd> <dt>メニュー3</dt> <dd> <ul> <li><a href="#">リンクテキスト9</a></li> <li><a href="#">リンクテキスト10</a></li> <li><a href="#">リンクテキスト11</a></li> <li><a href="#">リンクテキスト12</a></li> </ul> </dd> <dt>メニュー4</dt> <dd> <ul> <li><a href="#">リンクテキスト13</a></li> <li><a href="#">リンクテキスト14</a></li> <li><a href="#">リンクテキスト15</a></li> <li><a href="#">リンクテキスト16</a></li> </ul> </dd> <dt>メニュー5</dt> <dd> <ul> <li><a href="#">リンクテキスト17</a></li> <li><a href="#">リンクテキスト18</a></li> <li><a href="#">リンクテキスト19</a></li> <li><a href="#">リンクテキスト20</a></li> </ul> </dd> <dt>メニュー6</dt> <dd> <ul> <li><a href="#">リンクテキスト21</a></li> <li><a href="#">リンクテキスト22</a></li> <li><a href="#">リンクテキスト23</a></li> <li><a href="#">リンクテキスト24</a></li> </ul> </dd> </dl> </nav> |
dtで囲まれている部分がアコーディオンをスライド開閉させる際のボタンの役割を果たします。
※今回はdl、dt、ddで構成しましたが、これは個人的な好みなので、コードの変更は適応行ってください。
続いて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 |
#navi { width: 100%; } #navi dl { border-top: 1px solid #999999; } #navi dt { padding: 0 10px; height: 36px; line-height: 36px; font-size: 14px; color: #ffffff; background: #333333; border-bottom: 1px solid #999999; position: relative; } #navi dt:after { width: 16px; height: 16px; display: block; content: url("common/images/arrow.png"); position: absolute; top: 0; right: 5px; } #navi dt.active:after { content: url("common/images/arrow-active.png"); } #navi dd { color: #333333; background: #cccccc; display: none; } #navi dd li { border-bottom: 1px solid #aaaaaa; } #navi dd li:last-child { border-bottom: none; } #navi dd li a { padding: 0 20px; height: 28px; line-height: 28px; font-size: 14px; color: #333333; background: #cccccc; display: block; } |
右端に画像で矢印をつけるためにdtに:afterを指定し、画像を配置しています。
ちなみに背景画像で指定する方がコードは短くできると思います。が、:after使いたくなったので、上記の記述しました(汗)
最後にjavascriptの記述です。
|
1 2 3 4 5 6 7 8 |
$(function() { $("#navi dt").on("click", function(e) { $(this).toggleClass("active"); $(this).next().slideToggle("fast"); }); }); |
ここはかなりシンプルなんですが、dtがクリック(タップ)されたら処理を実行させています。
ちなみにtoggleClassでナビゲーションが開いた際にdtにactiveクラスを付与し、矢印の画像を変更し、ナビゲーションが閉じれば、元に戻ります。
next().slideToggleでクリックされたdtの次の要素にあたるddがスライドし、開きます。
HTMLの構成が変わった場合は、ある程度工夫は必要なのですが、非常に簡易的に実装はできますね。
それでは、この辺に失礼しますｍ(。。)ｍ
サンプルはコチラ
