はてなブログにCSS3でドロップダウンメニューを追加

お久しぶりです。ゆいとまるです。
刀剣乱舞にハマって気が付いたら4ヶ月過ぎてました。
トーハクまでおじいちゃん見に行ったりしてました。天下五剣はふつくしかったです。
一緒に兼さん厨もいました。綺麗でした。

さて、そんな放置しまくってる間にも、ありがたいことに以前書いた記事にスターを頂いたり記事中で引用して頂いたりしておりまして。
その中でもとりわけメニューバーの記事がご好評頂いているようで、ゆいとまるさん調子に乗りました。
maroom.hateblo.jp
ちょうど仕事で管理してるサイトも、javascript＋画像のドロップダウンメニューからCSSに変更したので、そっからソースコード持ってきてブログ用に改良しました。
パッと見は前のものとあんまり変わってませんが、オンマウスでドロップダウンします。
しかしドロップダウンさせるほどの内容がないので「Category」しかサブメニューがないという…。
内容が増えたらメニューの中身も変わるかもしれません。増えたらな！頑張れ俺！

ソースコード

まんま書き写してもアレなので、メニューの内容（html）は見本用に直してあります。
CSSはまんま書き写しなのでコピペするとこのブログとお揃いになれますやったね！(・ω・)b
インストールしているテーマは「slim」です。
slim - テーマストア
このテーマじゃないと使えない！ってモノではないので、デザインに合わせて修正してご利用下さい。
（例えば、ふわふわピンクな乙女デザインブログにこのままぶち込むと大参事になります。）

html

ダッシュボード＞デザイン＞カスタマイズ（道具アイコン）＞ヘッダの「タイトル下」に以下のコードを追加

<ul id="menubar">
	<li>メインメニュー1
		<ul>
			<li><a href="sub1-1.html">サブメニュー1-1</a></li>
			<li><a href="sub1-2.html">サブメニュー1-2</a></li>
			<li><a href="sub1-3.html">サブメニュー1-3</a></li>
		</ul>
	</li>
	<li>メインメニュー2
		<ul>
			<li><a href="sub2-1.html">サブメニュー2-1</a></li>
			<li><a href="sub2-2.html">サブメニュー2-2</a></li>
			<li><a href="sub2-3.html">サブメニュー2-3</a></li>
		</ul>
	</li>
	<li>メインメニュー3
		<ul>
			<li><a href="sub3-1.html">サブメニュー3-1</a></li>
			<li><a href="sub3-2.html">サブメニュー3-2</a></li>
			<li><a href="sub3-3.html">サブメニュー3-3</a></li>
		</ul>
	</li>
	<li><a href="main4.html">メインメニュー4</a></li>

</ul>

CSS

ダッシュボード＞デザイン＞カスタマイズ（道具アイコン）＞｛｝デザインCSSに以下のコードを追加

*{
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box; }

#menubar{
	display: table;
	list-style: none;
	width: 960px;
	margin: 10px 0;
	padding: 0;
	border: none;
	background: #000000; }
#menubar:after{
	content: "";
	clear: both; }
#menubar li{
	position: relative;
	float: left;
	width: 240px;
	height: 30px;
	line-height: 30px;
	padding: 0;
	text-align: center;
	color: #FFFFFF; }
#menubar li:hover{
	border: 2px dotted #FF0000;
	background-color: #FFFFFF;
	color: #000000; }
#menubar li a{
	display: block;
	width: 100%;
	color: #FFFFFF;
	text-decoration: none; }
#menubar li a:hover{ color: #000000; }

/* sub menu（ドロップダウン部分） */
#menubar li ul{
	position: absolute;
	list-style: none;
	top: 100%;
	left: 0;
	z-index: 99999;
	width: 100%;
	margin: 0;
	padding: 0;
	background: #000000; }
#menubar li ul li{ 
	overflow: hidden;
	width: 100%;
	height: 0;
	transition: .2s; }
#menubar li:hover ul li{ 
	overflow: visible;
	height: 30px;
	line-height: 30px;
	color: #FFFFFF;
	text-align: center; }
#menubar li ul li a{
	display: block;
	width: 100%;
	text-decoration: none; }

リストタグで横並びメニューを作って、その中にもう1個別のリストタグでドロップダウン部分を入れ込む形です。
box-sizingは計算が面倒で突っ込んだだけなので、widthやborder-sizeをちゃんと計算するなら要らないです。
IE7以前は非対応です。CSSいじるとbox-sizingの所で「IE6-7は対応してねぇよ！」というアラートが出てきます。
がしかし、はてなブログ自体がIE7どころかIE8も非推奨。だってはてなブログはHTML5で出来ている。
「おい、お前さん何で出てきたよ…( ´_ゝ`)」としょっぱい気持ちになりながらスルーです。

注意点は、これまで置いていた簡易メニューバーと比べると、読み込みが遅くなる所でしょうか。
どうも例のアラートさん曰く、全称セレクタ使うと読み込みが遅くなるらしいです。
今回めんどくさがって使ってますが、ちゃんとwidth、padding、border-sizeを計算して設置すればそう遅くなることはないと思います。

さて、今後のブログですが

手帳、文房具、WEB関係がメインなのは引き続きとしてもいかんせんネタに尽きてくるので、その他についてももうこのブログでやっちゃっていいかなーと思ってます。
一番可能性があるのはゲームでしょうか。今日これからどう森ハピホムを買いに行くのでー！ヽ(´▽｀)ノ増えるとすれば多分コレの話。

なお手帳については前回の記事から、ほぼ日WEEKS⇒トラベラーズノートの2015週間＋メモ（ウィークリーレフト式）に変更しつつ、同じ使い方をしています。
年明けから7月末までWEEKSを使ってたんですが、書くスペースが足らなくなってしまいまして。
タスク管理用にしてたほぼ日メモ帳も、同じ理由でオリジナルサイズからWEEKSサイズに変更しました。
多分8月からはトラベラーズの方眼リフィルかカ・クリエになります。スペースが足らぬ…足らぬのじゃ…。
業務日誌にしてるオリジナルは引き続き使ってるけどこやつもまた微妙に足らぬ…来年は多分Mark'sのEDiT（B6の方）を使うと思います。
ほぼ日だと全部微妙に小さいのねー（´ω`）
書く内容を精査して減らせばいいんだろうけど「でも書いときたいんじゃ！忘れたら心配なんじゃ！」ってなって、段々また書く量が増えてった結果なのでもう大人しく諦めてトラベラーズ持ち歩くよ重いけどな！！

トラベラーズ本体はブラウン1つで浮気せずに使ってるけどキャメルがほっすい。オリジナルサイズで。
2011年に5周年記念でキャメル出たから次は10周年で出てくれないかな…2021年…出ないかなーヾ((_´ω`)_