Template:Tokyotechcss

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<head>
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
<title>bar</title>
-
<title>iGEM TokyoTech 2013</title>
+
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<style type="text/css">
<!--
<!--
-
body {
+
 
-
font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
+
html
-
background-image: url(/Users/yotiku2011/Desktop/SpryAssets/texture.gif);
+
{
-
background-repeat: repeat;
+
overflow: -moz-scrollbars-vertical !important;
-
margin: 0;
+
resize: none;
-
padding: 0;
+
background-color: #FFFAFA;
-
color: #000;
+
}
}
-
/* ~~ エレメント / タグセレクター ~~ */
+
 
-
ul, ol, dl { /* ブラウザー間の相違により、リストの余白とマージンをゼロにすることをお勧めします。一貫性を保つために、量をここで指定するか、リストに含まれるリスト項目 (LI、DT、DD) で指定できます。より詳細なセレクターを記述しない限り、ここで指定する内容が .nav リストにも適用されることに注意してください。 */
+
body {
-
padding: 0;
+
background: #759C81;
-
margin: 0;
+
-
}
+
-
h1, h2, h3, h4, h5, h6, p {
+
-
margin-top: 0; /* 上マージンを削除すると、マージンを含む div からマージンがはみ出す場合があるという問題を回避できます。残った下マージンにより、後続のエレメントからは離されます。 */
+
-
padding-right: 15px;
+
-
padding-left: 15px; /* div 自体ではなく div 内でエレメントの両側に余白を追加すると、ボックスモデル計算が不要になります。代わりに、両側に余白を指定した div をネストして使用することもできます。 */
+
-
}
+
-
a img { /* このセレクターは、一部のブラウザーでイメージをリンクで囲んだ場合にイメージの周囲に表示される初期設定の青いボーダーを削除します。 */
+
-
border: none;
+
}
}
-
/* ~~ サイトのリンクのスタイル付けは、ホバー効果を作成するセレクターグループも含め、この順序にする必要があります。~~ */
+
 
-
a:link {
+
.firstHeading {
-
color:#414958;
+
display:none;
-
text-decoration: underline; /* 非常に特殊な表示方法でリンクをスタイル付けする場合を除き、一目で見分けられるように下線を指定することをお勧めします。 */
+
-
}
+
-
a:visited {
+
-
color: #4E5869;
+
-
text-decoration: underline;
+
-
}
+
-
a:hover, a:active, a:focus { /* このセレクターグループは、キーボードを使用するユーザーに対し、マウスを使用するユーザーと同じホバー効果を提供します。 */
+
-
text-decoration: none;
+
}
}
-
/* ~~ このコンテナが他のすべての div を囲み、パーセンテージに基づいた幅を指定します。~~ */
+
 
