Difference between revisions of "Template:Tokyo Tech"

Line 79: Line 79:
 
float: left;
 
float: left;
 
}
 
}
−
.clear{
+
 
−
clear: both;
+
−
}
+
  
 
/****************************** About Menu ************************************/
 
/****************************** About Menu ************************************/
 
#menu_list_division{
 
#menu_list_division{
−
width: 100%;
+
width: 90%;
−
     margin: 0;
+
min-width: 880px;
 +
max-width: 1100px;
 +
     margin: 0 auto;
 
     margin-bottom: 40px;
 
     margin-bottom: 40px;
 +
}
 +
#menu_list_divison ul.menu_list_class{
 +
*zoom: 1;
 +
list-style: none;
 +
width: 100%;
 +
min-width: 880px;
 +
max-width: 1100px;
 +
margin: 5px auto 30px;
 +
padding: 0 auto;
 +
display: table;
 +
box-sizing: border-box;
 
}
 
}
 
.menu_list_class:before, .menu_list_class:after{
 
.menu_list_class:before, .menu_list_class:after{
Line 96: Line 107:
 
clear: both;
 
clear: both;
 
}
 
}
−
 
+
.menu_list_class li{
−
#menu_list{
+
−
*zoom: 1;
+
−
list-style: none;
+
−
width: 100%;
+
−
margin: 0;
+
−
padding: 0;
+
−
padding-left: 0;
+
−
display: table;
+
−
box-sizing: border-box;
+
−
}
+
−
#menu_list li{
+
 
display: table-cell;
 
display: table-cell;
 
position: relative;
 
position: relative;
−
margin: 0;
+
margin: 0 5%;
−
padding: 0;
+
padding: 0 1%;
−
// width: 11%;
+
 
text-align: center;
 
text-align: center;
−
vertical-align: center;
 
 
}
 
}
−
/*
+
 
−
#menu_list li:nth-child(9n){
+
#menu_list_class li:nth-child(5n+1){
−
margin: 0 0.5% 0 0;
+
margin: 0 1% 0 0;
 +
}
 +
.menu_list1 li:nth-child(5n){
 +
margin: 0 0 0 1%;
 
}
 
}
−
#menu_list li:nth-child(9n+1){
+
.menu_list2 li:nth-child(4n){
−
margin: 0 0 0 0.5%;
+
margin: 0 0 0 1%;
 
}
 
}
−
*/
+
.menu_list_class li a{
−
#menu_list li a{
+
 
display: block;
 
display: block;
 
box-sizing: border-box;
 
box-sizing: border-box;
 
height: 48px;
 
height: 48px;
−
padding: 15px 5px;
+
margin: 0;
 +
padding: 15px 30px 11px;
 
color: #583612;
 
color: #583612;
 
font-size: 18px;
 
font-size: 18px;
Line 137: Line 138:
 
background-color:rgba(255,255,255,0.5)
 
background-color:rgba(255,255,255,0.5)
 
}
 
}
−
 
+
.menu_list_class li a:hover{
−
#human_practice_menu{
+
−
// width: 12%;
+
−
}
+
−
 
+
−
#menu_list li a:hover{
+
 
background: #583612;
 
background: #583612;
 
color: #ffffff;
 
color: #ffffff;
 
}
 
}
−
#menu_list li:hover ul li{
+
.menu_list_class li:hover ul li{
 
overflow: visible;
 
overflow: visible;
 
height: 48px;
 
height: 48px;
Line 152: Line 148:
 
}
 
}
 
/*
 
/*
−
#menu_list li a span{
+
.menu_list_class li a span{
 
position: absolute;
 
position: absolute;
 
top: 50%;
 
top: 50%;
Line 160: Line 156:
 
*/
 
*/
  
−
#menu_list .drop_menu{
+
#menu_list_division ul.drop_menu{
 
list-style: none;
 
list-style: none;
 +
// left: -100%;
 
left: 0;
 
left: 0;
 
z-index: 9999;
 
z-index: 9999;
 +
// top: 95%;
 
top: 100%;
 
top: 100%;
 
margin: 0;
 
margin: 0;
 
padding: 0;
 
padding: 0;
 
}
 
}
−
#menu_list .drop_menu li{
+
.drop_menu li{
 
display: block;
 
display: block;
 
width: 100%;
 
width: 100%;
Line 177: Line 175:
 
padding: 0;
 
padding: 0;
 
}
 
}
−
#menu_list .drop_menu li a{
+
.drop_menu li a{
 
display: block;
 
display: block;
 
box-sizing: border-box;
 
box-sizing: border-box;
Line 188: Line 186:
 
text-align: left;
 
text-align: left;
 
}
 
}
−
#menu_list .drop_menu li:hover > a{
+
.drop_menu li:hover > a{
 
// background: #0d4f78;
 
// background: #0d4f78;
 
}
 
}
−
#menu_list .drop_menu li a:hover{
+
.drop_menu li a:hover{
 
background: #583612;
 
background: #583612;
 
color: #ffffff;
 
color: #ffffff;
 
}
 
}
  
