Difference between revisions of "Template:Tokyo Tech"

Line 6: Line 6:
 
<html>
 
<html>
 
<head>
 
<head>
−
 
+
<style type="text/css">
−
<style type="text/css">
+
 
<!--
 
<!--
−
/********************************* DEFAULT WIKI SETTINGS  ********************************/
 
−
 
−
  #sideMenu, #top_title {display:none;}
 
−
       
 
−
        #content{
 
−
        width: 100%;
 
−
        margin: 0px;
 
−
        padding: 0;
 
−
    background-image: url("https://static.igem.org/mediawiki/2016/8/83/Tokyo_Tech_Background.png");
 
−
    background-repeat: no-repeat;
 
−
    background-position: center center;
 
−
    background-size: cover;
 
−
    background-attachment: fixed;
 
−
}
 
−
#globalWrapper, #content{
 
−
    background-color: transparent;
 
−
    border: 0px;
 
−
    }
 
−
/*********************************/DEFAULT WIKI SETTINGS  ********************************/
 
−
 
−
 
−
#logo{
 
−
width: 90%;
 
−
min-width: 880px;
 
−
max-width: 1100px;
 
−
color: #ffffff;
 
−
// position: absolute;
 
−
margin: 0 auto;
 
−
padding: 2px;
 
−
border: 3px solid #583612;
 
−
    border-radius: 5px;        /* CSS3 */ 
 
−
  /* -webkit-border-radius: 5px;    /* for Safari,Google Chrome */ 
 
−
  /* -moz-border-radius: 5px;  /* for Firefox */ 
 
−
 
−
}
 
−
/*
 
−
#inner_logo{
 
−
margin: 0;
 
−
padding: 0;
 
−
border: 9px solid #583612;
 
−
background-color:rgba(255,255,255,0.5)
 
−
}*/
 
−
#under_logo{
 
−
width: 880px;
 
−
// midth: 90%;
 
−
// min-width: 880px;
 
−
// max-width: 1100px;
 
−
margin: 5px auto 0;
 
−
}
 
−
#under_logo img{
 
−
float: left;
 
−
}
 
−
p#logo_sentence{
 
−
font-family: "Times New Roman";
 
−
font-size: 30px;
 
−
text-align: center;
 
−
font-style: italic;
 
−
color: #583612;
 
−
float: left;
 
−
margin-left: 100px;
 
−
margin-right: 100px;
 
−
}
 
−
p#logo_image_space1{
 
−
width: 30px;
 
−
float: left;
 
−
}
 
−
p#logo_image_space2{
 
−
width: 40px;
 
−
float: left;
 
−
}
 
−
 
−
 
 
/****************************** About Menu ************************************/
 
/****************************** About Menu ************************************/
 
#menu_list_division{
 
#menu_list_division{
Line 95: Line 22:
 
min-width: 880px;
 
min-width: 880px;
 
max-width: 1100px;
 
max-width: 1100px;
−
margin: 0;
+
margin: 0 auto 30px;
 
padding: 0 auto;
 
padding: 0 auto;
 
display: table;
 
display: table;
Line 138: Line 65:
 
}
 
}
 
.menu_list_class li:hover ul li{
 
.menu_list_class li:hover ul li{
−
overflow: visible;
 
 
height: 48px;
 
height: 48px;
−
// background: #583612;
 
 
}
 
}
−
/*
 
−
.menu_list_class li a span{
 
−
position: absolute;
 
−
top: 50%;
 
−
left: 50%;
 
−
vertical-align: middle;
 
−
}
 
−
*/
 
  
−
#menu_list_division ul.drop_menu{
+
.drop_menu{
 +
visibility: hidden;
 
position: absolute;
 
position: absolute;
−
list-style: none;
 
−
width: 200%;
 
−
// left: -100%;
 
−
left: -50%;
 
−
z-index: 9999;
 
−
// top: 95%;
 
 
top: 100%;
 
top: 100%;
 
margin: 0;
 
margin: 0;
Line 164: Line 76:
 
}
 
}
 
.drop_menu li{
 
.drop_menu li{
−
display: block;
+
float: left;
−
width: 100%;
+
list-style: none;
−
overflow: hidden;
+
position: relative;
−
height: 0px;
+
}
−
transition: .5s;
+
#experiment_list{
 +
left: -200%;
 +
width: 800%;
 +
}
 +
#experiment_list li{
 +
width: 25%;
 
margin: 0;
 
margin: 0;
 
padding: 0;
 
