Template:Team:KIT-Kyoto/mobile

From 2014.igem.org

(Difference between revisions)
 
(39 intermediate revisions not shown)
Line 7: Line 7:
<div class="m_menu">
<div class="m_menu">
<ul class="m_menu_left">
<ul class="m_menu_left">
-
<li><a href="/Team:KIT-Kyoto/Test">Home</a></li>
+
<li><a href="/Team:KIT-Kyoto">Home</a></li>
-
<li><a href="/Team:KIT-Kyoto/Test/About">About</a></li>
+
<li><a href="/Team:KIT-Kyoto/About">About Us</a></li>
-
<li><a href="/Team:KIT-Kyoto/Test/Project">Project</a></li>
+
<li><a href="/Team:KIT-Kyoto/Acknowledgements">Acknowledgements</a></li>
-
<li><a href="/Team:KIT-Kyoto/Test/Notebook">Notebook</a></li>
+
<li><a href="/Team:KIT-Kyoto/Project">Project</a></li>
 +
<li><a href="/Team:KIT-Kyoto/Parts">Parts</a></li>
                               </ul>
                               </ul>
                               <ul class="m_menu_right">
                               <ul class="m_menu_right">
-
<li><a href="/Team:KIT-Kyoto/Test/Parts">Parts</a></li>
+
<li><a href="/Team:KIT-Kyoto/Modeling">Modeling</a></li>
-
<li><a href="/Team:KIT-Kyoto/HumanPractice">HumanPractices</a></li>
+
<li><a href="/Team:KIT-Kyoto/HumanPractice">Policy&Practices</a></li>
-
<li><a href="/Team:KIT-Kyoto/Test/Safety">Safety</a></li>
+
<li><a href="/Team:KIT-Kyoto/Safety">Safety</a></li>
-
<li><a href="/Team:KIT-Kyoto/Test/Attributions">Attributions</a></li>
+
<li><a href="/Team:KIT-Kyoto/Achievement">Achievement</a></li>
 +
<li><a href="/Team:KIT-Kyoto/Notebook">Notebook</a></li>
</ul>
</ul>
</div>
</div>
Line 26: Line 28:
<script type="text/javascript">
<script type="text/javascript">
$(function(){
$(function(){
-
     var device = function(){
+
     var ua = navigator.userAgent;
-
    var mw = $(window).width();
+
if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 || ua.indexOf('BlackBerry') > 0 || ua.indexOf('Windows Phone') > 0){
-
    if(mw >= 568){
+
var mt = function(){
-
        $("#mobilemenu").removeClass('menu-active').css("display","none");
+
var tw = $('.main-contents').width();
-
        $(".accordion").removeClass('m-active');
+
$('.m_table,.member_box_before,.member_box_after,.member_img_profile,#ln img').css({width:tw});
-
    }else {
+
}
-
        $("#mobilemenu").addClass('menu_active').show();
+
-
        $(".accordion").addClass('m-active');
+
-
        $(".ac").eq(0).show();
+
-
    }
+
-
    }
+
$(function(){
$(function(){
-
    device();
+
mt();
-
    $(window).resize(device);
+
$(window).resize(mt);
});
});
-
});
+
 
-
$(function(){
+
$(".m_menu").css("display","none");
-
        $(".m_menu").hide();
+
$(".button-toggle").on("click", function() {
$(".button-toggle").on("click", function() {
$(".m_menu").slideToggle();
$(".m_menu").slideToggle();
});
});
-
   　　　　　　　　　　　 var top = $('.menu_active');   
+
   　　　　　　　　　　　 var top = $('#mobilemenu');   
   　　　　　　　　　　　　$(window).scroll(function () {
   　　　　　　　　　　　　$(window).scroll(function () {
         　　　　　　　　if ($(this).scrollTop() > 150) {top.fadeOut();}
         　　　　　　　　if ($(this).scrollTop() > 150) {top.fadeOut();}
　　　　　　　　　　　　　　 else {top.fadeIn ();}
　　　　　　　　　　　　　　 else {top.fadeIn ();}
     　　　});
     　　　});
 +
}
 +
});
 +
$(function(){
 +
    var ua = navigator.userAgent;
 +
if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 || ua.indexOf('BlackBerry') > 0 || ua.indexOf('Windows Phone') > 0){
 +
$(".accordion").addClass('m-active');
 +
$(".ac").eq(0).show();
 +
}
$(".m-active h2 a").click(function(){
$(".m-active h2 a").click(function(){
var num = $(".m-active h2 a").index(this);
var num = $(".m-active h2 a").index(this);
Line 60: Line 64:
}else {
}else {
ac.slideUp();
ac.slideUp();
-
}
+
}  
-
});  
+
});
});
});
</script>
</script>
Line 71: Line 75:
left:0;
left:0;
margin-top:14px;
margin-top:14px;
 +
