• nav

  • ナビゲーションに関する説明です。
  • nav

グローバルナビゲーションにご利用ください。
nav-mainはページ内にそのまま複数配置する事ができます。
子階層を開閉するトリガーはhtmlソースのクラス名 js-nav-main-parent* で、子階層となるクラス名は js-nav-main-child* になります。これらクラス名の数値を合わせる事で1セットとなります。

オプションとして、htmlソースのクラス名 js-nav-main-parent* の配下に js-ic-arrow を付与し、その配下に *-down *-up を含むクラス名があると開閉に伴いクラス名を書き換えてくれます。
オプションとして、htmlソースのクラス名 js-nav-main-parent* の配下に js-ic-folder を付与し、その配下に *-folder-open *-folder を含むクラス名があると開閉に伴いクラス名を書き換えてくれます。
オプションとして、htmlソースのクラス名 js-nav-main-parent* の配下に js-ic-folder-arrow を付与し、その配下に *-down *-right を含むクラス名があると開閉に伴いクラス名を書き換えてくれます。

  • nav-block

ページ内にあるコンテンツのナビゲーションにご利用ください。
  • ナビゲーションのコンテンツはここ
nav-blockはページ内に複数配置する事ができます。htmlソースのクラス名 js-nav-block-select0 がナビゲーションのボタン、 js-nav-block-content0 が内容に該当します。これらの数値を合わせる事で1セットになります。複数配置する場合はこれらの数値を変更する事により設置する事ができます。
ナビゲーションのボタンは、htmlソースのクラス名 is-col4 の数値を変更する事で、ボタン数に合わせて均等に表示されます。 2~10 [数値]

  • nav-slide

下へスライド表示するナビゲーションです。本ページのようにグローバルヘッダーが一定幅になると表示が困難になるようなデザインの場合、このヘッダーの変わりに内容をスライド表示してくれます。
表示後ヘッダー、フッター以外をクリックする事で非表示になります。これはページ内のクラス名 js-page-contents をトリガーとしています。
window幅によりコンテンツを表示・非表示させる際は こちら をご覧ください。

  • aside

本ページの左グローバルメニューを囲っています。asideはレスポンシブ対応されており、一定幅から非表示になります。非表示になるとトリガーが画面上部左端に表示され、トリガーを押下する事によりasideがスライド表示されます。
表示後ヘッダー、フッター以外をクリックする事で非表示になります。これはページ内のクラス名 js-page-contents をトリガーとしています。
window幅によりコンテンツを表示・非表示させる際は こちら をご覧ください。