Difference between revisions of "Template:Team:NCTU Formosa"

(Created page with "<html> <head> <link href="https://2016.igem.org/Team:NCTU_Formosa/wiki_reset?action=raw&ctype=text/css" rel="stylesheet"> </head> <body> </body> </html>")
 
Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
 +
<meta charset="UTF-8">
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<link href="https://2016.igem.org/Team:NCTU_Formosa/wiki_reset?action=raw&ctype=text/css" rel="stylesheet">
 
<link href="https://2016.igem.org/Team:NCTU_Formosa/wiki_reset?action=raw&ctype=text/css" rel="stylesheet">
 +
 +
<style type="text/css">
 +
    *{
 +
      font-family:"Open Sans",serif,sans-serif
 +
      font-size:1em;
 +
    }
 +
   
 +
    body{
 +
        margin:0;
 +
    }
 +
   
 +
    .main-container{
 +
                    background:white;
 +
                    position:fixed;
 +
                    width:100vw;
 +
                    height:10vh;
 +
                    }
 +
   
 +
    .NCTU_Formosa{
 +
                  position:relative;
 +
                  width:50px;
 +
                  height:50px;
 +
                  overflow:visible;
 +
                  top:1vw;
 +
                  left:5vw;
 +
                  }
 +
   
 +
@media screen and (min-width: 768px) {
 +
    .container{
 +
            display:none;
 +
    }
 +
    .main-menu{
 +
      position:relative;
 +
      list-style-type: none;
 +
      margin:0;
 +
      padding:0;
 +
      display:block;
 +
      float:right;
 +
      }
 +
    span:after
 +
{
 +
width: 0;
 +
height: 0;
 +
border: 0.313em solid transparent;
 +
border-bottom: none;
 +
border-top-color:black;
 +
content: '';
 +
vertical-align: middle;
 +
display: inline-block;
 +
position: relative;
 +
right: -0.313em; /* 5 */
 +
                               
 +
}
 +
   
 +
    li{
 +
      float:left;
 +
      }
 +
    ul>li>a{
 +
                color:black;
 +
              }
 +
    li .dropdown{
 +
                display:inline-block;
 +
                }
 +
               
 +
    li > a, .dropbtn {
 +
                      display: inline-block;
 +
                      text-align: center;
 +
                      text-color:black;
 +
                      padding: 10px 10px;
 +
                      text-decoration:none;   
 +
                    }
 +
 +
                /*下拉式menu*/
 +
 +
    li > a:hover, .dropdown:hover .dropbtn{
 +
                                            color:red;
 +
                                            }
 +
 +
    .dropdown-content{
 +
                      display:none;
 +
                      background:white;
 +
                      position:absolute;
 +
                      width:auto;
 +
                     
 +
                    }
 +
    .dropdown-content a{
 +
                        color: black;
 +
                        padding:10px;
 +
                        text-decoration: none;
 +
                        display: block;
 +
                        text-align:left;
 +
                        size:1em;
 +
                        }
 +
                       
 +
   
 +
    .dropdown-content a:hover{
 +
                              color:red;
 +
                              }
 +
   
 +
   
 +
} 
 +
 +
 +
    /*screen change*/
 +
@media screen and (max-width: 768px) {
 +
    /*menu icon*/
 +
    .container {
 +
    display:inline-block;
 +
    cursor: pointer;
 +
    position:relative;
 +
    float:right;
 +
    margin-right:20px;
 +
    margin-top:10px;
 +
    } 
 +
   
 +
    .bar1, .bar2, .bar3 {
 +
    width: 35px;
 +
    height: 5px;
 +
    background-color: #333;
 +
    margin: 6px 0;
 +
    transition: 0.4s;
 +
    }
 +
 +
    .change .bar1 {
 +
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
 +
    transform: rotate(-45deg) translate(-9px, 6px) ;
 +
    }
 +
 +
    .change .bar2 {opacity: 0;}
 +
 +
    .change .bar3 {
 +
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
 +
    transform: rotate(45deg) translate(-8px, -8px) ;
 +
    }
 +
 +
/*manu*/
 +
span:after
 +
{
 +
width: 0;
 +
height: 0;
 +
border: 0.313em solid transparent;
 +
border-bottom: none;
 +
border-top-color: black;
 +
content: '';
 +
vertical-align: middle;
 +
display: inline-block;
 +
position: relative;
 +
right: -0.313em; /* 5 */
 +
                               
 +
}
 +
.main-menu{
 +
      display:none;
 +
      }
 +
.active_menu{display:none;}
 +
   
 +
    ul>li>a{
 +
                color:black;
 +
                text-align:center;
 +
              }
 +
    li,.dropdown{
 +
                display:block;
 +
                text-align:center;
 +
                }
 +
               
 +
    li > a, .dropbtn {
 +
                      display: inline-block;
 +
                      text-align: center;
 +
                      text-color:black;
 +
                      padding: 14px 16px;
 +
                      text-decoration:none;   
 +
                    }
 +
 +
                /*下拉式menu*/
 +
 +
    li > a:hover, .dropdown:hover .dropbtn{
 +
                                            color:red;
 +
                                            }
 +
 +
    .dropdown-content{
 +
                      background:white;
 +
                      position:absolute;
 +
                      width:100%;
 +
                      text-align:center;
 +
                      display: none;
 +
                     
 +
                    }
 +
    .dropdown-content a{
 +
                        color: black;
 +
                        padding:5px;
 +
                        text-decoration: none;
 +
                        text-align:center;
 +
                        size:1em;
 +
                        }
 +
 +
   
 +
    .dropdown-content a:hover{
 +
                              color:red;
 +
                              }
 +
   
 +
                   
 +
}
 +
    </style>
 
</head>
 
</head>
 
<body>
 
<body>
 +
 +
<div class="main-container";>
 +
 +
        <!--隊徽-->
 +
  <!--<img src="NCTU.png" class="NCTU_Formosa"></img>-->
 +
        <!--下拉選單-->
 +
<div class="container" id="icon_menu"  onclick="myFunction(this)"onclick="Function(this)">
 +
  <div class="bar1"></div>
 +
  <div class="bar2"></div>
 +
  <div class="bar3"></div>
 +
</div>
 +
    <ul class="main-menu" id="menu">
 +
        <li><a href="https://2016.igem.org/Team:NCTU_Formosa">Home</a></li>
 +
       
 +
        <li class="dropdown">
 +
            <a href="#" class="dropbtn"><span>Project</span></a>
 +
                  <div class="dropdown-content">
 +
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Description">Description</a></div>
 +
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Design">Design</a></div>
 +
                      <div><a href="###">Device</a></div>
 +
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Results">Results</a></div>
 +
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Model">Modelling</a></div>
 +
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Safety">Safty</a></div>
 +
                  </div>
 +
        </li>
 +
       
 +
        <li class="dropdown">
 +
          <a href="https://2016.igem.org/Team:NCTU_Formosa/Human_Practices" class="dropbtn"><span>Human Practice</span></a>
 +
                  <div class="dropdown-content">                     
 +
                      <div><a href="#">Study</a></div>
 +
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Collaborations">Collaborations</a></div>
 +
                      <div><a href="#">Education</a></div>
 +
                      <div><a href="#">Meetups</a></div>
 +
                      <div><a href="#">Further Considerations</a></div>
 +
                  </div>
 +
        </li>
 +
       
 +
        <li class="dropdown">
 +
            <a href="##" class="dropbtn"><span>Entrepreneurship</span></a>
 +
                  <div class="dropdown-content">
 +
                      <div><a href="##">Law & Regulations</a></div>
 +
                      <div><a href="##">Sponser</a></div>
 +
                      <div><a href="##">Marketing & Future</a></div>
 +
                      <div><a href="##">Manufacturing & Future</a></div>
 +
                  </div>
 +
        </li>
 +
       
 +
        <li class="dropdown">
 +
            <a href="https://2016.igem.org/Team:NCTU_Formosa/Parts" class="dropbtn"><span>Parts</span></a>
 +
                  <div class="dropdown-content">
 +
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Basic_Part">Basic Parts</a></div>
 +
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Composite_Part">Composite Parts</a></div>
 +
                  </div>
 +
        </li>
 +
 +
       
 +
        <li class="dropdown">
 +
            <a href="https://2016.igem.org/Team:NCTU_Formosa/Notebook" class="dropbtn">Notebook</a>
 +
                  <div class="dropdown-content">
 +
                      <div><a href="#">Lab Note</a></div>
 +
                      <div><a href="#">Protocol</a></div>
 +
                  </div>
 +
        </li>
 +
 
 +
       
 +
       
 +
        <li class="dropdown">
 +
            <a href="https://2016.igem.org/Team:NCTU_Formosa/Team">Team</a>
 +
        </li>
 +
       
 +
        <li>
 +
            <a href="##">Achievement</a>
 +
        </li>
 +
    </ul>
 +
   
 +
 +
 +
 +
 +
 +
<script>
 +
function myFunction(x) {
 +
   
 +
    x.classList.toggle("change");
 +
   
 +
};
 +
 +
$(document).ready(function(){
 +
    $("#icon_menu").click(
 +
    function(){$("#menu").toggle()}
 +
    );
 +
     
 +
});
 +
 +
$(document).ready(function() {
 +
   
 +
    $( '.dropdown' ).hover(
 +
        function(){
 +
            $(this).children('.dropdown-content').slideDown(600);
 +
        },
 +
        function(){
 +
            $(this).children('.dropdown-content').slideUp(500);
 +
        }
 +
    );
 +
});
 +
</script>
 +
<script>
 +
$(document).ready(function(){     
 +
  var scroll_start = 0;
 +
  var startchange = $('#startchange');
 +
  var offset = startchange.offset();
 +
  $(document).scroll(function() {
 +
      scroll_start = $(this).scrollTop();
 +
      if(scroll_start > offset.top) {
 +
          $('#navbar').css('background-color', 'white');
 +
      } else {
 +
          $('#navbar').css('background-color', 'none');
 +
      }
 +
  });
 +
});
 +
</script>
 +
</div>
 +
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 04:49, 12 September 2016