-
.container {
+
.firstHeading { display:none; }
-
width: 80%;
+
-
max-width: 1260px;/* レイアウトが大型モニターで広がりすぎないように、最大幅を指定することをお勧めします。これにより、読みやすい行の長さを保つことができます。IE6 ではこの宣言は無視されます。 */
+
-
min-width: 780px;/* レイアウトが狭くなりすぎないように、最小幅を指定することをお勧めします。これにより、サイドカラムで読みやすい行の長さを保つことができます。IE6 ではこの宣言は無視されます。 */
+
-
background: #FFF;
+
-
margin: 0 auto; /* 幅に加え、両側を自動値とすることで、レイアウトが中央に揃います。.container の幅を 100% に設定した場合、これは必要ありません。 */
+
}
}
-
/* ~~ ヘッダーには幅は指定されません。ヘッダーはレイアウトの幅全体まで広がります。ヘッダーには、ユーザー独自のリンクされたロゴに置き換えられるイメージプレースホルダーが含まれます。~~ */
+
.right-menu ul {
-
.header {
+
border: none;
-
background: #6F7D94;
+
}
}
-
/* ~~ これはレイアウト情報です。~~
 
-
1) 余白は、div の上部または下部にのみ配置されます。この div 内のエレメントには、それ自体に余白があるので、ボックスモデル計算を行う必要がありません。ただし、div 自体に両側の余白やボーダーを指定した場合、その値が加算されたものが合計幅になることに注意してください。div 内のエレメントの余白を削除し、さらにその div 内に、全体のデザインに必要な幅や余白を指定していない 2 つ目の div を追加することもできます。
+
#Table_01 {
 +
position:absolute;
 +
left:30px;
 +
top:-55px;
 +
width:1000px;
 +
height:85px;
 +
}
-
*/
+
#bar-normal-01-norm {
-
.content {
+
position:absolute;
-
padding: 10px 0;
+
left:0px;
 +
top:0px;
 +
width:119px;
 +
height:85px;
}
}
-
/* ~~ このセレクターグループは、.content 内のリストに領域間隔を指定します。~~ */
+
#bar-normal-02-norm {
-
.content ul, .content ol {  
+
position:absolute;
-
padding: 0 15px 15px 40px; /* この余白は、上述の見出しと段落ルールの右の余白を表します。下の余白はリスト内の他のエレメントとの間隔用に配置され、左の余白はインデント作成用に配置されています。これは必要に応じて調整できます。 */
+
left:119px;
 +
top:0px;
 +
width:108px;
 +
height:85px;
}
}
-
/* ~~ フッター ~~ */
+
#bar-normal-03-norm {
-
.footer {
+
position:absolute;
-
padding: 10px 0;
+
left:227px;
-
background: #6F7D94;
+
top:0px;
 +
width:110px;
 +
height:85px;
}
}
-
/* ~~ その他の float/clear クラス ~~ */
+
#bar-normal-04-norm {
-
.fltrt { /* このクラスを使用すると、ページ内でエレメントを右にフローティングさせることができます。フローティングさせるエレメントは、ページ内で横に並べて表示するエレメントの前に指定する必要があります。 */
+
position:absolute;
-
float: right;
+
left:337px;
-
margin-left: 8px;
+
top:0px;
-
margin-top: 120px;
+
width:109px;
 +
height:85px;
}
}
-
.fltlft { /* このクラスを使用すると、ページ内でエレメントを左にフローティングさせることができます。フローティングさせるエレメントは、ページ内で横に並べて表示するエレメントの前に指定する必要があります。 */
+
 
-
float: left;
+
#bar-normal-05-norm {
-
margin-right: 8px;
+
position:absolute;
 +
left:446px;
 +
top:0px;
 +
width:108px;
 +
height:85px;
}
}
-
.clearfloat { /* このクラスは、#footer が #container から削除されているか取り出されている場合に、<br /> または空の div で、フローティングさせる最後の div に続く最後のエレメントとして (#container 内に) 配置できます。 */
+
 
-
clear:both;
+
#bar-normal-06-norm {
-
height:0;
+
position:absolute;
-
font-size: 1px;
+
left:554px;
-
line-height: 0px;
+
top:0px;
 +
width:109px;
 +
height:85px;
}
}
-
.sidebar1 {
+
 
-
float: left;
+
#bar-normal-07-norm {
-
width: 20%;
+
position:absolute;
-
background: #93A5C4;
+
left:663px;
-
padding-bottom: 10px;
+
top:0px;
 +
width:109px;
 +
height:85px;
}
}
-
/* ~~ ナビゲーションリストのスタイル付け (Spry などの事前作成済みのフライアウトメニューを使用する場合は削除できます) ~~ */
+
#bar-normal-08-norm {
-
ul.nav {
+
position:absolute;
-
list-style: none; /* リストのマーカーを削除します。 */
+
left:772px;
-
border-top: 1px solid #666; /* リンク用の上部のボーダーを作成します。他のすべてのものは LI 上で下部のボーダーを使用して配置されます。 */
+
top:0px;
-
margin-bottom: 15px; /* 下のコンテンツのナビゲーション間の間隔を作成します。 */
+
width:108px;
 +
height:85px;
}
}
-
ul.nav li {
+
 
-
border-bottom: 1px solid #666; /* ボタンの区切り線を作成します。 */
+
#bar-normal-09-norm {
-
}
+
position:absolute;
-
ul.nav a, ul.nav a:visited { /* これらのセレクターをグループ化することで、リンクのボタン表示が訪問後も確実に保持されます。 */
+
left:880px;
-
padding: 5px 5px 5px 15px;
+
top:0px;
-
display: block; /* リンクにブロックプロパティを指定し、リンクが含まれる LI 全体がリンクになるようにします。これにより、領域全体がマウスのクリックに反応するようになります。 */
+
width:120px;
-
text-decoration: none;
+
height:85px;
-
background: #8090AB;
+
-
color: #000;
+
-
}
+
-
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* マウスを使用する場合もキーボードを使用する場合も、背景色とテキストカラーを変更します。 */
+
-
background: #6F7D94;
+
-
color: #FFF;
+
}
}
 +
#list1 {
 +
float: left;
 +
margin: 10px;
 +
width: 45%;
 +
}
-
@charset "UTF-8";
 
-
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
+
#list2 {
 +
float: right;
 +
margin: 10px;
 +
width; 45%;
 +
}
-
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
+
#ttop {
 +
position:fixed;
 +
bottom:100px;
 +
left:auto;
 +
margin:0 0 0 904px;
 +
width:41px;
 +
height:390px;
 +
background:url(http://・・・・・/t_ptop.png) no-repeat left bottom;
 +
}
-
/*******************************************************************************
 
-
  LAYOUT INFORMATION: describes box model, positioning, z-order
+
#content{
 +
background-color: transparent;
 +
padding-top:65px;
 +
width:1000px;
 +
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
 +
font-smooth:always;
 +
border-style: none solid solid solid;
 +
border-width:0px;
 +
margin-top: 0px;
 +
}
-
  *******************************************************************************/
+
.shadow {
 +
  -moz-box-shadow: 0px 0px 15px #ccc;
 +
  -webkit-box-shadow:  0px 0px 15px #ccc;
 +
  box-shadow:  0px 0px 15px #ccc;
 +
}
-
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
+
.whitebox {
-
ul.MenuBarHorizontal
+
  -moz-box-shadow:  0px 0px 15px #ccc;
-
{
+
  -webkit-box-shadow:  0px 0px 15px #ccc;
-
margin: 0;
+
  box-shadow:  0px 0px 15px #ccc;
-
padding: 0;
+
  background-color: #FFFFFF;
-
list-style-type: none;
+
  -moz-border-radius: 15px;
-
font-size: 100%;
+
  border-radius: 15px;
-
cursor: default;
+
  margin-top: 20px;
-
width: auto;
+
  padding-top: 20px;
 +
  padding-left: 20px;
 +
  padding-right: 20px;
 +
  padding-bottom: 20px;
 +
  margin-left: 15px;
 +
  margin-right: 25px;
}
}
-
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
+
 