−
#menu_list .drop_menu li:hover ul li{
+
.drop_menu li:hover ul li{
 
overflow: visible;
 
overflow: visible;
 
height: 48px;
 
height: 48px;
 
// background: #186b91;
 
// background: #186b91;
 
}
 
}
−
#menu_list .second_level_menu{
+
#menu_list_division ul.second_level_menu{
 
list-style: none;
 
list-style: none;
 
position: absolute;
 
position: absolute;
Line 215: Line 213:
 
transition: all .5s ease;
 
transition: all .5s ease;
 
}
 
}
−
#menu_list .second_level_menu li{
+
.second_level_menu li{
 
display: inline-block;
 
display: inline-block;
 
position: relative;
 
position: relative;
Line 222: Line 220:
 
padding: 0;
 
padding: 0;
 
}
 
}
−
#menu_list .second_level_menu li a{
+
.second_level_menu li a{
 
display: inline-block;
 
display: inline-block;
 
box-sizing: border-box;
 
box-sizing: border-box;
Line 235: Line 233:
 
}
 
}
  
−
#menu_list .menu_list_class li:hover ul li ul{
+
.menu_list_class li:hover ul li ul{
 
overflow: hidden;
 
overflow: hidden;
 
width: 0%;
 
width: 0%;
 
}
 
}
−
#menu_list .menu_list_class li ul li:hover ul{
+
.menu_list_class li ul li:hover ul{
 
overflow: visible;
 
overflow: visible;
 
width: 100%;
 
width: 100%;
 
}
 
}
−
#menu_list .menu_list_class li ul li:hover ul li{
+
.menu_list_class li ul li:hover ul li{
 
overflow: visible;
 
overflow: visible;
 
width: 100%;
 
width: 100%;
Line 266: Line 264:
 
/********************************* For smart phone ***********************************/
 
/********************************* For smart phone ***********************************/
 
/*
 
/*
−
@media screen and (max-width: 640px){
+
@media screen and (max-width: 360px){
 
#menu_list_division{
 
#menu_list_division{
 
//overflow: hidden;
 
//overflow: hidden;
Line 350: Line 348:
 
<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"><span>Home</span></a></li>
 
<li><a href="https://2016.igem.org/Team:Tokyo_Tech"><span>Home</span></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/Project">Project</a></li>
−
<li><a href="jhttps://2016.igem.org/Team:Tokyo_Tech/Medal">Achievements</a></li>
 
 
<li><a href="javascript:void(0);">Experiment</a>
 
<li><a href="javascript:void(0);">Experiment</a>
 
<ul id="experiment_list" class="drop_menu">
 
<ul id="experiment_list" class="drop_menu">
Line 384: Line 381:
 
</li>
 
</li>
 
</ul><!-- /experiment_list -->
 
</ul><!-- /experiment_list -->
−
</li>
 
−
<li id="human_practice_menu"><a href="https://2016.igem.org/Team:Tokyo_Tech/Human_Practices">Human Practices</a>
 
−
<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#3E">HP 3E</a></li>
 
−
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Human_Practices#Policy_and_Practices">HP Policy and Practices</a></li>
 
−
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Human_Practices#Snow_White_Varieties">HP Snow White Varieties</a></li>
 
−
</ul><!-- /human_practices_list -->
 
 
</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>
Line 400: Line 389:
 
<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>
 
</ul><!-- /parts_list -->
 
</ul><!-- /parts_list -->
 +
</li>
 +
</ul><!-- /menu_list1 -->
 +
<ul id="menu_list2" class="menu_list_class">
 +
<li><a href="javascipt:void(0);">Achievements</a>
 +
<ul id="achivements_list" class="drop_menu">
 +
<li class="drop_list"><a href="https://2016.igem.org/Team:Tokyo_Tech/Medal">Medal Requirements</a></li>
 +
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Processing">Best Information Processing</a></li>
 +
</ul><!-- /achivements_list -->
 +
</li>
 +
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Human_Practices">Human Practices</a>
 +
<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#3E">HP 3E</a></li>
 +
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Human_Practices#Policy_and_Practices">HP Policy and Practices</a></li>
 +
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Human_Practices#Snow_White_Varieties">HP Snow White Varieties</a></li>
 +
</ul><!-- /human_practices_list -->
 
</li>
 
</li>
 
<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>
Line 414: Line 419:
 
</ul><!-- /about_us_list -->
 
</ul><!-- /about_us_list -->
 
</li>
 
</li>
−
</ul><!-- /menu_list -->
+
</ul><!-- /menu_list2 -->
 
</div><!-- /menu_list_division -->
 
</div><!-- /menu_list_division -->
  

Revision as of 09:01, 17 October 2016