スポンサーサイト

 

--.--.--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!
-------- | スポンサー広告 | | | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/35-12782a06

「スポンサーサイト」へのトラックバック

- TrackBack -


「スポンサーサイト」へのコメント

- Comment -

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

HTMLとCSSで作るドロップダウンメニュー

 

2014.10.08

CSSだけで作ったドロップダウンメニュー ブログメニューの「カテゴリ」と「月別アーカイブ」をドロップダウンメニューにしてみた

初心者の私は、このドロップダウンメニューがあるだけで「なんかカッコイイっ!!」と思ってしまうので、ブログタイトル下に設置してみた♪
このブログの場合、サイドメニューに「カテゴリ」も「月別アーカイブ」もあるので、あまり意味は無いかもだけど...
まぁその辺は、実際に設置してみて気付ける事もあるって事で...w
あと、一番右の項目は何にしようか迷ってて何も中身が無いままです...



■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 」様
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!


関連記事
2014-10-08 | HTML・CSS | コメント(0) | トラックバック(0) | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/35-12782a06

「HTMLとCSSで作るドロップダウンメニュー」へのトラックバック

- TrackBack -


「HTMLとCSSで作るドロップダウンメニュー」へのコメント

- Comment -

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

▼クリックすると配色が変更されます  
このボタンの設置方法は こちら♪

White
Black

プロフィールClick

プロフィール画像

Author:あると♪
ブログ開始: 日目
公開記事数:

Webサイト製作の勉強にと思ってブログのカスタマイズに挑戦してる初心者です♪その他にも気になった事、興味がある事などを気ままに書いてますっ!!

当ブログのご案内は こちら♪

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

人気ランキングClick

ブログパーツ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。