INTEREST

---

■FC2ブログでドロップダウンメニューを作る方法

1. 1.HTMLの記述　-　FC2ブログのテンプレート用変数を組み込んでメニューの内容をリストにする
2. 2.CSSの記述　-　HTMLでリストにした内容をCSSでドロップダウンメニューにする

---

1.HTMLの記述

まずはドロップダウンメニューの内容をHTMLでリストにします。
構造的には、リストタグの<ul>と<li>を入れ子にしてるだけなので結構簡単
（リストの中に、さらにリストを作る事で階層が出来る感じです。）
また「カテゴリ」と「月別アーカイブ」のメニュー内容が自動で書き換えや追加されるように、FC2ブログの「テンプレート用変数」を組み込んで、下記のようにHTMLを記述しました。

<ul id="drop-down-menu">
<li><!-- ▼ 一番左のメニュー（Category）　ここから ▼ -->
<a href="#">Category</a>
<ul>
<!--category-->
<!--category_nosub-->
<li>
<a href="<%category_link>" title="<%category_name>">
<i class="fa fa-folder-open"></i> <%category_name> (<%category_count>)</a>
</li>
<!--/category_nosub-->
<!--category_parent-->
<li>
<a href="<%category_link>" title="<%category_name>">
<i class="fa fa-folder-open"></i> <%category_name> (<%category_count>)</a>
<ul>
<!--/category_parent-->
<!--category_sub_hasnext-->
<li>
<a href="<%category_link>" title="<%category_name>">
<i class="fa fa-folder-open-o"></i> <%category_name> (<%category_count>)</a>
</li>
<!--/category_sub_hasnext-->
<!--category_sub_end-->
<li>
<a href="<%category_link>" title="<%category_name>">
<i class="fa fa-folder-open-o"></i> <%category_name> (<%category_count>)</a>
</li>
</ul>
</li>
<!--/category_sub_end-->
<!--/category-->
</ul>
</li><!-- ▲ 一番左のメニュー（Category）　ここまで ▲ -->
<li><!-- ▼ 真ん中のメニュー（Monthly）　ここから ▼ -->
<a href="#">Monthly</a>
<ul>
<!--archive-->
<li>
<a href="<%archive_link>" title="<%archive_year>年<%archive_month>月の記事">
<i class="fa fa-folder-open"></i> <%archive_year>年<%archive_month>月の記事 
(<%archive_count>)</a>
</li>
<!--/archive-->
</ul>
</li><!-- ▲ 真ん中のメニュー（Monthly）　ここまで ▲ -->
<li><!-- ▼ 一番右のメニュー（メニュー3）　ここから ▼ -->
<a href="#">メニュー3</a>
</li><!-- ▲ 一番右のメニュー（メニュー3）　ここまで ▲ -->
</ul>

※FC2ブログの「テンプレート用変数」の詳細は こちら をご確認下さい。
※一番右のメニューは、まだ何も中身が無い状態です...

---

2.CSSの記述

上記HTMLの記述でリストにした内容をドロップダウンメニューにする為に、下記CSSの記述をFC2ブログ「テンプレートの設定」のスタイルシート編集内に追加しました

#drop-down-menu {
list-style-type: none;
width: 270px;
margin: 0px auto;
padding: 0;
}
#drop-down-menu li {
position: relative;
width: 90px;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
#drop-down-menu li a {
display: block;
margin: 0;
padding: 14px 0 20px 0;
color: #333;
font-size: 16px;
line-height: 1;
text-decoration: none;
font-family: Verdana;
font-weight:bold;
}
#drop-down-menu li ul {
list-style: none;
position: absolute;
z-index: 100;
top: 100%;
left: 0;
width: 200px;
margin: 0;
padding: 0;
border: none;
}
#drop-down-menu li ul li {
overflow: hidden;
width: 100%;
height: 0;
color: #fff;
transition:0.3s;
}
#drop-down-menu li ul li a {
padding: 12px 8px;
background: #ddd;
border:1px solid #bbb;
text-align: left;
font-size: 13px;
font-weight: normal;
}
#drop-down-menu > li:hover > a { color:#fff; text-shadow:1px 1px 2px #000; }
#drop-down-menu > li:hover li:hover > a {
background: #777;
color:#fff;
text-shadow:1px 1px 2px #000;
}
#drop-down-menu li:hover > ul > li { overflow: visible; height: 38px; }
#drop-down-menu li ul li ul { top: 0; left: 100%; }
#drop-down-menu li ul li ul li a { background: #eee; }
#drop-down-menu li:hover ul li ul li:hover > a { background: #888; }
#drop-down-menu li ul li ul:before {
position: absolute;
content: "";
top: 13px;
left: -15px;
width: 0;
height: 0;
border: 5px solid transparent;
border-left-color: #07f;
}

今回のドロップダウンメニュー作成は、下記のページを参考にさせて頂きました。
「CSSだけで作る「多階層」なドロップダウンメニュー / Webpark 」様