-
ul.MenuBarActive
+
.greybox {
-
{
+
  -moz-box-shadow: 0px 0px 15px #ccc;
-
z-index: 1000;
+
  -webkit-box-shadow: 0px 0px 15px #ccc;
 +
  box-shadow:  0px 0px 15px #ccc;
 +
  background-color: #f0e68c;
 +
  -moz-border-radius: 15px;
 +
  border-radius: 15px;
 +
  margin-top: 20px;
 +
  padding-top: 20px;
 +
  padding-left: 20px;
 +
  padding-right: 20px;
 +
  padding-bottom: 20px;
 +
  margin-left: 15px;
 +
  margin-right: 25px;
}
}
-
/* Menu item containers, position children relative to this container and are a fixed width */
+
 
-
ul.MenuBarHorizontal li
+
.greenbox {
-
{
+
  -moz-box-shadow: 0px 0px 15px #ccc;
-
margin: 0;
+
  -webkit-box-shadow: 0px 0px 15px #ccc;
-
padding: 0;
+
  box-shadow:  0px 0px 15px #ccc;
-
list-style-type: none;
+
  background-color: #90EE90;
-
font-size: 100%;
+
  -moz-border-radius: 15px;  
-
position: relative;
+
  border-radius: 15px;
-
text-align: left;
+
  margin-top: 20px;
-
cursor: pointer;
+
  padding-top: 20px;
-
width: 8em;
+
  padding-left: 20px;
-
float: left;
+
  padding-right: 20px;
 +
  padding-bottom: 20px;
 +
  margin-left: 15px;
 +
  margin-right: 25px;
}
}
-
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
+
 
-
ul.MenuBarHorizontal ul
+
.bluebox {
-
{
+
  -moz-box-shadow: 0px 0px 15px #ccc;
-
margin: 0;
+
  -webkit-box-shadow: 0px 0px 15px #ccc;
-
padding: 0;
+
  box-shadow: 0px 0px 15px #ccc;
-
list-style-type: none;
+
  background-color: #E0FFFF;
-
font-size: 100%;
+
  -moz-border-radius: 15px;  
-
z-index: 1020;
+
  border-radius: 15px;
-
cursor: default;
+
  margin-top: 20px;
-
width: 8.2em;
+
  padding-top: 20px;
-
position: absolute;
+
  padding-left: 20px;
-
left: -1000em;
+
  padding-right: 20px;
-
}
+
  padding-bottom: 20px;
-
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
+
  margin-left: 15px;
-
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
+
  margin-right: 25px;
-
{
+
-
left: auto;
+
-
}
+
-
/* Menu item containers are same fixed width as parent */
+
-
ul.MenuBarHorizontal ul li
+
-
{
+
-
width: 8.2em;
+
-
}
+
-
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
+
-
ul.MenuBarHorizontal ul ul
+
-
{
+
-
position: absolute;
+
-
margin: -5% 0 0 95%;
+
-
}
+
-
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
+
-
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
+
-
{
+
-
left: auto;
+
-
top: 0;
+
}
}
-
/*menubar css*/
 
-
/* Submenu containers have borders on all sides */
+
.redbox {
-
ul.MenuBarHorizontal ul
+
  -moz-box-shadow: 0px 0px 15px #ccc;
-
{
+
  -webkit-box-shadow: 0px 0px 15px #ccc;
-
border: 1px solid #CCC;
+
  box-shadow: 0px 0px 15px #ccc;
-
}
+
  background-color: #FFF0F5;
-
/* Menu items are a light gray block with padding and no text decoration */
+
  -moz-border-radius: 15px;  
-
ul.MenuBarHorizontal a
+
  border-radius: 15px;
-
{
+
  margin-top: 20px;
-
display: block;
+
  padding-top: 20px;
-
cursor: pointer;
+
  padding-left: 20px;
-
background-color: #EEE;
+
  padding-right: 20px;
-
padding: 0.5em 0.75em;
+
  padding-bottom: 20px;
-
color: #333;
+
  margin-left: 15px;
-
text-decoration: none;
+
  margin-right: 25px;
-
}
+
-
/* Menu items that have mouse over or focus have a blue background and white text */
+
-
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
+
-
{
+
-
background-color: #33C;
+
-
color: #FFF;
+
-
}
+
-
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
+
-
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
+
-
{
+
-
background-color: #33C;
+
-
color: #FFF;
+
}
}
-
/*******************************************************************************
 
-
SUBMENU INDICATION: styles if there is a submenu under a given menu item
 
-
*******************************************************************************/
+
.whitebox2 {
 +
-moz-box-shadow: 0px 0px 5px #444;
 +
-webkit-box-shadow: 0px 0px 5px #444;
 +
box-shadow: 0px 0px 5px #444;
 +
background-color: #DCDDDE;
 +
-moz-border-radius: 5px;
 +
border-radius: 3px;
 +
margin-top: -10px;
 +
padding-top: 13.5px;
 +
padding-left: 0px;
 +
padding-right: 0px;
 +
padding-bottom: 0px;
 +
margin-left: 9px;
 +
margin-right: 19px;
 +
text-align: center;
 +
font-weight: bold;
 +
}
-
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
+
.notebook_box {
-
ul.MenuBarHorizontal a.MenuBarItemSubmenu
+
  -moz-box-shadow: 0px 0px 5px #444;
-
{
+
  -webkit-box-shadow: 0px 0px 5px #444;
-
background-image: url(SpryMenuBarDown.gif);
+
  box-shadow: 0px 0px 5px #444;
-
background-repeat: no-repeat;
+
  box-shadow: 0px 0px 5px #444;
-
background-position: 95% 50%;
+
  background-color: #f1f2f3;
 +
  moz-border-radius: 5px; 
 +
  border-radius: 5px;
 +
  margin-top: 0px;
 +
  padding-top: 5px;-
 +
  padding-left: 10px;
 +
  padding-right: 10px;
 +
  padding-bottom: 5px;
 +
  margin-left: 5px;
 +
  margin-right: 5px;
 +
  align:center;
}
}
-
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
+
 
