ナビゲーション : MT7 Styleguide

プロダクトヘッダー

ダッシュボードやシングルカラムレイアウトのときに実装するシンプルなヘッダー要素 .mt-productHeader。右側の絡むには情報要素が入れることができるようになっています。

<div class="mt-productHeader">
  <div class="col-10">
    <h1 class="mt-productHeader__logo btn-group">
      <a href="../" data-role="home"><img src="../images/logo-mark.svg" alt="Movable Type" width="36" height="36"></a>
    </h1>
  </div>
  <div class="col">
    <div class="row justify-content-end">
      <div class="col align-self-center">

      </div>
    </div>
  </div>
</div>

プライマリナビゲーション

モバイル表示時は表示されません。

リンクに .selected を記述すると、選択状態になります。トグル操作のリンクの href、aria-controls、サブナビゲーションの入れ子になっている id の値は、セットで同じの値にしてください。

ナビゲーションに追加するアイコンは SVG タグを書き込みますが、その際 title の値は空で大丈夫です。

MTユーザーが作成した新しいコンテンツタイプは、#ic_boxアイコンを添えて表示します。

Rebulid View Site

Sites
- Manage
- New
Entries
- Manage
- New
Content Data
- Manage
- New
Assets
- Manage
Content Types
- Manage
- New
- Boilerplate
Users
- Manage
- New
Groups
- Manage
- New
- Members
Roles
- Manage
- New
- Associations
Feedback
- Manage
Design
Custom Fields
- Manage
- New
Category Sets
- Manage
- New
Tags
- Manage
- New
Filters
- Manage
- New
Settings
- General
- Users
- Web Services
- Plugins
Tools

メニューを閉じる

Dashboard System

// 通常ナビゲーション
<div class="mt-primaryNavigation">
  <div class="mt-primaryNavigation__container">
    <div class="mt-primaryNavigation__header">
      <div class="col-10"><h1 class="mt-productHeader__logo"><img src="../images/logo-mark.svg" alt="Movable Type" width="32" height="32"><span class="mt-productHeader__name">サイト名</span></h1></div>
      <div class="col-2"><a class="mt-primaryNavigation__siteMenu" href="#sites"><svg role="img" class="mt-icon"><title>Menu</title><use xlink:href="../images/sprite.svg#ic_menu"/></svg></a></div>
    </div>
    <div class="mt-primaryNavigation__control">
      <a class="btn btn-default"><svg role="img" class="mt-icon"><use xlink:href="../images/sprite.svg#ic_build" /></svg>Rebulid</a>
      <a class="btn btn-default"><svg role="img" class="mt-icon"><use xlink:href="../images/sprite.svg#ic_permalink" /></svg>View Site</a>
    </div>
    <div class="mt-primaryNavigation__content">
      <ul id="primaryNavigation" class="mt-primaryNavigation__list" data-children=".item">
        <li class="item mt-primaryNavigation__item">
          <a data-toggle="collapse" data-parent="#primaryNavigation" href="#primayNavigation-item1" aria-expanded="false" aria-controls="primayNavigation-item1"><svg role="img" class="mt-icon"><use xlink:href="../images/sprite.svg#ic_sites" /></svg>Sites</a>
          <div id="primayNavigation-item1" class="collapse" role="tabpanel">
            <ul class="mt-primaryNavigation__child">
              <li><a href="#">Manage</a></li>
              <li><a href="#">New</a></li>
            </ul>
          </div>
        </li>
        <li class="item mt-primaryNavigation__item">
          <a data-toggle="collapse" data-parent="#primaryNavigation" href="#primayNavigation-item2" aria-expanded="false" aria-controls="primayNavigation-item2"><svg role="img" class="mt-icon"><use xlink:href="../images/sprite.svg#ic_contentdata" /></svg>Entries</a>
          <div id="primayNavigation-item2" class="collapse" role="tabpanel">
            <ul class="mt-primaryNavigation__child">
              <li><a href="#">Manage</a></li>
              <li><a href="#">New</a></li>
              <li><a href="#">Boilerplate</a></li>
              <li><a href="#">Categories</a></li>
            </ul>
          </div>
        </li>
        ...
      </ul>
    </div>
    <div class="mt-primaryNavigation__info">
      <button class="mt-primaryNavigation__footer dropdown-toggle" type="button" data-toggle="dropdown" id="userDropdownMenu" aria-haspopup="true" aria-expanded="false"><img src="../images/user-default.svg" alt="" width="32" height="32" class="mr-3">ユーザー名</button>
    </div>
  </div>
