記事内スペースで格納メニューの表示する手段
記事内にプルダウンメニューを配置する例から始めます..
サイドバーでということもあるでしょうけど、スマホ対応ならサイドは巻末...下の方で
表示されるため読者が行きつかないこともある不安解消と考えれば、記事の上部
とか中断配置も誘導手段の一つでしょう...
まず、記事内例 以下作動系
新テンプレートの記事スペースに以下コードを張り付ければ作動しますが、その前に
どのように書き込むかを説明しますね...
<li><a href="#">menu</a>
<ul>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
</ul>
</li>
menuは、コンテンツのタイトルなので、シリウスでいえばカテゴリーページでしょう
...けど、あくまでポチしてもリンク移動はしません...
ポチすると格納...しておくメニューがブラインド表示される...
格納メニュー
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
関連するページのタイトル、とリンクコードを書き込みます...
シリウスサイトのページに限らずが外部サイトのリンクでも可...自己判断でど〜ぞ？
格納メニューは、4連ですけど列を削除すればひとつでも3つでも好み設定..
増やす場合は、列を追加すればOK...
個別ページごとにリンク先はランダムで書き込み可能...
スタイルシートで指示しておけばどこでも自由に使えるということですね...
では、以下コードを記事内に張り付けてみてください...
(スタイルシート指定前は、正常作動しません...前置き）
<div id="normalnav" class="drop">
<li><a href="#">menu</a>
<ul>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
</ul>
</li>
<li><a href="#">menu</a>
<ul>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
</ul>
</li>
<li><a href="#">menu</a>
<ul>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
</ul>
</li>
<li><a href="#">menu</a>
<ul>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
</ul>
</li>
</div>
ここまで..
次にスタイルシート...ユーザー指定スタイルに以下を張り付け
（レスポンシブ作動含め済み）
ここは格納ボックス...
.drop{
*zoom: 1;
list-style-type: none;
width: 100%;
margin: 0px auto 30px;
padding: 0;
}
.drop:before, .dropmenu:after{
content: "";
display: table;
}
.drop:after{
clear: both;
}
.drop li{
position: relative;
width: 20%;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.drop li a{
display: block;
margin: 0;
padding: 15px 0 11px;
background: #008181; /*格納ボックス 背景カラーコード*/
color: #fff;
font-size: 14px;
line-height: 1;
text-decoration: none;
}
.drop li ul{
list-style: none;
position: absolute;
z-index: 9999;
top: 100%;
left: 0;
margin: 0;
padding: 0;
}
.drop li ul li{
width: 100%;
}
.drop li ul li a{
padding: 13px 15px;
border-top: 1px solid #00C5A5;
background: #FF0A0A; /* ブラインド背景カラーコード*/
text-align: left;
}
.drop li:hover > a{
background: #00C5A5;
}
.drop li a:hover{
background: #00C5A5;
}
#normalnav li ul li{
overflow: hidden;
height: 0;
transition: .2s;
}
#normalnav li:hover ul li{
overflow: visible;
height: 38px;
}
ここまで...
○...重要....○
ですが、この状態ですと隙間ありが見られましてまとまらない形状ですので、スタイル
シートから以下項目を削除します..
（li読み込みが表示を邪魔するのですね）
リスト下から
#main ul{
list-style: outside none none;
margin: 10px 0;
padding: 0;
}
#main ul > li {
line-height: 1.7;
margin: 10px 0;
padding: 0 0 0 1.4em;
position: relative;
}
#main ul > li:before {
background-color: #469ada;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
content: '';
height: 0.375em;
position: absolute;
top: 0.6em;
left: 0.3em;
width: 0.375em;
font-weight:bold;
text-align:center;
}
ここまでを削除すると上例の作動となります