padding: 0;
 
}
 
}
−
.drop_menu li a{
+
#human_practices_list{
−
display: block;
+
left: -400%;
−
box-sizing: border-box;
+
width: 800%;
 +
}
 +
#human_practices_list li{
 +
width: 25%;
 
margin: 0;
 
margin: 0;
−
width: 100%;
+
padding: 0;
−
padding: 5px 15px;
+
−
// padding: 0 15px;
+
−
height: 48px;
+
−
border-top: 1px solid #583612;
+
−
text-align: left;
+
 
}
 
}
−
.drop_menu li:hover > a{
+
#parts_list{
−
// background: #0d4f78;
+
left: -300%;
 +
width: 600%;
 
}
 
}
−
.drop_menu li a:hover{
+
#parts_list li{
−
background: #583612;
+
width: 33.33%;
−
color: #ffffff;
+
−
}
+
−
 
+
−
.drop_menu li:hover ul li{
+
−
overflow: visible;
+
−
height: 48px;
+
−
// background: #186b91;
+
−
}
+
−
#menu_list_division ul.second_level_menu{
+
−
list-style: none;
+
−
position: absolute;
+
−
top: 0;
+
−
/* top: -8%; // for igem page */
+
−
left: 100%;
+
−
/* left: 90%; // for igem page */
+
−
right: 80%;
+
 
margin: 0;
 
margin: 0;
 
padding: 0;
 
padding: 0;
−
// background: #0d4f78;
 
−
-webkit-transition: all .5s ease;
 
−
transition: all .5s ease;
 
 
}
 
}
−
.second_level_menu li{
+
#about_us_list{
−
display: inline-block;
+
left: -700%;
−
position: relative;
+
width: 800%;
−
transition: .2s;
+
}
 +
#about_us_list li{
 +
width: 16.66%;
 
margin: 0;
 
margin: 0;
 
padding: 0;
 
padding: 0;
 
}
 
}
−
.second_level_menu li a{
 
−
display: inline-block;
 
−
box-sizing: border-box;
 
−
// width: 100%;
 
−
margin: 0;
 
−
padding: 5px 15px;
 
−
height: 48px;
 
−
border-top: 1px solid #583612;
 
−
// background: #0d4f78;
 
−
text-align: left;
 
−
text-decoration: none;
 
−
}
 
−
 
−
.menu_list_class li:hover ul li ul{
 
−
overflow: hidden;
 
−
width: 0%;
 
−
}
 
−
.menu_list_class li ul li:hover ul{
 
−
overflow: visible;
 
−
width: 100%;
 
−
}
 
−
.menu_list_class li ul li:hover ul li{
 
−
overflow: visible;
 
−
width: 100%;
 
−
height: 48px;
 
−
// background: #186b91;
 
−
}
 
−
ul#experiment_list{
 
−
width: 200%;
 
−
left: -100%;
 
−
}
 
−
#menu_list_division ul#promoter_list{
 
−
position: absolute;
 
−
top: -100%;
 
−
}
 
−
 
−
/********************************* For smart phone ***********************************/
 
−
/*
 
−
@media screen and (max-width: 360px){
 
−
#menu_list_division{
 
−
//overflow: hidden;
 
−
width: 300px;
 
−
height: 350px;
 
−
margin: 0 auto;
 
−
}
 
−
.menu_list_class{
 
−
list-style: none;
 
−
width: 108px;
 
−
}
 
−
.menu_list_class li{
 
−
display: inline;
 
−
position: relative;
 
−
width: 108px;
 
−
height: 40px;
 
−
                both: clear;
 
−
}
 
−
.menu_list_class > li{
 
−
border-bottom: 1px solid #052d5d;
 
−
}
 
−
.menu li:last-child{
 
−
border-bottom: none;
 
−
}
 
−
.drop_menu > li{
 
−
border-bottom: 1px solid #052d5d;
 
−
}
 
−
.drop_menu > li:last-child{
 
−
border-bottom: none;
 
−
}
 
−
menu_list_class li a{
 
−
display: block;
 
−
width: 100px;
 
−
height: 40px;
 
−
color: #ffffff;
 
−
font-size: 12px;
 
−
padding-left: 5px;
 
−
background: #0d4f78;
 
−
}
 
−
menu_list li a:hover{
 
−
background: #186b91;
 
−
}
 
−
menu_list_class > li:hover > a{
 
−
background: #186b91;
 
−
}
 
−
meun_list_class > li:hover li:hover> a{
 
−
background: #186b91;
 
−
}
 
−
.drop_menu > li{
 
−
overflow: visible;
 
−
top: -40px;
 
−
left: 108px;
 
−
height: 40px;
 
−
}
 
−
.drop_menu li{
 
−
overflow: hidden;
 
−
height: 0;
 
−
left: 108px;
 
−
}
 
−
.drop_menu li a{
 
−
background: #0d4f78;
 
−
}
 
−
}
 
−
*/
 
