Biomod/2014/fit test.html: Difference between revisions
Team Fukuoka (talk | contribs) (New page: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <!-- ================= --> <!-- ▼jQuery 読み込み --> <!-- ================= --> <script type="text/javascript" ...) |
Team Fukuoka (talk | contribs) No edit summary |
||
(4 intermediate revisions by the same user not shown) | |||
Line 3: | Line 3: | ||
<!-- ▼jQuery 読み込み --> | <!-- ▼jQuery 読み込み --> | ||
<!-- ================= --> | <!-- ================= --> | ||
< | <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <!-- ※CDNを利用する場合は、上の行をコメントアウトし、こちらの行を有効にして下さい。 --> | ||
<!-- ==================================================== --> | <!-- ==================================================== --> | ||
Line 99: | Line 99: | ||
<body> | <body> | ||
<!-- ======================== --> | <!-- ======================== --> | ||
Line 107: | Line 106: | ||
<ul id="menu" style="list-style:none;"> | <ul id="menu" style="list-style:none;"> | ||
<li><a href="#">TOP</a></li> | <li><a href="#">TOP</a></li> | ||
<li><a href=" | <li><a href="fit_Introduction.html">Intro</a> | ||
<ul class="sub"style="list-style:none;"> | <ul class="sub"style="list-style:none;"> | ||
<li><a href="#">How to play kurohige</a></li> | <li><a href="fit_Introduction.html#How">How to play kurohige</a></li> | ||
<li><a href="#">Why kurhige</a></li> | <li><a href="fit_Introduction.html#Why">Why kurhige</a></li> | ||
<li><a href="#">problem</a></li> | <li><a href="fit_Introduction.html#Pro">problem</a></li> | ||
</ul> | </ul> | ||
</li> | </li> | ||
<li><a href=" | <li><a href="fit_Approach and Goals.html">Approach</a> | ||
<ul class="sub" style="list-style:none;"> | <ul class="sub" style="list-style:none;"> | ||
<li><a href="#">DNA</a></li> | <li><a href="fit_Approach and Goals.html#DNA">DNA</a></li> | ||
<li><a href="#"> | <li><a href="fit_Approach and Goals.html#Silica">Silica</a></li> | ||
<li><a href="#"> | <li><a href="fit_Approach and Goals.html#Fluorescence">Fluorescence</a></li> | ||
</ul> | </ul> | ||
</li> | </li> | ||
<li><a href=" | <li><a href="fit_Method.html">Method</a> | ||
<ul class="sub" style="list-style:none;"> | <ul class="sub" style="list-style:none;"> | ||
<li><a href="#">DNA</a></li> | <li><a href="fit_Method.html#DNA">DNA</a></li> | ||
<li><a href="#"> | <li><a href="fit_Method.html#Silica">Silica</a></li> | ||
<li><a href="#"> | <li><a href="fit_Method.html#Fluorescence">Fluorescence</a></li> | ||
<li><a href="#">DNA- | <li><a href="fit_Method.html#DNA-Silica">DNA-Silica</a></li> | ||
</ul> | </ul> | ||
</li> | </li> | ||
<li><a href=" | <li><a href="fit_Results and Discussion.html">result</a> | ||
<ul class="sub" style="list-style:none;"> | <ul class="sub" style="list-style:none;"> | ||
<li><a href="#">DNA</a></li> | <li><a href="fit_Results and Discussion.html#DNA">DNA</a></li> | ||
<li><a href="#"> | <li><a href="fit_Results and Discussion.html#Silica">Silica</a></li> | ||
</ul> | </ul> | ||
</li> | </li> | ||
Line 141: | Line 140: | ||
<!-- ========== --> | <!-- ========== --> | ||
</body> | </body> |
Revision as of 02:11, 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>