-
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
+
 
-
{
+
.monthtable {
-
background-image: url(SpryMenuBarRight.gif);
+
  text-align:center;  
-
background-repeat: no-repeat;
+
  background-color:#f1f2f3;
-
background-position: 95% 50%;
+
}
}
-
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
+
 
-
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
+
.k{
-
{
+
color: #FF0000;
-
background-image: url(SpryMenuBarDownHover.gif);
+
background: none;
-
background-repeat: no-repeat;
+
-
background-position: 95% 50%;
+
-
}
+
-
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
+
-
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
+
-
{
+
-
background-image: url(SpryMenuBarRightHover.gif);
+
-
background-repeat: no-repeat;
+
-
background-position: 95% 50%;
+
}
}
-
/*******************************************************************************
 
-
BROWSER HACKS: the hacks below should not be changed unless you are an expert
+
h1,h3,h5{
-
 
+
color: #0000FF;
-
*******************************************************************************/
+
background: none;
-
 
+
font-weight: normal;
-
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
+
margin: 0;
-
ul.MenuBarHorizontal iframe
+
padding-top: .10em;
-
{
+
padding-bottom: .20em;
-
position: absolute;
+
border-bottom: none;  
-
z-index: 1010;
+
-
filter:alpha(opacity:0.1);
+
}
}
-
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
+
h2, h4, h6{
-
@media screen, projection
+
color: #000000;
-
{
+
background: none;
-
ul.MenuBarHorizontal li.MenuBarItemIE
+
font-weight: normal;
-
{
+
margin: 0;
-
display: inline;
+
padding-top: .5em;
-
f\loat: left;
+
padding-bottom: .17em;
-
background: #FFF;
+
border-bottom: none;   
-
}
+
}
}
Line 288: Line 306:
-->
-->
</style>
</style>
-
<script type="text/javascript">
+
<!-- End Save for Web Styles -->
-
 
