Gナビをドロップダウンメニュー構造に切り替える手動作業

ドロップダウンメニューとは？工程記事

ドロップダウンメニューとは？..グローバルナビをクリックすると複数のサイト内ページ
や外部関連サイト＆ページのタイトルリンクが表示されるスタイルを言います..

当サイトは装着済みなので、ナビをポチしてご確認ください...

名称はドロップダウンメニューともプルダウンメニューとも...次いでいえばですね..
アコーディオンメニューとも言い現し方はまちまち...

多くのサイトで使われる...ワードプレスなど標準装備..

シリウス機能には備えない...?
最新版配布となっても未装着....そうなんですね

しかし、訪問者の情報お探しに利便性をと考えれば必要な仕様でしょう？

というわけでのドロップダウンメニュー導入解説...

構造について

ご案内するドロップダウン構造は、シリウス装備のグローバルナビをカスタマイズする
ものでは無く...外部構造を入れ込み作動させるものですが、スマートフォン表示に
関しては基本装備のハンバーガメニューを表示させるため、メニューの編集よりの
メニュー設定は従来同様行ってください。

当構造は、ニュービジネステンプレート専用に合わせておりますので、デフォルトTPや
シリウス以外構造に当てはまりません..

デフォルトテンプレート用は以下を御覧ください..
ニューデフォルトテンプレート専用カスタマイズ

スクリプトを使わずHTML、CSSのみで完了する軽量作動のため軽く動きます..が？
特殊な架装を施す際は、面倒作業も追加されます..

○....ご注意？..○

ビジネステンプレートのグローバルナビは、基本白背景ですけど...これに合わせての
解説です...

しかし、以外..色付けをと願う方もおられるでしょうね?
そんな変化もできますが、各種カスタマイズに関しては以降記事追加しますので
今回は白背景で進めるとご理解ください..

作業手順

HTML

ｈｔｍｌテンプレートソース内に以下格納仕様のメニュー構造をコピーして貼り付けて
ください...

当サイトの各ページリンクをあなたのサイトなど...選んでリンクテキストを入れ替える

<header>
<div id="top">
<div class="inner">
<% pageTopic4 %>
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(h2 class="title") %>
</div>
<input type="checkbox" id="panel" value="" />
<label for="panel" id="topmenubtn">MENU</label>
<div id="topmenubox"><div id="topmenubox-inner">
<% searchTag | str_replace(,) | str_replace(text,search) | str_replace(image,submit) | tag_insert(div id="searchbox") %>

<div id="normalnavv" class="drops">
<li><a href="#">TOP</a>
<ul>
<li><a href="<% pageDepth %>">トップページ</a></li>
</ul>
</li>
<li><a href="#">質問</a>
<ul>
<li><a href="https://www.affiliateno1.com/シリウスカスタマイズサポートフォーラム/シリウスカスタマイズサポートフォーラム一覧/">シリウスカスタマイズサポート</a></li>

</ul>
</li>
<li><a href="#">ご案内</a>
<ul>
<li><a href="<% pageDepth %>sitemap.html">サイトマップ</a></li>

</ul>
</li>
<li><a href="#">関連サイト</a>
<ul>
<li><a href="https://www.affiliateno1.com/">オンラインマニュアルLibrary</a></li>
<li><a href="https://www.affiliateno1.com/sirius.customize/">レスポンシブTPカスタマイズ</a></li>
<li><a href="https://www.affiliateno1.com/new.sirius.customize/">ニューテンプレートカスタマイズ</a></li>
</ul>
</li>
<li><a href="#">装飾</a>
<ul>
<li><a href="https://www.affiliateno1.com/designer/">シリウスサイトに取り付け可能なＣＳＳ装飾品？.まとめ</a></li>

</ul>
</li>
</div>

<% topMenu2 | tag_replace(div,nav) %>
<div id="topsubmenu">
<span><a href="<% pageDepth %>">ホーム</a></span>
<% rssPageLink | tag_insert(span) %>
<% sitemapPageLink | tag_insert(span) %>
</div>
</div></div>
</div>

次はスタイルシートへ移動します
ユーザー指定スタイルを開きましょう

以下コードをコピーして貼り付け完了します..

.drops{
*zoom: 1;
list-style-type: none;
width: 66%;
margin: 0px auto 55px;
padding: 0;
}

.drops:before, .dropsmenu:after{
content: "";
display: table;
}
.drops:after{
clear: both;
}
.drops li{
position: relative;
width: 20%;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.drops li a{
display: block;
margin: 0;
padding: 15px 0 11px;
background: #fff;
color: #333;
font-size: 14px;
line-height: 2;
text-decoration: none;

}

.drops li ul{
list-style: none;
position: absolute;
z-index: 9999;
top: 100%;
left: 0;
margin:0;
padding: 0;
}
.drops li ul li{
width: 250px;
}
.drops li ul li a{
padding: 13px 15px;
border-top: 1px solid #00C5A5;
background: #FF0A0A;
text-align: left;
}
.drops li:hover > a{
background: #c0c0c0;
}
.drops li a:hover{
background: #c0c0c0;
}

#normalnavv li ul {
visibility: hidden;
perspective: 400px;
}
#normalnavv li:hover ul{
visibility: visible;
}
#normalnavv ul li{
transform: rotateY(90deg);
transform-origin: 50% 0;
transition: .3s;
}
#normalnavv li:hover li{
transform: rotateY(0);
}
#normalnavv ul li:nth-child(2) {
transition-delay: .1s;
}
#normalnavv ul li:nth-child(3) {
transition-delay: .2s;
}
#normalnavv ul li:nth-child(4) {
transition-delay: .3s;
}
#normalnavv ul li:nth-child(5) {
transition-delay: .4s;
}

@media screen and (max-width: 769px) {

.drops{
*zoom: 1;
list-style-type: none;
width: 100%;
margin: 0px auto 30px;
padding: 0;
height: 5px;
}
.drops:before, .dropsmenu:after{
content: "";
display: table;

}
.drops:after{
clear: both;
}
.drops li{
position: relative;
width: 20%;
float: left;
margin: 0;
padding: 0;
text-align: center;

}
.drops li a{
display: none;
margin: 0;
padding: 15px 0 11px;
background: #237db9;
color: #fff;
font-size: 14px;
line-height: 1;
text-decoration: none;

}
.drops li ul{
list-style: none;
position: absolute;
z-index: 9999;
top: 100%;
left: 0;
margin: 0;
padding: 0;

}
.drops li ul li{
width: 100%;
}
.drops li ul li a{
padding: 13px 15px;
border-top: 1px solid #00C5A5;
background: #FF0A0A;
text-align: left;

}
.drops li:hover > a{
background: #00C5A5;

}
.drops li a:hover{
background: #00C5A5;
}

@media screen and (min-width: 769px) and (max-width: 2000px) {
#topmenu ul a {
background-color: #237db9;
border-top: 1px solid #3b689b;
color: #fff;

display: none;
font-size: 13px;
line-height: 1.6;
padding: 15px 35px 15px 15px;
position: relative;
text-align: left;
text-decoration: none;
margin:0;
}
}

@media screen and (max-width: 768px) {
#topmenu ul a {
background-color: #237db9;
border-top: 1px solid #3b689b;
color: #fff;
display: block;
font-size: 13px;
line-height: 1.6;
padding: 15px 35px 15px 15px;
position: relative;
text-align: left;
text-decoration: none;
margin:0;
}
}

指定値の詳細は、明日追加しますのでお待ちください