</div>

// サイトリストナビゲーション
<div class="mt-primaryNavigation--sites" id="siteDropdown">
  <div class="mt-primaryNavigation__container">
    <div class="mt-primaryNavigation__header--invert">
      <div class="col-10"><h1 class="mt-productHeader__logo"><img src="../images/logo-mark-mono.svg" alt="Movable Type" width="32" height="32"><span class="mt-productHeader__name">サイト名</span></h1></div>
      <div class="col-2"><a class="mt-primaryNavigation__siteMenu" href="#sites"><svg role="img" class="mt-icon"><title>Menu</title><use xlink:href="../images/sprite.svg#ic_menu"/></svg></a></div>
    </div>
    <div class="mt-primaryNavigation__control--invert">
      <a href="#" class="btn btn-default"><svg role="img" class="mt-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../images/sprite.svg#ic_dashboard"></use></svg>Dashboard</a>
      <a href="#" class="btn btn-default"><svg role="img" class="mt-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../images/sprite.svg#ic_system"></use></svg>System</a>
    </div>
    <div class="mt-primaryNavigation__content">
      <ul class="mt-primaryNavigation__sites">
        <li><a href="#" class="text-light">Site A</a></li>
          ...
      </ul>
    </div>
    <div class="mt-primaryNavigation__info">
      <button class="mt-primaryNavigation__footer dropdown-toggle" type="button" data-toggle="dropdown" id="userDropdownMenu" aria-haspopup="true" aria-expanded="false"><img src="../images/user-default.svg" alt="" width="32" height="32" class="mr-3">ユーザー名</button>
    </div>
  </div>
</div>
</div>

PC表示時は表示されません。

.mt-mobileGlobalMenu__menuActions とドロップダウン内の「ダッシュボード」は、ユーザーダッシュボードでは表示されません。

.mt-mobileGlobalMenu_dropdownMenu の横幅は、JavaScript で設定する必要があります。画面回転時にも変更が必要です。

表示の都合上、ここでは使用していませんが、.mt-mobileGlobalMenu でモバイル表示時のみ表示させるようにしています。

.mt-mobileGlobalMenu__name 内のカレントサイト名（親サイトではない方）の <span> には .currentSite をつける必要があります。

ダッシュボード

