グローバルナビ
グローバルナビのレイアウトについての章です。
コンテンツの包括的なラッピング
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="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="images/common/gnav_ico08.png" alt="閉じる" class="d-block w-100 h-auto"></span>
<a href="" class="ci01"><img src="images/common/hd01_img01.png" alt="タフ・つながるクルマの保険" class="d-block w-100 h-auto"></a>
<div class="t-list-gnav">
<div class="t-list-gnav-group">
<ul class="t-list-gnav-link">
<li class="t-list-gnav-link-top"><a href=""><img src="images/common/gnav_btn01.png" alt="トップへ" class="d-block w-100 h-auto t-gnav-btn-top"></a></li>
</ul>
</div><!-- /.t-list-gnav-group -->
<div class="t-list-gnav-group">
<div class="t-list-gnav-text">
<div class="t-list-gnav-title">運転を確認する</div>
</div><!-- /.t-list-gnav-text -->
<ul class="t-list-gnav-link">
<li class="t-list-gnav-link-item"><a href="drive/"><img src="images/common/gnav_btn02.png" alt="ドライブレポート" class="d-block w-100 h-auto t-gnav-btn-drive"></a></li>
<li class="t-list-gnav-link-item"><a href="monthly/"><img src="images/common/gnav_btn03.png" alt="マンスリーレポート" class="d-block w-100 h-auto t-gnav-btn-monthly"></a></li>
</ul>
</div><!-- /.t-list-gnav-group -->
<div class="t-list-gnav-group">
<div class="t-list-gnav-text">
<div class="t-list-gnav-title">設定を変更する</div>
<!-- /.t-list-gnav-text --></div>
<ul class="t-list-gnav-link">
<li class="t-list-gnav-link-item"><a href="javascript: void(0);"><img src="images/common/gnav_btn04.png" alt="メールアドレス変更" class="d-block w-100 h-auto t-gnav-btn-mail"></a></li>
<li class="t-list-gnav-link-item"><a href="javascript: void(0);"><img src="images/common/gnav_btn05.png" alt="パスワード変更" class="d-block w-100 h-auto t-gnav-btn-password"></a></li>
<li class="t-list-gnav-link-item"><a href="setting/"><img src="images/common/gnav_btn06.png" alt="各種設定" class="d-block w-100 h-auto t-gnav-btn-settng"></a></li>
</ul>
</div><!-- /.t-list-gnav-group -->
<div class="t-list-gnav-group">
<div class="t-list-gnav-text">
<div class="t-list-gnav-title">お問合わせ</div>
</div><!-- /.t-list-gnav-text -->
<ul class="t-list-gnav-link">
<li class="t-list-gnav-link-item"><a href="faq/"><img src="images/common/gnav_btn07.png" alt="よくあるご質問" class="d-block w-100 h-auto t-gnav-btn-faq"></a></li>
<li class="t-list-gnav-link-item"><a href="contact/"><img src="images/common/gnav_btn08.png" alt="お問合わせ先" class="d-block w-100 h-auto t-gnav-btn-contact"></a></li>
</ul>
</div><!-- /.t-list-gnav-group -->
<div class="t-list-gnav-otherlink">
<ul class="t-list-gnav-link">
<li class="t-list-gnav-link-item"><a href="information/">お知らせ</a></li>
</ul>
</div><!-- /.t-list-gnav-otherlink -->
</div><!-- /.t-list-gnav -->
</div> <!-- /.modal_inner02 -->
</div><!-- /.modal_inner01 -->
</div><!-- /#modal -->
</div><!-- /#body_inner01 -->
</body>
ドライブレポート・マンスリーレポートの非活性化
ドライブレポート・マンスリーレポートの非活性化をする際は、下記を参考に「aタグ」を削除してください。
<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="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="images/common/gnav_ico08.png" alt="閉じる" class="d-block w-100 h-auto"></span>
<a href="" class="ci01"><img src="images/common/hd01_img01.png" alt="タフ・つながるクルマの保険" class="d-block w-100 h-auto"></a>
<div class="t-list-gnav">
<div class="t-list-gnav-group">
<ul class="t-list-gnav-link">
<li class="t-list-gnav-link-top"><a href=""><img src="images/common/gnav_btn01.png" alt="トップへ" class="d-block w-100 h-auto t-gnav-btn-top"></a></li>
</ul>
</div><!-- /.t-list-gnav-group -->
<div class="t-list-gnav-group">
<div class="t-list-gnav-text">
<div class="t-list-gnav-title">運転を確認する</div>
<!-- /.t-list-gnav-text --></div>
<ul class="t-list-gnav-link">
<li class="t-list-gnav-link-item"><img src="images/common/gnav_btn09.png" alt="ドライブレポート" class="d-block w-100 h-auto t-gnav-btn-drive"></li>
<li class="t-list-gnav-link-item"><img src="images/common/gnav_btn10.png" alt="マンスリーレポート" class="d-block w-100 h-auto t-gnav-btn-monthly"></li>
</ul>
</div><!-- /.t-list-gnav-group -->
<div class="t-list-gnav-group">
<div class="t-list-gnav-text">
<div class="t-list-gnav-title">設定を変更する</div>
<!-- /.t-list-gnav-text --></div>
<ul class="t-list-gnav-link">
<li class="t-list-gnav-link-item"><a href="javascript: void(0);"><img src="images/common/gnav_btn04.png" alt="メールアドレス変更" class="d-block w-100 h-auto t-gnav-btn-mail"></a></li>
<li class="t-list-gnav-link-item"><a href="javascript: void(0);"><img src="images/common/gnav_btn05.png" alt="パスワード変更" class="d-block w-100 h-auto t-gnav-btn-password"></a></li>
<li class="t-list-gnav-link-item"><a href="setting/"><img src="images/common/gnav_btn06.png" alt="各種設定" class="d-block w-100 h-auto t-gnav-btn-settng"></a></li>
</ul>
</div><!-- /.t-list-gnav-group -->
<div class="t-list-gnav-group">
<div class="t-list-gnav-text">
<div class="t-list-gnav-title">お問合わせ</div>
<!-- /.t-list-gnav-text --></div>
<ul class="t-list-gnav-link">
<li class="t-list-gnav-link-item"><a href="faq/"><img src="images/common/gnav_btn07.png" alt="よくあるご質問" class="d-block w-100 h-auto t-gnav-btn-faq"></a></li>
<li class="t-list-gnav-link-item"><a href="contact/"><img src="images/common/gnav_btn08.png" alt="お問合わせ先" class="d-block w-100 h-auto t-gnav-btn-contact"></a></li>
</ul>
</div><!-- /.t-list-gnav-group -->
<div class="t-list-gnav-otherlink">
<ul class="t-list-gnav-link">
<li class="t-list-gnav-link-item"><a href="information/">お知らせ</a></li>
</ul>
</div><!-- /.t-list-gnav-otherlink -->
</div><!-- /.t-list-gnav -->
</div><!-- /.modal_inner02 -->
</div><!-- /.modal_inner01 -->
</div><!-- /#modal -->
</div><!-- /#body_inner01 -->
</body>