ナビゲーションプルダウン入れ替え手順

入れ替えの工程

シリウスニューテンプレートにデフォルト装備のGナビゲーションを複数の格納メニュー
で一覧表示する形態へ切り替える...入れ替えるでしょうか？

では、HTMLでのコード配置、スタイルシートへの指示コードまとめて記載します。

ただし、記載コードは現時点の当サイト例...他スタイルは巻末の案内リンクで
ご確認ください...

まずは、HTMLTPソース内追加コードから...

配置場所は、トップTPからエントリーTPソース内すべてにコピーして追加します..
一部順序を変えているので、<header>からを記載しておりますので、
自己サイトのソースと違いを確認してください...

contents見出しは、格納するメニューのコンテンツをイメージするタイトルに
してください..

誘導リンクメニューは、格納するメニューで、カテゴリーでもエントリーPでも
外部サイトへのリンクでも自由に入れ込むことができます...

記載時点の当サイトリンクコードですけど自己リンクへ書き換えてください..

格納数は、いくつでも行追加可能...書き足してください..

追加はここからです
<div id="normalnavv" class="drops">
<li><a href="#">TOP</a>　/*contents見出し*/
<ul>
<li><a href="<% pageDepth %>">トップページ</a></li>　/*誘導リンクメニュー*/
</ul>
</li>
<li><a href="#">質問</a>　/*contents見出し*/
<ul>
<li><a href="https://www.affiliateno1.com/シリウスカスタマイズサポートフォーラム/シリウスカスタマイズサポートフォーラム一覧/">シリウスカスタマイズサポート</a></li>　/*誘導リンクメニュー*/
</ul>
</li>
<li><a href="#">ご案内</a>　/*contents見出し*/
<ul>
<li><a href="<% pageDepth %>sitemap.html">サイトマップ</a></li>　/*誘導リンクメニュー*/
</ul>
</li>
<li><a href="#">関連サイト</a>　/*contents見出し*/
<ul>
<li><a href="https://www.affiliateno1.com/">オンラインマニュアルLibrary</a></li>　/*誘導リンクメニュー*/
<li><a href="https://www.affiliateno1.com/new.sirius.customize/">ニューテンプレートカスタマイズ</a></li>　/*誘導リンクメニュー*/
</ul>
</li>
<li><a href="#">装飾</a>　/*contents見出し*/
<ul>
<li><a href="https://www.affiliateno1.com/designer/">シリウスサイトに取り付け可能なＣＳＳ装飾品？.まとめ</a></li>　/*誘導リンクメニュー*/
</ul>
</li>
</div>

/*Gナビとヘッダーの間、隙間に入れてます、削除すれば白背景が見えます*/
<div class="Shadowfoto40"><div><hr style="border-bottom:solid 10px #fff" border="0" /></div></div>

/*ここまで*/

<div id="header">
<% pageHeaderImage2 %>
<div id="headertxt">
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(h2 class="title") %>
<% pageDescription2 | str_replace(id="headertext",class="desc") %>
</div>
</div>
</div>
</div>

</header>

書き換え作業ですが、リンクコード配置もあるので、記事内に貼り付け後
進めますとやりやすいです..

HTML配置が終わりましたら、次はスタイルシートへ進みましょう..

まずは、デフォルトナビをパソコン画面では非表示としてプルダウンメニューを優先表示
する指定...
スマートフォンではデフォルトハンバーガーメニューを表示する指定を追加します..
指定はデフォルトのレスポンシブ作動数値に合わせています...

トップメニュー項目内に以下を行追加してください..

@media screen and (min-width: 679px) 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;
}
}

次はユーザー指定スタイルを開きます...

パソコン画面では、優先表示ですが、スマートフォン画面は非表示とする指定値です..

プルメニューのカラー、ホバーカラーは、合わせて4つの指定ができますので...サイトの
イメージに合わせてカラーコードを書き換え...てください...

.drops{
*zoom: 1;
list-style-type: none;
width: 100%;
margin: 0px auto 30px;
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: #834EFF;
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: #CD0AFF; /*プル一覧メニューのホバーした際のカラー*/
}

/*動きのスタイル*/

#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;
}

/*動きのスタイル*/
#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;
}
}

ここまでを張り付けてください...

/*動きのスタイル*/は、記載時点の当サイトの指定...回転リンクですが..他にフェード、
ブラインド形式などいくつかあるので以下サイトを確認後、動きの項目だけ張り替えれば
スタイルは変更されます...
各種スタイルまとめでコード確認

これで作動するはず？ですけど...

詳細が不足しているかもしれません...後ほど記事検証後見直しますね..

ナビゲーションプルダウン入れ替え手順｜ニューTP対応
 グローバルナビゲーションをプルダウンメニューへ変更する手順