First Website > Blog 1



    // ユーザーダッシュボード（ドロップダウンは省略）
    <div class="row mb-5" style="max-width: 500px;">
      <div class="mt-mobileGlobalMenu__dropdown">
        <a class="mt-mobileGlobalMenu__dropdownMenuButton" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">
          <svg role="img" class="mt-icon--inverse">
            <title>Open global menu</title>
            <use xlink:href="../images/sprite.svg#ic_menu"></use>
          </svg>
        </a>
      </div>
      <div class="mt-mobileGlobalMenu__name--invert">
        <span>ダッシュボード</span>
      </div>
    </div>

    // サイトダッシュボード
    <div class="row" style="max-width: 500px;">
      <div id="mobileGlobalMenu__dropdown" class="mt-mobileGlobalMenu__dropdown">
        <a id="mobileGlobalMenu__dropdownMenuButton" class="mt-mobileGlobalMenu__dropdownMenuButton" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">
          <svg role="img" class="mt-icon--inverse">
            <title>Open global menu</title>
            <use xlink:href="../images/sprite.svg#ic_menu"></use>
          </svg>
        </a>
        <div id="mobileGlobalMenu__dropdownMenu" class="mt-mobileGlobalMenu__dropdownMenu dropdown-menu" aria-labelledby="mobileGlobalMenu__dropdownMenuButton">
          <ul>
            <li class="mt-mobileGlobalMenu__menu--dashboard">
              <a href="#">
                <svg role="img" class="mt-icon--inverse">
                  <title>Dashboard</title>
                  <use xlink:href="../images/sprite.svg#ic_dashboard"></use>
                </svg>
                ダッシュボード
              </a>
            </li>
            <li class="mt-mobileGlobalMenu__menu--label">
              <span>
                サイト
              </span>
            </li>
            <li class="mt-mobileGlobalMenu__menu--site">
              <a href="#">
                First Website
              </a>
            </li>
            <li class="mt-mobileGlobalMenu__menu--childSite">
              <a href="#">
                Blog 1
              </a>
            </li>
            <li class="mt-mobileGlobalMenu__menu--childSite">
              <a href="#">
                Blog 2
              </a>
            </li>
            <li class="mt-mobileGlobalMenu__menu--site">
              <span>
                Website without permission
              </span>
            </li>
            <li class="mt-mobileGlobalMenu__menu--siteSelector">
              <a href="#" class="mt-modal-open" data-mt-modal-large>
                (他のサイトを選択...)
              </a>
            </li>
            <li class="mt-mobileGlobalMenu__menu--siteSelector">
              <a href="#" class="mt-modal-open" data-mt-modal-large>
                (他の子サイトを選択...)
              </a>
            </li>
            <li class="mt-mobileGlobalMenu__menu--username">
              <span>
                <img src="../images/user-default.svg" alt="" width="32" height="32">
                ユーザー名
              </span>
            </li>
            <li class="mt-mobileGlobalMenu__menu--userAction">
              <a href="#">
                サインアウト
              </a>
            </li>
            <li class="mt-mobileGlobalMenu__menu">
              <a href="#">
                PC View
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div id="mobileGlobalMenu__name" class="mt-mobileGlobalMenu__name">
        <span>
          <a href="#">
            First Website
          </a>
        </span>
        <span class="separator">
          &gt;
        </span>
        <span class="currentSite">
          <a href="#">
            Blog 1
          </a>
        </span>
      </div>
      <div id="mobileGlobalMenu__menuActions" class="mt-mobileGlobalMenu__menuActions">
        <a href="#" class="mt-rebuild">
          <svg role="img" class="mt-icon mt-icon--lg">
            <title>再構築</title>
            <use xlink:href="../images/sprite.svg#ic_build"></use>
          </svg>
        </a>
        <a href="#" target="_blank">
          <svg role="img" class="mt-icon mt-icon--lg">
            <title>サイトの表示</title>
            <use xlink:href="../images/sprite.svg#ic_permalink"></use>
          </svg>
        </a>
      </div>
    </div>

    <script>
jQuery('.mt-mobileGlobalMenu__dropdownMenu').on('click', function (e) {
  e.stopPropagation();
});
jQuery(window).on('load resize', function () {
  var $dropdownMenu = jQuery('.mt-mobileGlobalMenu__dropdownMenu');
  var containerWidth = $dropdownMenu.parents('.row').width();
  $dropdownMenu.width(containerWidth * 0.8);
});
    </script>

モバイルプライマリメニュー

PC表示時は表示されません。

サイトスコープでのみ表示され、ユーザーダッシュボードでは表示されません。

下記サンプルでは、display: block !important; を設定して .mt-mobilePrimaryMenu を表示させています。

.mt-mobilePrimaryMenu__dropdownMenu の横幅は、 JavaScript で設定する必要があります。画面回転時にも変更が必要です。

.mt-mobielPrimaryMenu__dropdownMenu の開始位置は、CSS 等で設定する必要があります。