+
-
(function() { // BeginSpryComponent
+
-
 
+
-
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
+
-
 
+
-
Spry.BrowserSniff = function()
+
-
{
+
-
var b = navigator.appName.toString();
+
-
var up = navigator.platform.toString();
+
-
var ua = navigator.userAgent.toString();
+
-
 
+
-
this.mozilla = this.ie = this.opera = this.safari = false;
+
-
var re_opera = /Opera.([0-9\.]*)/i;
+
-
var re_msie = /MSIE.([0-9\.]*)/i;
+
-
var re_gecko = /gecko/i;
+
-
var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
+
-
var r = false;
+
-
 
+
-
if ( (r = ua.match(re_opera))) {
+
-
this.opera = true;
+
-
this.version = parseFloat(r[1]);
+
-
} else if ( (r = ua.match(re_msie))) {
+
-
this.ie = true;
+
-
this.version = parseFloat(r[1]);
+
-
} else if ( (r = ua.match(re_safari))) {
+
-
this.safari = true;
+
-
this.version = parseFloat(r[2]);
+
-
} else if (ua.match(re_gecko)) {
+
-
var re_gecko_version = /rv:\s*([0-9\.]+)/i;
+
-
r = ua.match(re_gecko_version);
+
-
this.mozilla = true;
+
-
this.version = parseFloat(r[1]);
+
-
}
+
-
this.windows = this.mac = this.linux = false;
+
-
 
+
-
this.Platform = ua.match(/windows/i) ? "windows" :
+
-
(ua.match(/linux/i) ? "linux" :
+
-
(ua.match(/mac/i) ? "mac" :
+
-
ua.match(/unix/i)? "unix" : "unknown"));
+
-
this[this.Platform] = true;
+
-
this.v = this.version;
+
-
 
+
-
if (this.safari && this.mac && this.mozilla) {
+
-
this.mozilla = false;
+
-
}
+
-
};
+
-
 
+
-
Spry.is = new Spry.BrowserSniff();
+
-
 
+
-
// Constructor for Menu Bar
+
-
// element should be an ID of an unordered list (<ul> tag)
+
-
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
+
-
Spry.Widget.MenuBar = function(element, opts)
+
-
{
+
-
this.init(element, opts);
+
-
};
+
-
 
+
-
Spry.Widget.MenuBar.prototype.init = function(element, opts)
+
-
{
+
-
this.element = this.getElement(element);
+
-
 
+
-
// represents the current (sub)menu we are operating on
+
-
this.currMenu = null;
+
-
this.showDelay = 250;
+
-
this.hideDelay = 600;
+
-
if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
+
-
{
+
-
// bail on older unsupported browsers
+
-
return;
+
-
}
+
-
 
+
-
// Fix IE6 CSS images flicker
+
-
if (Spry.is.ie && Spry.is.version < 7){
+
-
try {
+
-
document.execCommand("BackgroundImageCache", false, true);
+
-
} catch(err) {}
+
-
}
+
-
 
+
-
this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
+
-
this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
+
-
this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
+
-
this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
+
-
this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
+
-
 
+
-
this.hoverClass = 'MenuBarItemHover';
+
-
this.subHoverClass = 'MenuBarItemSubmenuHover';
+
-
this.subVisibleClass ='MenuBarSubmenuVisible';
+
-
this.hasSubClass = 'MenuBarItemSubmenu';
+
-
this.activeClass = 'MenuBarActive';
+
-
this.isieClass = 'MenuBarItemIE';
+
-
this.verticalClass = 'MenuBarVertical';
+
-
this.horizontalClass = 'MenuBarHorizontal';
+
-
this.enableKeyboardNavigation = true;
+
-
 
+
-
this.hasFocus = false;
+
-
// load hover images now
+
-
if(opts)
+
-
{
+
-
for(var k in opts)
+
-
{
+
-
if (typeof this[k] == 'undefined')
+
-
{
+
-
var rollover = new Image;
+
-
rollover.src = opts[k];
+
-
}
+
-
}
+
-
Spry.Widget.MenuBar.setOptions(this, opts);
+
-
}
+
-
 
+
-
// safari doesn't support tabindex
+
-
if (Spry.is.safari)
+
-
this.enableKeyboardNavigation = false;
+
-
 
+
-
if(this.element)
+
-
{
+
-
this.currMenu = this.element;
+
-
var items = this.element.getElementsByTagName('li');
+
-
for(var i=0; i<items.length; i++)
+
-
{
+
-
if (i > 0 && this.enableKeyboardNavigation)
+
-
items[i].getElementsByTagName('a')[0].tabIndex='-1';
+
-
 
+
-
this.initialize(items[i], element);
+
-
if(Spry.is.ie)
+
-
{
+
-
this.addClassName(items[i], this.isieClass);
+
-
items[i].style.position = "static";
+
-
}
+
-
}
+
-
if (this.enableKeyboardNavigation)
+
-
{
+
-
var self = this;
+
-
this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
+
-
}
+
-
 
+
-
if(Spry.is.ie)
+
-
{
+
-
if(this.hasClassName(this.element, this.verticalClass))
+
-
{
+
-
this.element.style.position = "relative";
+
-
}
+
-
var linkitems = this.element.getElementsByTagName('a');
+
-
for(var i=0; i<linkitems.length; i++)
+
-
{
+
-
linkitems[i].style.position = "relative";
+
-
}
+
-
}
+
-
}
+
-
};
+
-
Spry.Widget.MenuBar.KEY_ESC = 27;
+
-
Spry.Widget.MenuBar.KEY_UP = 38;
+
-
Spry.Widget.MenuBar.KEY_DOWN = 40;
+
-
Spry.Widget.MenuBar.KEY_LEFT = 37;
+
-
Spry.Widget.MenuBar.KEY_RIGHT = 39;
+
-
 
+
-
Spry.Widget.MenuBar.prototype.getElement = function(ele)
+
-
{
+
-
if (ele && typeof ele == "string")
+
-
return document.getElementById(ele);
+
-
return ele;
+
-
};
+
-
 
+
-
Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
+
-
{
+
-
if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
+
-
{
+
-
return false;
+
-
}
+
-
return true;
+
-
};
+
-
 
+
-
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
+
-
{
+
-
if (!ele || !className || this.hasClassName(ele, className))
+
-
return;
+
-
ele.className += (ele.className ? " " : "") + className;
+
-
};
+
-
 
+
-
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
+
-
{
+
-
if (!ele || !className || !this.hasClassName(ele, className))
+
-
return;
+
-
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
+
-
};
+
-
 
+
-
// addEventListener for Menu Bar
+
-
// attach an event to a tag without creating obtrusive HTML code
+
-
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
+
-
{
+
-
try
+
-
{
+
-
if (element.addEventListener)
+
-
{
+
-
element.addEventListener(eventType, handler, capture);
+
-
}
+
-
else if (element.attachEvent)
+
-
{
+
-
element.attachEvent('on' + eventType, handler);
+
-
}
+
-
}
+
-
catch (e) {}
+
-
};
+
-
 
+
-
// createIframeLayer for Menu Bar
+
-
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
+
-
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
+
-
{
+
-
var layer = document.createElement('iframe');
+
-
layer.tabIndex = '-1';
+
-
layer.src = 'javascript:""';
+
-
layer.frameBorder = '0';
+
-
layer.scrolling = 'no';
+
-
menu.parentNode.appendChild(layer);
+
-
+
-
layer.style.left = menu.offsetLeft + 'px';
+
-
layer.style.top = menu.offsetTop + 'px';
+
-
layer.style.width = menu.offsetWidth + 'px';
+
-
layer.style.height = menu.offsetHeight + 'px';
+
-
};
+
-
 
+
-
// removeIframeLayer for Menu Bar
+
-
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
+
-
Spry.Widget.MenuBar.prototype.removeIframeLayer =  function(menu)
+
-
{
+
-
var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
+
-
while(layers.length > 0)
+
-
{
+
-
layers[0].parentNode.removeChild(layers[0]);
+
-
}
+
-
};
+
-
 
+
-
// clearMenus for Menu Bar
+
-
// root is the top level unordered list (<ul> tag)
+
-
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
+
-
{
+
-
var menus = root.getElementsByTagName('ul');
+
-
for(var i=0; i<menus.length; i++)
+
-
this.hideSubmenu(menus[i]);
+
-
 
+
-
this.removeClassName(this.element, this.activeClass);
+
-
};
+
-
 
+
-
// bubbledTextEvent for Menu Bar
+
-
// identify bubbled up text events in Safari so we can ignore them
+
-
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
+
-
{
+
-
return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
+
-
};
+
-
 
+
-
// showSubmenu for Menu Bar
+
-
// set the proper CSS class on this menu to show it
+
-
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
+
-
{
+
-
if(this.currMenu)
+
-
{
+
-
this.clearMenus(this.currMenu);
+
-
this.currMenu = null;
+
-
}
+
-
+
-
if(menu)
+
-
{
+
-
this.addClassName(menu, this.subVisibleClass);
+
-
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
+
-
{
+
-
if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
+
-
{
+
-
menu.style.top = menu.parentNode.offsetTop + 'px';
+
-
}
+
-
}
+
-
if(Spry.is.ie && Spry.is.version < 7)
+
-
{
+
-
this.createIframeLayer(menu);
+
-
}
+
-
}
+
-
this.addClassName(this.element, this.activeClass);
+
-
};
+
-
 
+
-
// hideSubmenu for Menu Bar
+
-
// remove the proper CSS class on this menu to hide it
+
-
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
+
-
{
+
-
if(menu)
+
-
{
+
-
this.removeClassName(menu, this.subVisibleClass);
+
-
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
+
-
{
+
-
menu.style.top = '';
+
-
menu.style.left = '';
+
-
}
+
-
if(Spry.is.ie && Spry.is.version < 7)
+
-
this.removeIframeLayer(menu);
+
-
}
+
-
};
+
-
 
+
-
// initialize for Menu Bar
+
-
// create event listeners for the Menu Bar widget so we can properly
+
-
// show and hide submenus
+
-
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
+
-
{
+
-
var opentime, closetime;
+
-
var link = listitem.getElementsByTagName('a')[0];
+
-
var submenus = listitem.getElementsByTagName('ul');
+
-
var menu = (submenus.length > 0 ? submenus[0] : null);
+
-
 
+
-
if(menu)
+
-
this.addClassName(link, this.hasSubClass);
+
-
 
+
-
if(!Spry.is.ie)
+
-
{
+
-
// define a simple function that comes standard in IE to determine
+
-
// if a node is within another node
+
-
listitem.contains = function(testNode)
+
-
{
+
-
// this refers to the list item
+
-
if(testNode == null)
+
-
return false;
+
-
 
+
-
if(testNode == this)
+
-
return true;
+
-
else
+
-
return this.contains(testNode.parentNode);
+
-
};
+
-
}
+
-
 
+
-
// need to save this for scope further down
+
-
var self = this;
+
-
this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
+
-
this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
+
-
 
+
-
if (this.enableKeyboardNavigation)
+
-
{
+
-
this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
+
-
this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
+
-
}
+
-
};
+
-
Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
+
-
{
+
-
this.lastOpen = listitem.getElementsByTagName('a')[0];
+
-
this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
+
-
this.hasFocus = true;
+
-
};
+
-
Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
+
-
{
+
-
this.clearSelection(listitem);
+
-
};
+
-
Spry.Widget.MenuBar.prototype.clearSelection = function(el){
+
-
//search any intersection with the current open element
+
-
if (!this.lastOpen)
+
-
return;
+
-
 
+
-
if (el)
+
-
{
+
-
el = el.getElementsByTagName('a')[0];
+
-
+
-
// check children
+
-
var item = this.lastOpen;
+
-
while (item != this.element)
+
-
{
+
-
var tmp = el;
+
-
while (tmp != this.element)
+
-
{
+
-
if (tmp == item)
+
-
return;
+
-
try{
+
-
tmp = tmp.parentNode;
+
-
}catch(err){break;}
+
-
}
+
-
item = item.parentNode;
+
-
}
+
-
}
+
-
var item = this.lastOpen;
+
-
while (item != this.element)
+
-
{
+
-
this.hideSubmenu(item.parentNode);
+
-
var link = item.getElementsByTagName('a')[0];
+
-
this.removeClassName(link, this.hoverClass);
+
-
this.removeClassName(link, this.subHoverClass);
+
-
item = item.parentNode;
+
-
}
+
-
this.lastOpen = false;
+
-
};
+
-
Spry.Widget.MenuBar.prototype.keyDown = function (e)
+
-
{
+
-
if (!this.hasFocus)
+
-
return;
+
-
 
+
-
if (!this.lastOpen)
+
-
{
+
-
this.hasFocus = false;
+
-
return;
+
-
}
+
-
 
+
-
var e = e|| event;
+
-
var listitem = this.lastOpen.parentNode;
+
-
var link = this.lastOpen;
+
-
var submenus = listitem.getElementsByTagName('ul');
+
-
var menu = (submenus.length > 0 ? submenus[0] : null);
+
-
var hasSubMenu = (menu) ? true : false;
+
-
 
+
-
var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];
+
-
+
-
if (!opts[3])
+
-
opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;
+
-
 
+
-
var found = 0;
+
-
switch (e.keyCode){
+
-
case this.upKeyCode:
+
-
found = this.getElementForKey(opts, 'y', 1);
+
-
break;
+
-
case this.downKeyCode:
+
-
found = this.getElementForKey(opts, 'y', -1);
+
-
break;
+
-
case this.leftKeyCode:
+
-
found = this.getElementForKey(opts, 'x', 1);
+
-
break;
+
-
case this.rightKeyCode:
+
-
found = this.getElementForKey(opts, 'x', -1);
+
-
break;
+
-
case this.escKeyCode:
+
-
case 9:
+
-
this.clearSelection();
+
-
this.hasFocus = false;
+
-
default: return;
+
-
}
+
-
switch (found)
+
-
{
+
-
case 0: return;
+
-
case 1:
+
-
//subopts
+
-
this.mouseOver(listitem, e);
+
-
break;
+
-
case 2:
+
-
//parent
+
-
this.mouseOut(opts[2], e);
+
-
break;
+
-
case 3:
+
-
case 4:
+
-
// left - right
+
-
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
+
-
break;
+
-
}
+
-
var link = opts[found].getElementsByTagName('a')[0];
+
-
if (opts[found].nodeName.toLowerCase() == 'ul')
+
-
opts[found] = opts[found].getElementsByTagName('li')[0];
+
-
 
+
-
this.addClassName(link, opts[found].getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
+
-
this.lastOpen = link;
+
-
opts[found].getElementsByTagName('a')[0].focus();
+
-
 
+
-
        //stop further event handling by the browser
+
-
return Spry.Widget.MenuBar.stopPropagation(e);
+
-
};
+
-
Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
+
-
{
+
-
var link = listitem.getElementsByTagName('a')[0];
+
-
var submenus = listitem.getElementsByTagName('ul');
+
-
var menu = (submenus.length > 0 ? submenus[0] : null);
+
-
var hasSubMenu = (menu) ? true : false;
+
-
if (this.enableKeyboardNavigation)
+
-
this.clearSelection(listitem);
+
-
 
+
-
if(this.bubbledTextEvent())
+
-
{
+
-
// ignore bubbled text events
+
-
return;
+
-
}
+
-
 
+
-
if (listitem.closetime)
+
-
clearTimeout(listitem.closetime);
+
-
 
+
-
if(this.currMenu == listitem)
+
-
{
+
-
this.currMenu = null;
+
-
}
+
-
 
+
-
// move the focus too
+
-
if (this.hasFocus)
+
-
link.focus();
+
-
 
+
-
// show menu highlighting
+
-
this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
+
-
this.lastOpen = link;
+
-
if(menu && !this.hasClassName(menu, this.subHoverClass))
+
-
{
+
-
var self = this;
+
-
listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);
+
-
}
+
-
};
+
-
Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)
+
-
{
+
-
var link = listitem.getElementsByTagName('a')[0];
+
-
var submenus = listitem.getElementsByTagName('ul');
+
-
var menu = (submenus.length > 0 ? submenus[0] : null);
+
-
var hasSubMenu = (menu) ? true : false;
+
-
if(this.bubbledTextEvent())
+
-
{
+
-
// ignore bubbled text events
+
-
return;
+
-
}
+
-
 
+
-
var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
+
-
if(!listitem.contains(related))
+
-
{
+
-
if (listitem.opentime)
+
-
clearTimeout(listitem.opentime);
+
-
this.currMenu = listitem;
+
-
 
+
-
// remove menu highlighting
+
-
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
+
-
if(menu)
+
-
{
+
-
var self = this;
+
-
listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);
+
-
}
+
-
if (this.hasFocus)
+
-
link.blur();
+
-
}
+
-
};
+
-
Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)
+
-
{
+
-
var child = element[sibling];
+
-
while (child && child.nodeName.toLowerCase() !='li')
+
-
child = child[sibling];
+
-
 
+
-
return child;
+
-
};
+
-
Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
+
-
{
+
-
var found = 0;
+
-
var rect = Spry.Widget.MenuBar.getPosition;
+
-
var ref = rect(els[found]);
+
-
 
+
-
var hideSubmenu = false;
+
-
//make the subelement visible to compute the position
+
-
if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
+
-
{
+
-
els[1].style.visibility = 'hidden';
+
-
this.showSubmenu(els[1]);
+
-
hideSubmenu = true;
+
-
}
+
-
 
+
-
var isVert = this.hasClassName(this.element, this.verticalClass);
+
-
var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
+
-
+
-
for (var i = 1; i < els.length; i++){
+
-
//when navigating on the y axis in vertical menus, ignore children and parents
+
-
if(prop=='y' && isVert && (i==1 || i==2))
+
-
{
+
-
continue;
+
-
}
+
-
//when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents
+
-
if(prop=='x' && !isVert && !hasParent && (i==1 || i==2))
+
-
{
+
-
continue;
+
-
}
+
-
+
-
if (els[i])
+
-
{
+
-
var tmp = rect(els[i]);
+
-
if ( (dir * tmp[prop]) < (dir * ref[prop]))
+
-
{
+
-
ref = tmp;
+
-
found = i;
+
-
}
+
-
}
+
-
}
+
-
+
-
// hide back the submenu
+
-
if (els[1] && hideSubmenu){
+
-
this.hideSubmenu(els[1]);
+
-
els[1].style.visibility =  '';
+
-
}
+
-
 
+
-
return found;
+
-
};
+
-
Spry.Widget.MenuBar.camelize = function(str)
+
-
{
+
-
if (str.indexOf('-') == -1){
+
-
return str;
+
-
}
+
-
var oStringList = str.split('-');
+
-
var isFirstEntry = true;
+
-
var camelizedString = '';
+
-
 
+
-
for(var i=0; i < oStringList.length; i++)
+
-
{
+
-
if(oStringList[i].length>0)
+
-
{
+
-
if(isFirstEntry)
+
-
{
+
-
camelizedString = oStringList[i];
+
-
isFirstEntry = false;
+
-
}
+
-
else
+
-
{
+
-
var s = oStringList[i];
+
-
camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
+
-
}
+
-
}
+
-
}
+
-
 
+
-
return camelizedString;
+
-
};
+
-
 