−
 
−
body {
 
−
  /* 画像ファイルの指定 */
 
−
  background-image: url(https://static.igem.org/mediawiki/2016/8/83/Tokyo_Tech_Background.png);
 
−
   
 
−
  /* 画像を常に天地左右の中央に配置 */
 
−
  background-position: center center;
 
−
   
 
−
  /* 画像をタイル状に繰り返し表示しない */
 
−
  background-repeat: no-repeat;
 
−
   
 
−
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
 
−
  background-attachment: fixed;
 
−
   
 
−
  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
 
−
  background-size: cover;
 
−
   
 
−
  /* 背景画像が読み込まれる前に表示される背景のカラー */
 
−
  background-color: #464646;
 
−
}
 
−
 
 
--></style>
 
--></style>
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 
</head>
 
</head>
 
<body>
 
<body>
−
<div id="logo">
 
−
<div id="inner_logo" align="center">
 
−
<a href="https://2016.igem.org/Team:Tokyo_Tech">
 
−
<img src="https://static.igem.org/mediawiki/2016/7/7c/T--Tokyo_Tech--Topnew.png" height="300px" />
 
−
</a>
 
−
</div><!-- /inner_logo -->
 
−
</div><!-- /logo -->
 
−
 
−
<div class="clear"></div><!-- /clear -->
 
 
<div id="menu_list_division">
 
<div id="menu_list_division">
 
<ul id="menu_list" class="menu_list_class">
 
<ul id="menu_list" class="menu_list_class">
 
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Project">Project</a></li>
 
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Project">Project</a></li>
 
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Medal">Achievements</a></li>
 
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Medal">Achievements</a></li>
−
<li><a href="javascript:void(0);">Experiment</a>
+
<li><a href="javascript:void(0);" id="experiment_link">Experiment</a>
 
<ul id="experiment_list" class="drop_menu">
 
<ul id="experiment_list" class="drop_menu">
 
<li><a>1. Toxin Assay</a>
 
<li><a>1. Toxin Assay</a>
Line 363: Line 131:
 
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Toxin_Assay/Adjustment_of_Expression_of_MazF" style="font-size: 14px">1.1. Adjustment of Expression of MazF</a></li>
 
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Toxin_Assay/Adjustment_of_Expression_of_MazF" style="font-size: 14px">1.1. Adjustment of Expression of MazF</a></li>
 
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Toxin_Assay/mazEF_System_Assay">1.2. <span style="font-style : italic">mazEF</span> System Assay</a></li>
 
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Toxin_Assay/mazEF_System_Assay">1.2. <span style="font-style : italic">mazEF</span> System Assay</a></li>
−
+
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Toxin_Assay/Queens_Capricious">1.3. Queen's Capricious</a></li>
−
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Toxin_Assay/Queens_capricious">1.3. <span style="font-style : italic">yafNO</span> System Assay</a></li>
+
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Toxin_Assay/Queens_capricious">1.4. <span style="font-style : italic">yafNO</span> System Assay</a></li>
 
</ul><!-- /toxin_list -->
 
</ul><!-- /toxin_list -->
 
</li>
 
</li>
Line 375: Line 143:
 
</li>
 
</li>
 
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/AmiE_Assay">3. AmiE Assay</a></li>
 
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/AmiE_Assay">3. AmiE Assay</a></li>
−
<li><a style="font-size: 14px; height: 60px;">4. Temperature Dependent Promoter Assay</a>
+
<li><a style="font-size: 14px;">4. Temperature Dependent Promoter Assay</a>
−
<ul id="promoter_list" class="second_level_menu assay_men">
+
<ul id="promoter_list" class="second_level_menu assay_menu">
 
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Promoter_Assay/Pcold">4.1. Pcold</a></li>
 
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Promoter_Assay/Pcold">4.1. Pcold</a></li>
 
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Promoter_Assay/Pheat">4.2. Pheat</a></li>
 
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Promoter_Assay/Pheat">4.2. Pheat</a></li>
Line 384: Line 152:
 
</li>
 
</li>
 
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Model">Model</a></li>
 
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Model">Model</a></li>
−
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Human_Practices">Human Practices</a>
+
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Human_Practices"  id="human_practice_link">Human Practices</a>
 
<ul id="human_practices_list" class="drop_menu">
 
<ul id="human_practices_list" class="drop_menu">
 
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Human_Practices#overview">Human Practices Overview</a></li>
 
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Human_Practices#overview">Human Practices Overview</a></li>
Line 392: Line 160:
 
</ul><!-- /human_practices_list -->
 
</ul><!-- /human_practices_list -->
 
</li>
 
</li>
−
<li><a href="hjavascript:void(0);">Parts</a>
+
<li><a href="javascript:void(0);" id="submitted_parts_link">Submitted Parts</a>
 
<ul id="parts_list" class="drop_menu">
 
<ul id="parts_list" class="drop_menu">
 
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Parts">Overview</a></li>
 
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Parts">Overview</a></li>
Line 401: Line 169:
 
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Collaborations">Collaborations</a>
 
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Collaborations">Collaborations</a>
 
</li>
 
</li>
−
<li><a href="javascript:void(0);">About us</a>
+
<li><a href="javascript:void(0);" id="about_us_link">About us</a>
−
<ul id="about_ts_list" class="drop_menu">
+
<ul id="about_us_list" class="drop_menu">
 
<li class="drop_list"><a href="https://2016.igem.org/Team:Tokyo_Tech/Description">Description</a></li>
 
<li class="drop_list"><a href="https://2016.igem.org/Team:Tokyo_Tech/Description">Description</a></li>
 
<li class="drop_list"><a href="https://2016.igem.org/Team:Tokyo_Tech/Team">Team</a></li>
 
<li class="drop_list"><a href="https://2016.igem.org/Team:Tokyo_Tech/Team">Team</a></li>
Line 413: Line 181:
 
</ul><!-- /menu_list -->
 
</ul><!-- /menu_list -->
 
</div><!-- /menu_list_division -->
 
</div><!-- /menu_list_division -->
−
 
+
<script>
−
</div>
+
 +
 +
$(function(){
 +
$('#experiment_link').hover(
 +
function(){
 +
swipeIn($(this).attr('id'), '-200%')
 +
},
 +
function(){
 +
swipeOut($(this).attr('id'), '-200%')
 +
}
 +
);
 +
 +
$('#human_practice_link').hover(
 +
function(){
 +
swipeIn($(this).attr('id'), '-400%')
 +
},
 +
function(){
 +
swipeOut($(this).attr('id'), '-400%')
 +
}
 +
);
 +
 +
$('#submitted_parts_link').hover(
 +
function(){
 +
swipeIn($(this).attr('id'), '-300%')
 +
},
 +
function(){
 +
swipeOut($(this).attr('id'), '-300%')
 +
}
 +
);
 +
 +
$('#about_us_link').hover(
 +
function(){
 +
swipeIn($(this).attr('id'), '-700%')
 +
},
 +
function(){
 +
swipeOut($(this).attr('id'), '-700%')
 +
}
 +
);
 +
 +
 +
function swipeIn(swipeMenuId, positionLeft){
 +
console.log(swipeMenuId + " " + positionLeft);
 +
var drop_menu = $('#'+swipeMenuId).next('ul.drop_menu');
 +
drop_menu.css('left', '1000%');
 +
drop_menu.css('visibility', 'visible');
 +
drop_menu.stop().animate({
 +
'left': positionLeft
 +
}, 500);
 +
$('.assay_menu').css('visibility', 'hidden');
 +
}
 +
 +
function swipeOut(swipeMenuId, positionLeft){
 +
var drop_menu = $('#'+swipeMenuId).next('ul.drop_menu');
 +
 +
$(drop_menu, $('#'+swipeMenuId).parent()).mouseout(
 +
/*
 +
function(){
 +
$(this).css('visibility', 'visible');
 +
},*/
 +
function(){
 +
drop_menu.stop().animate({
 +
'left': '-1500%',
 +
}, {
 +
'duration': 500,
 +
'complete': function(){
 +
drop_menu.css('visibility', 'hidden');
 +
drop_menu.css('left', positionLeft);
 +
}
 +
});
 +
}
 +
);
 +
 +
}
 +
});
 +
</script>
 
</body>
 
</body>
 
</html>
 
</html>
 
{{Team:Tokyo_Tech/template2016}}
 
{{Team:Tokyo_Tech/template2016}}

Revision as of 00:46, 19 October 2016