z-index:4;
}
}
mheader {
mheader {
Line 118: Line 123:
top:50px;
top:50px;
width: 100%;
width: 100%;
-
background:  rgba(0,0,0,0.7);
+
background:  rgba(0,0,0,0.8);
color: #999;
color: #999;
overflow: hidden;
overflow: hidden;
Line 149: Line 154:
padding: 3px 20px;
padding: 3px 20px;
height: 30px;
height: 30px;
-
border-bottom: 1px solid rgba(0,200,0,0.7);
+
border-bottom: 1px solid rgba(0,200,0,0.3);
line-height: 40px;
line-height: 40px;
font-size: 15px;
font-size: 15px;
Line 159: Line 164:
@media screen and (max-width: 568px) {
@media screen and (max-width: 568px) {
-
div.menu_active{
+
*{
-
display:inline;
+
font-size:14px;
 +
}
 +
 
 +
h1{
 +
font-size:30px;
 +
}
 +
h2{
 +
font-size:22px;
 +
}
 +
h2 a{
 +
font-size:22px;
 +
}
 +
h2 em{
 +
font-size:22px;
}
}
div#mobilemenu{
div#mobilemenu{
Line 178: Line 196:
       }
       }
       div#container{
       div#container{
-
              width:100%;
 
               margin:0px 0px;
               margin:0px 0px;
               padding:0px;
               padding:0px;
Line 207: Line 224:
     .sentence,ul.procedure{
     .sentence,ul.procedure{
               font-size:13px;
               font-size:13px;
 +
              line-height:1.5em;
     }
     }
      
      
Line 222: Line 240:
               left:50%;
               left:50%;
     }
     }
-
    div#igem a{
+
div#igem a{
position:fixed;
position:fixed;
z-index:10;
z-index:10;
bottom:0;
bottom:0;
 +
top:auto;
right:0;
right:0;
width:80px;
width:80px;
height:80px;
height:80px;
-
background:url("https://static.igem.org/mediawiki/2014/7/77/Igemlogo_circle.png") no-repeat 0 0;
+
background:url("https://static.igem.org/mediawiki/2014/3/3f/Kit_Igem_m.png") no-repeat 0 0;
-webkit-background-size:80px 80px;
-webkit-background-size:80px 80px;
background-size:80px 80px;
background-size:80px 80px;
Line 258: Line 277:
margin-left:-50%;
margin-left:-50%;
}
}
-
 
.member_img_profile{
.member_img_profile{
margin:5px auto;
margin:5px auto;
-
width:275px;
+
width:auto;
-
height:40px;
+
}
}
.img_after,.img_before{
.img_after,.img_before{
left:0;
left:0;
-
width: 40px;
 
}
}
.img_after{
.img_after{
Line 277: Line 293:
.member_box_before,.member_box_after{
.member_box_before,.member_box_after{
-
width:275px;
+
width:auto;
-
height:40px;
+
text-align:left;
text-align:left;
-
}
 
-
 
-
 
-
.member_img_profile a,.member_img_profile span{
 
-
padding:10px 5px 10px 45px;
 
}
}
.m_table{
.m_table{
overflow:scroll;
overflow:scroll;
 +
margin:5px 0px;
}
}
 +
.show,.hide{
 +
position:relative;
}
}
 +
}
 +
</style>
</style>
 +
</head>
</head>

Latest revision as of 01:19, 18 October 2014

Retrieved from "http://2014.igem.org/Template:Team:KIT-Kyoto/mobile"