グローバルナビ
グローバルナビのレイアウトについての章です。
コンテンツの包括的なラッピング
ID「body_inner01」直下に以下を参考に記述してください。
（※関連ファイル：jquery-3.4.1.min.js、globalnavigation.js）
<body>
<div id="body_inner01" class="d-flex flex-column position-relative">
<header id="hd01">
<div class="hd01_inner01">
<div class="mx-auto d-flex justify-content-center align-items-center position-relative hd01_inner02">
<span class="position-absolute d-block btn btn02"><img src="../apl/sp/images/common/hd01_btn04.png" alt="menu" class="d-block w-100 h-auto"></span>
</div><!-- /.hd01_inner01 -->
</div><!-- /.hd01_inner01 -->
</header>
<div id="modal" class="position-fixed">
<div class="modal_inner01">
<div class="modal_inner02">
<span class="modal_close"><img src="./apl/sp/images/common/gnav_ico08.png" alt="閉じる" class="d-block w-100 h-auto"></span>
<div class="t-gnav-header">
<a href="./" class="ci01"><img src="./apl/sp/images/common/hd01_img01.png?v=210610-1" alt="タフ・つながるクルマの保険" class="d-block w-100 h-auto"></a>
</div><!-- /.t-gnav-header -->
<div class="t-list-gnav">
<div class="t-list-gnav-group">
<div class="t-list-gnav-group-top">
<a href="./" class="t-list-gnav-group-top-item-1">
<span class="t-list-gnav-group-top-item-image"><img src="./apl/sp/images/common/gnav_title01.png" alt="TOP"></span>
<span class="t-list-gnav-group-top-item-title">トップへ戻る</span>
</a>
</div>
</div><!-- /.t-list-gnav-group -->
<div class="t-list-gnav-group">
<div class="t-list-gnav-group-header">
<div class="t-list-gnav-group-header-title">運転を確認する</div>
</div><!-- /.t-list-gnav-group-header -->
<div class="t-list-gnav-group-first">
<a href="./drive/" class="t-list-gnav-group-first-item-1">
<span class="t-list-gnav-group-first-item-image"><img src="./apl/sp/images/common/gnav_first_title01.png" alt="Drive Report"></span>
<span class="t-list-gnav-group-first-item-text">ドライブレポート</span>
</a>
<a href="./monthly/" class="t-list-gnav-group-first-item-2">
<span class="t-list-gnav-group-first-item-image"><img src="./apl/sp/images/common/gnav_first_title02.png" alt="Monthly Report"></span>
<span class="t-list-gnav-group-first-item-text">マンスリーレポート</span>
</a>
</div><!-- /.t-list-gnav-group-first -->
</div><!-- /.t-list-gnav-group -->
<div class="t-list-gnav-group">
<div class="t-list-gnav-group-header">
<div class="t-list-gnav-group-header-title">お問合わせ</div>
</div><!-- /.t-list-gnav-group-header -->
<div class="t-list-gnav-group-second">
<a href="./faq/" class="t-list-gnav-group-second-item-1">
<span class="t-list-gnav-group-second-item-image"><img src="./apl/sp/images/common/gnav_second_title01.png" alt="FAQ"></span>
<span class="t-list-gnav-group-second-item-text">よくあるご質問</span>
</a>
<a href="./contact/" class="t-list-gnav-group-second-item-2">
<span class="t-list-gnav-group-second-item-image"><img src="./apl/sp/images/common/gnav_second_title02.png" alt="Contact"></span>
<span class="t-list-gnav-group-second-item-text">お問合わせ先</span>
</a>
</div><!-- /.t-list-gnav-group-second -->
</div><!-- /.t-list-gnav-group -->
<div class="t-list-gnav-group">
<div class="t-list-gnav-group-button">
<div class="t-list-gnav-group-button-adjust">
<a href="./information/" class="t-list-gnav-group-button-adjust-item">お知らせ</a>
</div><!-- /.t-list-gnav-group-button-adjust -->
</div><!-- /.t-list-gnav-group-button -->
</div><!-- /.t-list-gnav-group -->
<div class="t-list-gnav-group">
<div class="t-list-gnav-group-sub">
<a href="javascript:void(0);" class="t-list-gnav-group-sub-item-1">
<span class="t-list-gnav-group-sub-item-title">表示中のご契約に関する設定</span>
</a>
<a href="javascript:void(0);" class="t-list-gnav-group-sub-item-2">
<span class="t-list-gnav-group-sub-item-title">表示するご契約の変更</span>
</a>
</div><!-- /.t-list-gnav-group-sub -->
</div><!-- /.t-list-gnav-group -->
</div><!-- /.t-list-gnav -->
</div><!-- /.modal_inner02 -->
</div><!-- /.modal_inner01 -->
</div><!-- /#modal -->
</div><!-- /#body_inner01 -->
</body>
ドライブレポート・マンスリーレポートの非活性化
ドライブレポート・マンスリーレポートの非活性化をする際は、下記を参考に「aタグ」を「divタグ」に変更してください。
<body>
<div id="body_inner01" class="d-flex flex-column position-relative">
<header id="hd01">
<div class="hd01_inner01">
<div class="mx-auto d-flex justify-content-center align-items-center position-relative hd01_inner02">
<span class="position-absolute d-block btn btn02"><img src="../apl/sp/images/common/hd01_btn04.png" alt="menu" class="d-block w-100 h-auto"></span>
</div><!-- /.hd01_inner01 -->
</div><!-- /.hd01_inner01 -->
</header>
<div id="body_inner01" class="modal_fix">
<div id="modal" class="position-fixed">
<div class="modal_inner01">
<div class="modal_inner02">
<span class="modal_close"><img src="./apl/sp/images/common/gnav_ico08.png" alt="閉じる" class="d-block w-100 h-auto"></span>
<div class="t-gnav-header">
<a href="./" class="ci01"><img src="./apl/sp/images/common/hd01_img01.png?v=210610-1" alt="タフ・つながるクルマの保険" class="d-block w-100 h-auto"></a>
</div><!-- /.t-gnav-header -->
<div class="t-list-gnav">
<div class="t-list-gnav-group">
<div class="t-list-gnav-group-top">
<a href="./" class="t-list-gnav-group-top-item-1">
<span class="t-list-gnav-group-top-item-image"><img src="./apl/sp/images/common/gnav_title01.png" alt="TOP"></span>
<span class="t-list-gnav-group-top-item-title">トップへ戻る</span>
</a>
</div>
</div><!-- /.t-list-gnav-group -->
<div class="t-list-gnav-group">
<div class="t-list-gnav-group-header">
<div class="t-list-gnav-group-header-title">運転を確認する</div>
</div><!-- /.t-list-gnav-group-header -->
<div class="t-list-gnav-group-first">
<div class="t-list-gnav-group-first-item-1">
<span class="t-list-gnav-group-first-item-image"><img src="./apl/sp/images/common/gnav_first_title01.png" alt="Drive Report"></span>
<span class="t-list-gnav-group-first-item-text">ドライブレポート</span>
</div>
<div class="t-list-gnav-group-first-item-2">
<span class="t-list-gnav-group-first-item-image"><img src="./apl/sp/images/common/gnav_first_title02.png" alt="Monthly Report"></span>
<span class="t-list-gnav-group-first-item-text">マンスリーレポート</span>
</div>
<a href="./driving_score/" class="t-list-gnav-group-first-item-3">
<span class="t-list-gnav-group-first-item-image"><img src="./apl/sp/images/common/gnav_first_title03.png" alt="Driving Score"></span>
<span class="t-list-gnav-group-first-item-text">安全運転スコア(累計)</span>
</a>
</div><!-- /.t-list-gnav-group-first -->
</div><!-- /.t-list-gnav-group -->
<div class="t-list-gnav-group">
<div class="t-list-gnav-group-header">
<div class="t-list-gnav-group-header-title">お問合わせ</div>
</div><!-- /.t-list-gnav-group-header -->
<div class="t-list-gnav-group-second">
<a href="./faq/" class="t-list-gnav-group-second-item-1">
<span class="t-list-gnav-group-second-item-image"><img src="./apl/sp/images/common/gnav_second_title01.png" alt="FAQ"></span>
<span class="t-list-gnav-group-second-item-text">よくあるご質問</span>
</a>
<a href="./contact/" class="t-list-gnav-group-second-item-2">
<span class="t-list-gnav-group-second-item-image"><img src="./apl/sp/images/common/gnav_second_title02.png" alt="Contact"></span>
<span class="t-list-gnav-group-second-item-text">お問合わせ先</span>
</a>
</div><!-- /.t-list-gnav-group-second -->
</div><!-- /.t-list-gnav-group -->
<div class="t-list-gnav-group">
<div class="t-list-gnav-group-button">
<div class="t-list-gnav-group-button-adjust">
<a href="./information/" class="t-list-gnav-group-button-adjust-item">お知らせ</a>
</div><!-- /.t-list-gnav-group-button-adjust -->
</div><!-- /.t-list-gnav-group-button -->
</div><!-- /.t-list-gnav-group -->
<div class="t-list-gnav-group">
<div class="t-list-gnav-group-sub">
<a href="javascript:void(0);" class="t-list-gnav-group-sub-item-1">
<span class="t-list-gnav-group-sub-item-title">表示中のご契約に関する設定</span>
</a>
<a href="javascript:void(0);" class="t-list-gnav-group-sub-item-2">
<span class="t-list-gnav-group-sub-item-title">表示するご契約の変更</span>
</a>
</div><!-- /.t-list-gnav-group-sub -->
</div><!-- /.t-list-gnav-group -->
</div><!-- /.t-list-gnav -->
</div><!-- /.modal_inner02 -->
</div><!-- /.modal_inner01 -->
</div><!-- /#modal -->
</div><!-- /#body_inner01 -->
</div><!-- /#body_inner01 -->
</body>