Difference between revisions of "Template:Tokyo Tech"

Line 1: Line 1:
−
<!----
 
−
バグる：佐々木
 
−
------>
 
−
 
−
 
 
<html>
 
<html>
 
<head>
 
<head>
Line 78: Line 73:
 
float: left;
 
float: left;
 
}
 
}
 +
 +
 
/****************************** About Menu ************************************/
 
/****************************** About Menu ************************************/
 
#menu_list_division{
 
#menu_list_division{
Line 86: Line 83:
 
     margin-bottom: 40px;
 
     margin-bottom: 40px;
 
}
 
}
−
ul#menu_list{
+
#menu_list_divison ul.menu_list_class{
 
*zoom: 1;
 
*zoom: 1;
 
list-style: none;
 
list-style: none;
Line 135: Line 132:
 
}
 
}
 
.menu_list_class li:hover ul li{
 
.menu_list_class li:hover ul li{
 +
overflow: visible;
 
height: 48px;
 
height: 48px;
 +
// background: #583612;
 
}
 
}
  
 
#menu_list_division ul.drop_menu{
 
#menu_list_division ul.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;
 
padding: 0;
 
padding: 0;
 
}
 
}
−
#menu_list_division ul.drop_menu li{
+
.drop_menu li{
−
float: left;
+
display: block;
−
list-style: none;
+
width: 100%;
−
position: relative;
+
overflow: hidden;
−
}
+
height: 0px;
−
#experiment_list{
+
transition: .5s;
−
left: -200%;
+
−
width: 800%;
+
−
}
+
−
#experiment_list li{
+
−
width: 25%;
+
 
margin: 0;
 
margin: 0;
 
padding: 0;
 
padding: 0;
 
}
 
}
−
#human_practices_list{
+
.drop_menu li a{
−
left: -400%;
+
display: block;
−
width: 800%;
+
box-sizing: border-box;
−
}
+
−
#human_practices_list li{
+
−
width: 25%;
+
 
margin: 0;
 
margin: 0;
−
padding: 0;
+
width: 100%;
 +
padding: 5px 15px;
 +
// padding: 0 15px;
 +
height: 48px;
 +
border-top: 1px solid #583612;
 +
text-align: left;
 
}
 
}
−
#parts_list{
+
.drop_menu li:hover > a{
−
left: -300%;
+
// background: #0d4f78;
−
width: 600%;
+
 
}
 
}
−
#parts_list li{
+
.drop_menu li a:hover{
−
width: 33.33%;
+
background: #583612;
 +
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;
 
}
 
}
−
#about_us_list{
+
.second_level_menu li{
−
left: -700%;
+
display: inline-block;
−
width: 800%;
+
position: relative;
−
}
+
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>
 
</head>
 
</head>
Line 199: Line 339:
 
<div class="clear"></div><!-- /clear -->
 
<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_list1" 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);" id="experiment_link">Experiment</a>
+
<li><a href="javascript:void(0);">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 221: Line 361:
 
</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;">4. Temperature Dependent Promoter Assay</a>
+
<li><a style="font-size: 14px; height: 60px;">4. Temperature Dependent Promoter Assay</a>
−
<ul id="promoter_list" class="second_level_menu assay_menu">
+
<ul id="promoter_list" class="second_level_menu assay_men">
 
<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 230: Line 370:
 
</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"  id="human_practice_link">Human Practices</a>
+
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Human_Practices">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 238: Line 378:
 
</ul><!-- /human_practices_list -->
 
</ul><!-- /human_practices_list -->
 
</li>
 
</li>
−
<li><a href="javascript:void(0);" id="submitted_parts_link">Submitted Parts</a>
+
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Parts">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">Overview</a></li>
 
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Basic_Part">Basic Parts</a></li>
 
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Basic_Part">Basic Parts</a></li>
 
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Composite_Part">Composite Parts</a></li>
 
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Composite_Part">Composite Parts</a></li>
Line 247: Line 387:
 
<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);" id="about_us_link">About us</a>
+
<li><a href="javascript:void(0);">About us</a>
−
<ul id="about_us_list" class="drop_menu">
+
<ul id="about_ts_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 259: Line 399:
 
</ul><!-- /menu_list -->
 
</ul><!-- /menu_list -->
 
</div><!-- /menu_list_division -->
 
</div><!-- /menu_list_division -->
−
<script>
+
 
−
+
−
+
−
$(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 02:31, 19 October 2016