サイトデザインの変更、jQueryでアコーディオン

カテゴリー:  Tech タグ:  web/tech

以前からこのサイト1では、”@Style Bootstrap Theme for Movable Type“というテーマを使用させていただいていました。Bootstrapをベースにしておりレスポンシブなサイトを簡単に実現できます。これに、少しだけ変更を加えていました。

だんだん変更が億劫になり、同じ作者さんのアットスタイルから有料ですが「Movable Type 6 ブログテーマ（テンプレート） Bootstrap 301 スマートフォン・タブレット端末対応」を購入しました。シンプルで気に入っています。時間も節約できました。

が、デザインが良くなると、ビローンと下に伸びてしまう「月別アーカイブ」が気になり始めました。

節約できた時間で対応してみました（節約になっていないという気もするが）。サイドの月別アーカイブのところをみていただくとわかりますが、年ごとに折りたたんで表示して場所を取らないようにしました。jQueryを使って俗に言うアコーディオン型のメニューにしています。

詳細は続きを。

まず、HTMLヘッダーでjQueryを読み込みます。今回は、1.11.3を使っています。

そして月別アーカイブのウェジットを変更します。デフォルトでは単純なリストになっているので、定義リストに変更します。そして、スタイルをつけるためのクラスをつけておきます。

<mt:IfArchiveTypeEnabled archive_type=\"Monthly\">
<mt:ArchiveList archive_type=\"Monthly\">
<mt:ArchiveListHeader>
<ul class=\"nav nav-list\">
<li class=\"nav-header\"><i class=\"fa fa-folder-open\"></i>&nbsp;Archives</li>
</ul>
<dl class=\"acArchiveList\">
<mt:SetVar name=\"year\" value=\"9999\" />
<mt:SetVar name=\"first\" value=\"y\" />
</mt:ArchiveListHeader>
<mt:ArchiveDate format=\"%Y年\" setvar=\"current_year\" />
<mt:If name=\"current_year\" ne=\"$year\">
  <mt:If name=\"first\" eq=\"y\">
     <mt:SetVar name=\"first\" value=\"n\" />
  <mt:Else>
  </ul></dd>
  </mt:If>
  <dt class=\"toggle\">&nbsp;<mt:GetVar name=\"current_year\" /></dt>
  <mt:getVar name=\"current_year\" setvar=\"year\" />
  <dd><ul>
 </mt:If>
<li><a href=\"<$mt:ArchiveLink$>\"><$mt:ArchiveDate format=\"%m月\"$> [<$mt:ArchiveCount$>]</a></li>
<mt:ArchiveListFooter>
  </ul></dd>
</dl>
</mt:ArchiveListFooter>
</mt:ArchiveList>
</mt:IfArchiveTypeEnabled>
<hr>

そして、スタイルシートは以下のようにしています。

.acArchiveList {
  padding-left:15px;
}
.acArchiveList .toggle {
    padding-left: 15px;
    display:block;
    cursor: pointer;
    -webkit-transition: .2s ease-in-out;
}
.acArchiveList .toggle:before {
      font-family:FontAwesome;
      content:"\f114";
}
.acArchiveList .open:before {
      font-family:FontAwesome;
      content:"\f115";
}
.acArchiveList dd {
    padding-left:  45px;
    display:none;
}

最後に、JavaScriptです。

  $(function(){
        $(".acArchiveList .toggle").on("click", function() {
            $(this).next().slideToggle("200");
            $(this).toggleClass("open");
        });
    });

見やすくするよう分けて掲載しましたが、実際には「月別アーカイブ」のウェジットの中に何もかもブチ込んでいます。

  1. この時はMovable Typeで運営していました。 ↩

コメント

Comments powered by Disqus