First Website



    <div id="mobilePrimaryMenu" class="mt-mobilePrimaryMenu" style="max-width: 500px; display: block !important;">
      <button id="mobilePrimaryMenu__dropdownMenuButton" class="mt-mobilePrimaryMenu__dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <svg role="img" class="mt-icon">
          <title>Primary menu</title>
          <use xlink:href="../images/sprite.svg#ic_menuhamburger"></use>
        </svg>
      </button>
      <span class="mt-mobilePrimaryMenu__name">
        First Website
      </span>
      <div id="mobilePrimaryMenu__dropdownMenu" class="mt-mobilePrimaryMenu__dropdownMenu dropdown-menu" aria-labelledby="mobilePrimaryMenu__dropdownMenuButton" data-children=".mt-mobilePrimaryMenu__menuItem">
        <ul>
          <li class="mt-mobilePrimaryMenu__menuItem">
            <a data-toggle="collapse" data-parent="#mobilePrimaryMenu" href="#mobilePrimaryMenu__subMenus1" aria-expanded="true" aria-controls="mobilePrimaryMenu__subMenus1">
              <svg role="img" class="mt-icon">
                <title>サイト</title>
                <use xlink:href="../images/sprite.svg#ic_sites"></use>
              </svg>
              サイト
            </a>
          </li>
          <li id="mobilePrimaryMenu__subMenus1" class="collapse show" data-role="tabpanel">
            <ul>
              <li class="mt-mobilePrimaryMenu__menuItem">
                <a href="#">
                  一覧
                </a>
              </li>
            </ul>
          </li>
          <li class="mt-mobilePrimaryMenu__menuItem">
            <a data-toggle="collapse" data-parent="#mobilePrimaryMenu" href="#mobilePrimaryMenu__subMenus2" aria-expanded="true" aria-controls="mobilePrimaryMenu__subMenus2">
              <svg role="img" class="mt-icon">
                <title>コンテンツデータ</title>
                <use xlink:href="../images/sprite.svg#ic_contentdata"></use>
              </svg>
              コンテンツデータ
            </a>
          </li>
          <li id="mobilePrimaryMenu__subMenus2" class="collapse show" data-role="tabpanel">
            <ul>
              <li class="mt-mobilePrimaryMenu__menuItem">
                <a href="#">
                  test
                </a>
              </li>
            </ul>
          </li>
          <li class="mt-mobilePrimaryMenu__menuItem">
            <a data-toggle="collapse" data-parent="#mobilePrimaryMenu" href="#mobilePrimaryMenu__subMenus3" aria-expanded="true" aria-controls="mobilePrimaryMenu__subMenus3">
              <svg role="img" class="mt-icon">
                <title>記事</title>
                <use xlink:href="../images/sprite.svg#ic_contentdata"></use>
              </svg>
              記事
            </a>
          </li>
          <li id="mobilePrimaryMenu__subMenus3" class="collapse show" data-role="tabpanel">
            <ul>
              <li class="mt-mobilePrimaryMenu__menuItem">
                <a href="#">
                  一覧
                </a>
              </li>
              <li class="mt-mobilePrimaryMenu__menuItem">
                <a href="#">
                  新規
                </a>
              </li>
              <li class="mt-mobilePrimaryMenu__menuItem">
                <a href="#">
                  カテゴリ
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>

    <style>
.mt-mobilePrimaryMenu__dropdownMenu {
  top: 48px !important;
}
    </style>

    <script>
jQuery(window).on('load resize', function () {
  var $dropdownMenu = jQuery('.mt-mobilePrimaryMenu__dropdownMenu');
  var containerWidth = $dropdownMenu.parents('.mt-mobilePrimaryMenu').width();
  $dropdownMenu.width(containerWidth * 0.8);
});
jQuery('.mt-mobilePrimaryMenu__dropdownMenu a').on('click', function (e) {
  if (this.dataset.toggle) {
    var collapseId = this.getAttribute('href');
    jQuery(collapseId).collapse('toggle');
  }
  e.stopPropagation();
});
    </script>

ユーザー情報

ユーザーアイコンをクリックすると表示されるパネル。.mt-primaryNavigation__user を記述すると、ドロップダウンのスタイルが上書きされます。

<div class="dropdown-menu dropdown-menu-right show mt-primaryNavigation__user" aria-labelledby="userDropdownMenu" x-placement="top-end">
  <ul>
    <li><a href="#" class="dropdown-item">ユーザー情報</a></li>
    ...
  </ul>
</div>

フッターナビゲーション

モバイル表示時は、 .mt-footer_links, .mt-footer__installedAddons 部分が非表示となり、テキストがセンタリングされます。

<div class="row">
  <div class="mt-footer">
    <ul class="mt-footer__links">
      <li><a href="#">製品情報</a></li>
      <li><a href="#">ドキュメンテーション</a></li>
      <li><a href="#">サポート</a></li>
      <li><a href="#">ユーザーコミュニティ</a></li>
      <li><a href="#">フィードバック</a></li>
    </ul>
    <p>
      <small>
        Copyright © 2001 Six Apart. All Rights Reserved.<br>
        Movable Type r.4210
        <span class="mt-footer__installedAddons">
          with
          <a href="#">Advanced Pack 2.51</a> ,
          <a href="#">Professional Pack 3.01</a> ,
          <a href="#">Sync Pack 2.02</a>
        </span>
  </small>
    </p>
  </div>
</div>

パンくず

モバイル表示時は非表示になります。

<div class="mt-breadcrumb"><a href="#">Home</a><span class="mt-gts">&gt;</span><a href="#">My site A</a><span class="mt-gts">&gt;</span><a href="#">Child Site</a></div>

ナビゲーション