Biomod/2014/fit test.html: Difference between revisions
Team Fukuoka (talk | contribs) No edit summary |
Team Fukuoka (talk | contribs) No edit summary |
||
| Line 3: | Line 3: | ||
<!-- ▼jQuery 読み込み --> | <!-- ▼jQuery 読み込み --> | ||
<!-- ================= --> | <!-- ================= --> | ||
< | < script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script -> <!-- ※CDNを利用する場合は、上の行をコメントアウトし、こちらの行を有効にして下さい。 --> | ||
<!-- ==================================================== --> | <!-- ==================================================== --> | ||
Revision as of 02:10, 17 September 2014
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
< script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script ->
<script type="text/javascript"> $(function(){ $("#menu li").hover(function(){ $("ul",this).show(); }, function(){ $("ul",this).hide(); }); }); </script>
<style type="text/css"> /* ------------------ */ /* メニューバーの装飾 */ div.menubar { background-color: #FF6633; /* バーの背景色 */ border-top: 3px double #800000; /* バーの上端線 */ border-bottom: 3px double #800000; /* バーの下端線 */ min-width: 630px; /* メインメニュー全部が収まる最低横幅 */ }
/* ------------------------ */ /* メインメニュー項目の装飾 */ div.menubar ul#menu { margin: 0px 0px 0px 15px; /* メニューバー外側の余白 */ padding: 10px; /* メニューバー内側の余白 */ height: 40px; /* メニューバーの高さ */ } div.menubar ul#menu li { width: 120px; /* メニュー項目の横幅 */ height: 40px; /* メニュー項目の高さ（「メニューバーの高さ」と一致させる） */ float: left; list-style-type: none; position: relative; } div.menubar ul#menu a { background-color: #FF6633; /* メニュー項目の背景色 */ color: white; /* メニュー項目の文字色 */ line-height: 40px; /* メニュー項目のリンクの高さ（「メニュー項目の高さ」と一致させる） */ text-align: center; /* メインメニューの文字列の配置（中央寄せ） */ text-decoration: none; /* メニュー項目の装飾（下線を消す） */ display: block; width: 100%; height: 100%; } div.menubar ul#menu a:hover { background-color: #BAD3FF; /* メニュー項目にマウスが載ったときの背景色 */ color: #cc0000; /* メニュー項目にマウスが載ったときの文字色 */ }
/* メニューバー直後の Clear Hack */ div.menubar ul#menu { zoom:1; } div.menubar ul#menu:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; }
/* ---------------------- */ /* サブメニュー項目の装飾 */ div.menubar ul#menu ul.sub { background-color: #FF6633; /* サブメニュー全体の背景色 */ border-width: 1px 1px 0px 1px; /* サブメニュー全体の枠線の太さ */ border-style: solid; /* サブメニュー全体の枠線の線種 */ border-color: #800000; /* サブメニュー全体の枠線の色 */ margin: 0px; padding: 0px; display: none; position: absolute; } div.menubar ul#menu ul.sub li { width: 135px; /* サブメニュー1項目の横幅 */ height: 35px; /* サブメニュー1項目の高さ */ border-width: 0px 0px 1px 0px; /* サブメニュー1項目の枠線の太さ */ border-style: solid; /* サブメニュー1項目の枠線の線種 */ border-color: #800000; /* サブメニュー1項目の枠線の色 */ } div.menubar ul#menu ul.sub li a { line-height: 35px; /* サブメニュー1項目の行高（「サブメニュー1項目の高さ」と合わせる） */ text-align: left; /* 文字列の配置（左寄せ） */ text-indent: 5px; /* 文字列前方の余白 */ } div.menubar ul#menu ul.sub li a:hover { background-color: #ffff80; /* サブメニュー項目にマウスが載ったときの背景色 */ color: #005500; /* サブメニュー項目にマウスが載ったときの文字色 */ }
</style> </head> <body>
</body>