+
-
Spry.Widget.MenuBar.getStyleProp = function(element, prop)
+
-
{
+
-
var value;
+
-
try
+
-
{
+
-
if (element.style)
+
-
value = element.style[Spry.Widget.MenuBar.camelize(prop)];
+
-
 
+
-
if (!value)
+
-
if (document.defaultView && document.defaultView.getComputedStyle)
+
-
{
+
-
var css = document.defaultView.getComputedStyle(element, null);
+
-
value = css ? css.getPropertyValue(prop) : null;
+
-
}
+
-
else if (element.currentStyle)
+
-
{
+
-
value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
+
-
}
+
-
}
+
-
catch (e) {}
+
-
 
+
-
return value == 'auto' ? null : value;
+
-
};
+
-
Spry.Widget.MenuBar.getIntProp = function(element, prop)
+
-
{
+
-
var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
+
-
if (isNaN(a))
+
-
return 0;
+
-
return a;
+
-
};
+
-
 
+
-
Spry.Widget.MenuBar.getPosition = function(el, doc)
+
-
{
+
-
doc = doc || document;
+
-
if (typeof(el) == 'string') {
+
-
el = doc.getElementById(el);
+
-
}
+
-
 
+
-
if (!el) {
+
-
return false;
+
-
}
+
-
 
+
-
if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
+
-
//element must be visible to have a box
+
-
return false;
+
-
}
+
-
 
