忍者ブログ
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

メニューバー用clearfix
#MenuBar:before, #MenuBar:after { content: ""; display: table; }
#MenuBar:after { clear: both; }
#MenuBar { zoom: 1; }


以下メニューバーのカスタマイズ備忘録。増えたり減ったり
●●●●●



↑これだけ表示

#MenuBar {
	width: 319px;
	height: 23px;
	overflow: hidden;
}
#MenuBar #MenuBarLeft { width: 319px; }
#MenuBar #MenuBarLeft a {
	/*▽*/
	float: left;
	display: block;
	font-size: 10px;
	height: 23px;
	text-decoration: none;
	/*△*/
	line-height: 23px;
}
#MenuBar #MenuBarRight { display: none; }


●●●●●



↑これだけ表示

#MenuBar {}
#MenuBar #MenuBarLeft { display: none; }
#MenuBar #MenuBarRight {}
#MenuBar #MenuBarRight .MenuItem { display: none; }
#MenuBar #MenuBarRight .MenuItem.Twitter { display: block; width: 23px; height: 23px; }
#MenuBar #MenuBarRight .MenuItem.Twitter .Text { display: none; }


●●●●●



↑これ

#MenuBar {
	position: fixed;
	top: 5px;
	right: 5px;
	width: 180px;
	height: 19px;
	overflow: hidden;
}
#MenuBar #MenuBarLeft {
	width: 335px;
}
#MenuBar #MenuBarLeft a {
	/*▽*/
	float: left;
	display: block;
	height: 19px;
	font-size: 10px;
	text-decoration: none;
	/*△*/
	margin-right: 5px;
	line-height: 19px;
	text-align: center;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	        border-radius: 4px;
	color: #fff;
	background: #bbb;
	background: rgba(0,0,0,0.3);
}
#MenuBar #MenuBarLeft a:hover {
	background: #999;
	background: rgba(0,0,0,0.5);
}
#MenuBar #MenuBarRight {
	display: none;
}
border-radiusとrgba()がIE8以下に未対応爆発しr
PR

Comment

現在、新しいコメントを受け付けない設定になっています。