トップ > 日記 > CSSだけで動くスライドボックス

CSSだけで動くスライドボックス

日記


IEユーザの方には　ご迷惑をおかけします、残念ですがこの機能はhatenaブログでは、IEブラウザで表示がうまく出来ないようです。


原因としては、推測ですが

はてなのブログは、ブラウザで互換モードで表示されます。


IE8などの新しいブラウザでは、マウスが乗った時に動作するhoverというスタイルが使えるのですが、これは、標準モードでブラウザが動作している場合に可能になる模様で、結果　はてなブログで、私が試した範囲では、IEでは表示が乱れるので、IEブラウザの場合にはスライドボックスを非表示にするスタイルを追加しました。

念のため、標準モードで動作するhtmlを作成して、IE8で動作確認を行いましたので、興味のある人は確認してみてください。

スライドボックス標準モードでCSSだけで動作の確認


twitterでCSSだけで動作するボックスを囁いていたので、このブログに使ってみることにした。

Dはてなに作る場合は、ページヘッダに以下を追加

	<div id="slideout">
		<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/t/tenman/20110423/20110423090709.png" alt="Feedback" />
		<div id="slideout_inner">
			<hatena name="section" template="hatena-module" showcategory="false" listlimit="7">
	
		</div>
	</div>

スタイルを追加

	#slideout {
			position: fixed;
			top: 40px;
			left: 0;
			width: 35px;
			padding: 12px 0;
			text-align: center;
			background: #6DAD53;
			-webkit-transition-duration: 0.3s;
			-moz-transition-duration: 0.3s;
			-o-transition-duration: 0.3s;
			transition-duration: 0.3s;
			-webkit-border-radius: 0 5px 5px 0;
			-moz-border-radius: 0 5px 5px 0;
			border-radius: 0 5px 5px 0;
*display:none;/*　IEではつかえませんでした*/
		}
		#slideout_inner {
			position: fixed;
			top: 40px;
			left: -250px;
			background: #6DAD53;
			width: 200px;
			padding: 25px;
			height: 100%;
			-webkit-transition-duration: 0.3s;
			-moz-transition-duration: 0.3s;
			-o-transition-duration: 0.3s;
			transition-duration: 0.3s;
			text-align: left;
			-webkit-border-radius: 0 0 5px 0;
			-moz-border-radius: 0 0 5px 0;
			border-radius: 0 0 5px 0;
		}
		
		#slideout:hover {
			left: 250px;
		}
		#slideout:hover #slideout_inner {
			left: 0;
		}
#slideout_inner .hatena-module hatena-module-section {

}
#slideout_inner .hatena-module hatena-module-section .hatena-moduletitle{
  font-size:20px!important;
}
#slideout_inner .hatena-module hatena-module-section .hatena-modulebody{
  font-size:14px!important;
}


コンビニユースフルなポップアップボックス完成？

TOP