Template:Team:KIT-Kyoto/mobile

From 2014.igem.org

(Difference between revisions)
 
(126 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
 +
<div class="clear"><hr /></div>
 +
<div id="mobilemenu">
 +
<mheader>
 +
<div class="m_title"><a href="javascript:void(0);">KIT-Kyoto</a></div>
 +
<div class="button-toggle">&#9776;</div>
 +
<div class="m_menu">
 +
<ul class="m_menu_left">
 +
<li><a href="/Team:KIT-Kyoto">Home</a></li>
 +
<li><a href="/Team:KIT-Kyoto/About">About Us</a></li>
 +
<li><a href="/Team:KIT-Kyoto/Acknowledgements">Acknowledgements</a></li>
 +
<li><a href="/Team:KIT-Kyoto/Project">Project</a></li>
 +
<li><a href="/Team:KIT-Kyoto/Parts">Parts</a></li>
 +
                              </ul>
 +
                              <ul class="m_menu_right">
 +
<li><a href="/Team:KIT-Kyoto/Modeling">Modeling</a></li>
 +
<li><a href="/Team:KIT-Kyoto/HumanPractice">Policy&Practices</a></li>
 +
<li><a href="/Team:KIT-Kyoto/Safety">Safety</a></li>
 +
<li><a href="/Team:KIT-Kyoto/Achievement">Achievement</a></li>
 +
<li><a href="/Team:KIT-Kyoto/Notebook">Notebook</a></li>
 +
</ul>
 +
</div>
 +
</mheader>
 +
</div>
<head>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="viewport" content="width=device-width; initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
 +
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
<script type="text/javascript">
-
var checkwidth = function() {
+
$(function(){
-
var browserwidth = $(window).width();
+
    var ua = navigator.userAgent;
-
if(browserwidth <= 568){
+
if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 || ua.indexOf('BlackBerry') > 0 || ua.indexOf('Windows Phone') > 0){
-
$(function(){
+
var mt = function(){
-
//オブジェクトを保存
+
var tw = $('.main-contents').width();
-
var accordionItem=$('#kit_article');
+
$('.m_table,.member_box_before,.member_box_after,.member_img_profile,#ln img').css({width:tw});
-
//一旦全部消す
+
}
-
accordionItem.find('.sentence').hide();
+
$(function(){
-
 
+
mt();
-
//active要素を指定して開く
+
$(window).resize(mt);
-
var no=0;
+
});
-
//accordionItem.find('h3').eq(no).addClass('active').next('.sentence').show();
+
-
//click-action
+
$(".m_menu").css("display","none");
-
accordionItem.find('h3').click(function () {
+
$(".button-toggle").on("click", function() {
-
 
+
$(".m_menu").slideToggle();
-
//slide
+
-
$(this).next('.sentence').slideToggle('slow')
+
-
.siblings('.sentence:visible').slideUp('slow');
+
-
//activeクラス切り替え
+
-
$(this).toggleClass('active');
+
-
$(this).siblings('h3').removeClass('active');
+
-
 
+
-
});
+
});
});
-
};
+
  　　　　　　　　　　　 var top = $('#mobilemenu'); 
-
};
+
  　　　　　　　　　　　　$(window).scroll(function () {
 +
        　　　　　　　　if ($(this).scrollTop() > 150) {top.fadeOut();}
 +
　　　　　　　　　　　　　　 else {top.fadeIn ();}
 +
    　　　});
 +
}
 +
});
$(function(){
$(function(){
-
     checkwidth();
+
     var ua = navigator.userAgent;
-
    $(window).resize(checkwidth);
+
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(){
 +
var num = $(".m-active h2 a").index(this);
 +
var ac =$(".ac").eq(num);
 +
if(ac.is(':hidden')){
 +
ac.slideDown();
 +
}else {
 +
ac.slideUp();
 +
}
 +
});
});
});
-
 
</script>
</script>
<style type="text/css">
<style type="text/css">
 +
div#mobilemenu{
 +
display:none;
 +
position:fixed;
 +
top:0;
 +
left:0;
 +
margin-top:14px;
 +
z-index:4;
 +
}
 +
mheader {
 +
        width:100%;
 +
position:fixed;
 +
background: rgba(0,0,0,0.7);
 +
border-bottom: 2px solid rgba(0,200,0,0.7);
 +
height: 50px;
 +
}
 +
 +
 +