+
-
var ret = {x:0, y:0};
+
-
var parent = null;
+
-
var box;
+
-
 
+
-
if (el.getBoundingClientRect) { // IE
+
-
box = el.getBoundingClientRect();
+
-
var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
+
-
var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
+
-
ret.x = box.left + scrollLeft;
+
-
ret.y = box.top + scrollTop;
+
-
} else if (doc.getBoxObjectFor) { // gecko
+
-
box = doc.getBoxObjectFor(el);
+
-
ret.x = box.x;
+
-
ret.y = box.y;
+
-
} else { // safari/opera
+
-
ret.x = el.offsetLeft;
+
-
ret.y = el.offsetTop;
+
-
parent = el.offsetParent;
+
-
if (parent != el) {
+
-
while (parent) {
+
-
ret.x += parent.offsetLeft;
+
-
ret.y += parent.offsetTop;
+
-
parent = parent.offsetParent;
+
-
}
+
-
}
+
-
// opera & (safari absolute) incorrectly account for body offsetTop
+
-
if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
+
-
ret.y -= doc.body.offsetTop;
+
-
}
+
-
if (el.parentNode)
+
-
parent = el.parentNode;
+
-
else
+
-
parent = null;
+
-
if (parent.nodeName){
+
-
var cas = parent.nodeName.toUpperCase();
+
-
while (parent && cas != 'BODY' && cas != 'HTML') {
+
-
cas = parent.nodeName.toUpperCase();
+
-
ret.x -= parent.scrollLeft;
+
-
ret.y -= parent.scrollTop;
+
-
if (parent.parentNode)
+
-
parent = parent.parentNode;
+
-
else
+
-
parent = null;
+
-
}
+
-
}
+
-
return ret;
+
-
};
+
-
 
+
-
Spry.Widget.MenuBar.stopPropagation = function(ev)
+
-
{
+
-
if (ev.stopPropagation)
+
-
ev.stopPropagation();
+
-
else
+
-
ev.cancelBubble = true;
+
-
if (ev.preventDefault)
+
-
ev.preventDefault();
+
-
else
+
-
ev.returnValue = false;
+
-
};
+
-
 
+
-
Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
+
-
{
+
-
if (!optionsObj)
+
-
return;
+
-
for (var optionName in optionsObj)
+
-
{
+
-
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
+
-
continue;
+
-
obj[optionName] = optionsObj[optionName];
+
-
}
+
-
};
+
-
 
+
-
})(); // EndSpryComponent
+
-
</script>
+
</head>
</head>

Revision as of 10:19, 7 July 2013

bar

Retrieved from "http://2013.igem.org/Template:Tokyotechcss"