読者です 読者をやめる 読者になる 読者になる

Still Life

残念IT系母ちゃん。旦那さん、娘1歳、猫の4人暮らし。

jQueryで縦にドロップダウンするメニュー

f:id:Aodrey:20120920155831p:image

jQueryは怖くない!

JavaScriptを、腰を据えてきちんと勉強していないわたし。ググリコピペで押し切ってきながら、いつかはちゃんとしようとは思っていたという状態でした。そのうちAjaxが流行り、jQueryが標準になり・・・とどんどんついていけない状態に。
でもjQueryはそもそもリッチな画面を簡単に実装できるように工夫してくれているわけなので、イチからJavaScriptと格闘するよりも全然とっつきやすいハズです。


というわけで、jQueryを始めてみました。


課題:縦にドロップダウンするメニューを作りたい。


最初はまずぐぐり、jQueryそのものというよりも、縦にドロップダウンする(アコーディオンというらしい?)実装をすでにしているサイトのソースをそのまま貼りつけて、スタイルなどをいじっていました。
でもちょっとしたカスタマイズがうまくいかず、時間のかかったコード量のやたら多いシロモノに。
一応課題を満たしたものにはなりましたが、一層「jQueryは難しい」という思い込みが強くなってしまいました。
この原因は、すごくかっこいい動きを実現するためにか、プラグイン的なコードを提供してくれているサイトばかり見ていたということがあります。このため、自分の思い通りにするために、jQueryをカスタマイズするというよりも、プラグインのコードを読んでカスタマイズする必要があったわけです。当然難しくなるわけです。


なので、今回は本家のjQueryだけから同じ課題をクリアしてみることにしました。
結果から言いますと、たった半日でできちゃいました。最初の失敗はたぶん1週間くらいかけてるのに・・・。


そこでこの感動を記事にしたくなりました。「jQueryって意外と簡単だよ」ってコトを、過去のわたしのような方に向けて訴えたいです。

どうやってとりかかるか

jQueryと検索して、本家の次に出てくるサイトといえば、「jQuery日本語リファレンス」(http://semooh.jp/jquery/)です。
わたしもまだ初心者なので、ココしか見ていませんが、ココでじゅうぶんだと思います。


まずは基本の「jQueryを使い始めるには」のページにしたがってjQueryを保存します。また、HTMLのどこに記述すればいいかもこのページで解説してくれています。


次に見るべきページは、同じく基本の「セレクターで要素を選択する」です。
セレクターの書き方は、JavaScriptのdocument.Element系やスタイルシートですでにおなじみと思ってしまいますが、jQueryではさらに強力になっているので、思い通りの要素を楽に選択できます。
「リッチな動きまでスタイルシートを書くみたいに書けるんだね!」って風に思えます。


そしていよいよ実現したい動きの書き方をAPIから探します。
「アルファベット順APIリスト」から、やりたい動きっぽいキーワードで検索すると、意外とあっさり探せます。今回の場合は、drop(down)で検索。・・・ない。slide(down)で検索。ありました!
これは、セレクタの書き方でも使えます。次の要素はnextだったり。カタログをめくるようにAPIを眺めよう!
jQuery日本語リファレンスでは、必ずサンプルがついているので、本当に助かります。


そういうわけでできたのが、このメニューです。

<html lang="ja">

  <head>
    <title>縦にドロップダウンするメニュー</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <!-- css -->
    <style type="text/css">
      <!--
        ul {
          display:block;
          list-style-type: none;
          margin:0;
          padding:0;
        }
        a {
          color: #d5e0eb;
          text-decoration: none;
        }
        li{
          padding:5px 0 0 18px;/* 上 右 下 左 */
          height:23px;
          background: #15516c;
          width:130px;
          color: #d5e0eb;
          text-align:center;
        }
        ul>li.current {
          background: #dfdebd;
          color: #8f2632;
          padding:3px 0 0 3px;/* 上 右 下 左 */
          border-left:solid 15px #8f2632;
          border-bottom:solid 2px #7b7a59;
        }
        li:hover{
          background: #dfdebd;
          color: #8f2632;
          padding:3px 0 0 13px;/* 上 右 下 左 */
          border-left:solid 5px #8f2632;
          border-bottom:solid 2px #7b7a59;
        }
      -->
    </style>

    <!-- jQuery -->
    <script type="text/javascript" src="js/jquery-1.8.1.js"></script>
    <script type="text/javascript">
      <!--
        //スライドダウンメニュー
        $(document).ready(function(){
          //最初は閉じておく
          $('div > ul').slideToggle(0);
          //クリックした場合
          $('div > li').click(function(){
            //スライドダウン
            $(this).parent().find('ul').slideToggle();
            return false;//最初の要素のみ
          });
        });
      //-->
    </script>
  </head>
  <body>
    <ul>
      <li class="current">縦にドロップダウン</li>
      <a href="#"><li>ちーが来る前</li></a>
      <a href="#"><li>ちーとの出会い</li></a>

      <div>
      <li>ちーのこと</li>
        <ul>
          <a href="#"><li>好きなごはん</li></a>
          <a href="#"><li>ちーの一日</li></a>
          <a href="#"><li>大好きおもちゃ</li></a>
          <a href="#"><li>これは不満!</li></a>
        </ul>
      </div>

      <div>
      <li>ちーと病院</li>
        <ul>
          <a href="#"><li>ちーのカルテ</li></a>
        </ul>
      </div>
      <a href="#"><li>ちーのお財布</li></a>
      <a href="#"><li>ちーとテレビ</li></a>
      <div>
      <li>ちーのレシピ</li>
        <ul>
          <a href="#"><li>カリカリトッピング</li></a>
          <a href="#"><li>塩抜きにぼし</li></a>
          <a href="#"><li>猫草おにぎり</li></a>
            <div>
            <li>スペシャルおじや</li>
              <ul>
                <a href="#"><li>材料</li></a>
                <a href="#"><li>手順</li></a>
                <a href="#"><li>バリエ</li></a>
              </ul>
            </div>
        </ul>
      </div>
    </ul>
  </body>
</html>

スライドさせたいメニューはリストタグで書いています。リストをマウスオーバーすると色が変わるのはスタイルシートの効果です。
メニューを想定しているので、別ページを指定したい部分だけaタグを入れています。
リストをクリックしたときにドロップダウンさせたい部分全体をdivブロックにしています。
jQueryでは、slideToggleを使っています。クリックされたときに、slideToggleさせたいクラスを指定すれば完了なわけです。


問題としては、2階層目をクリックすると一緒に3階層目も開いた状態で開くこと。
今回わたしが実装したかったページは、3階層目がないので、今日のところはここまで。


ダウンロードはこちら。slidedown.zip 直