.button-toggle {
 +
position: absolute;
 +
        z-index:10;
 +
float: left;
 +
width: 30px;
 +
height: 30px;
 +
margin: 10px;
 +
color: #aaa;
 +
font-size: 30px;
 +
line-height: 30px;
 +
text-align: center;
 +
box-shadow: 0 0 0 2px #555;
 +
cursor:pointer;
 +
}
 +
 +
.m_title {
 +
float: left;
 +
height: 5px;
 +
line-height: 50px;
 +
width: 100%;
 +
text-align: center;
 +
}
 +
 +
.m_title {
 +
margin: 3px;
 +
font-size: 20px;
 +
}
 +
 +
.m_title a {
 +
color: #aaa;
 +
text-decoration: none;
 +
}
 +
 +
.m_menu {
 +
position: absolute;
 +
top:50px;
 +
width: 100%;
 +
background:  rgba(0,0,0,0.8);
 +
color: #999;
 +
overflow: hidden;
 +
}
 +
 +
.m_menu_left{
 +
float:left;
 +
width:50%;
 +
}
 +
 +
.m_menu_right{
 +
float:right;
 +
width:50%;
 +
}
 +
 +
.m_menu ul {
 +
padding: 0;
 +
margin: 0;
 +
list-style: none;
 +
}
 +
 +
.m_menu li {
 +
position: relative;
 +
}
 +
 +
.m_menu a {
 +
display: block;
 +
color: #999;
 +
text-decoration: none;
 +
padding: 3px 20px;
 +
height: 30px;
 +
border-bottom: 1px solid rgba(0,200,0,0.3);
 +
line-height: 40px;
 +
font-size: 15px;
 +
}
 +
 +
.m_menu a:hover {
 +
background: #333;
 +
}
 +
@media screen and (max-width: 568px) {
@media screen and (max-width: 568px) {
 +
*{
 +
font-size:14px;
 +
}
 +
 +
h1{
 +
font-size:30px;
 +
}
 +
h2{
 +
font-size:22px;
 +
}
 +
h2 a{
 +
font-size:22px;
 +
}
 +
h2 em{
 +
font-size:22px;
 +
}
 +
div#mobilemenu{
 +
display:inline;
 +
}
body{
body{
   -webkit-text-size-adjust : 100%;
   -webkit-text-size-adjust : 100%;
Line 52: Line 196:
       }
       }
       div#container{
       div#container{
-
              width:100%;
 
               margin:0px 0px;
               margin:0px 0px;
               padding:0px;
               padding:0px;
Line 62: Line 205:
               min-width:0px;
               min-width:0px;
               margin:74px 10px 10px 10px;
               margin:74px 10px 10px 10px;
-
               padding:15px;
+
               padding:10px;
-
              border:1px solid gray;
+
       }
       }
       .sub{
       .sub{
Line 82: Line 224:
     .sentence,ul.procedure{
     .sentence,ul.procedure{
               font-size:13px;
               font-size:13px;
 +
              line-height:1.5em;
     }
     }
      
      
Line 87: Line 230:
               display:none;
               display:none;
     }
     }
 +
    #kitfooter-box img{
 +
    position:relative;
 +
    z-index:0;
 +
    }
     .kitimg{
     .kitimg{
               margin:15px 15px 15px -60px;
               margin:15px 15px 15px -60px;
Line 93: Line 240:
               left:50%;
               left:50%;
     }
     }
-
    div.igem a{
+
div#igem a{
position:fixed;
position:fixed;
-
z-index:100;
+
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;
-
    }
+
}
 +
div#igem{
 +
z-index:10;
 +
}
.box1,.box2 {
.box1,.box2 {
display:none;
display:none;
Line 111: Line 262:
bottom:10px;
bottom:10px;
z-index:10;
z-index:10;
 +
}
 +
.accordion h2 a{
 +
position: relative;
 +
display: block;
 +
cursor: pointer;
 +
}
 +
div.ac {
 +
display:none;
}
}
 +
.hp_top{
 +
width:100%;
 +
height:100%;
 +
margin-left:-50%;
 +
}
 +
.member_img_profile{
 +
margin:5px auto;
 +
width:auto;
 +
}
 +
.img_after,.img_before{
 +
left:0;
}
}
 +
.img_after{
 +
z-index:2;
 +
}
 +
.img_before{
 +
z-index:3;
 +
}
 +
 +
.member_box_before,.member_box_after{
 +
width:auto;
 +
text-align:left;
 +
}
 +
 +
.m_table{
 +
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"