Template:Team:KIT-Kyoto/mobile

From 2014.igem.org

(Difference between revisions)
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/Test">Home</a></li>
 +
<li><a href="/Team:KIT-Kyoto/Test/About">About</a></li>
 +
<li><a href="/Team:KIT-Kyoto/Test/Project">Project</a></li>
 +
<li><a href="/Team:KIT-Kyoto/Test/Notebook">Notebook</a></li>
 +
                              </ul>
 +
                              <ul class="m_menu_right">
 +
<li><a href="/Team:KIT-Kyoto/Test/Parts">Parts</a></li>
 +
<li><a href="/Team:KIT-Kyoto/HumanPractice">HumanPractice</a></li>
 +
<li><a href="/Team:KIT-Kyoto/Test/Safety">Safety</a></li>
 +
<li><a href="/Team:KIT-Kyoto/Test/Attributions">Attributions</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 src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
<script type="text/javascript">
 +
$(function(){
 +
    var ua = navigator.userAgent;
 +
if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 || ua.indexOf('BlackBerry') > 0 || ua.indexOf('Windows Phone') > 0){
 +
$(".m_menu").css("display","none");
 +
$(".button-toggle").on("click", function() {
 +
$(".m_menu").slideToggle();
 +
});
 +
  　　　　　　　　　　　 var top = $('#mobilemenu'); 
 +
  　　　　　　　　　　　　$(window).scroll(function () {
 +
        　　　　　　　　if ($(this).scrollTop() > 150) {top.fadeOut();}
 +
　　　　　　　　　　　　　　 else {top.fadeIn ();}
 +
    　　　});
 +
}
 +
});
 +
$(function(){
$(function(){
     var ua = navigator.userAgent;
     var ua = navigator.userAgent;
Line 22: Line 58:
</script>
</script>
<style type="text/css">
<style type="text/css">
 +
div#mobilemenu{
 +
display:none;
 +
position:fixed;
 +
top:0;
 +
left:0;
 +
margin-top:14px;
 +
}
 +
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.7);
 +
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.7);
 +
line-height: 40px;
 +
font-size: 15px;
 +
}
 +
 +
.m_menu a:hover {
 +
background: #333;
 +
}
.accordion input{
.accordion input{
display:none;
display:none;
}
}
@media screen and (max-width: 568px) {
@media screen and (max-width: 568px) {
 +
div#mobilemenu{
 +
display:inline;
 +
}
body{
body{
   -webkit-text-size-adjust : 100%;
   -webkit-text-size-adjust : 100%;

Revision as of 00:34, 29 September 2014

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