Difference between revisions of "Template:NAU-CHINA"

Line 1: Line 1:
 
{{NAU-CHINA/ResetCSS}}
 
{{NAU-CHINA/ResetCSS}}
 +
 
<html>
 
<html>
 
<head>
 
<head>
−
<script
+
  <meta charset="utf-8">
−
  src="https://code.jquery.com/jquery-3.3.1.js"
+
   <title>Template:2018_NAU-CHINA</title>
−
   integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
+
−
  crossorigin="anonymous"> 
+
−
</script>
+
−
<style type="text/css">
+
  
 +
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
  
−
body {
+
  <style type="text/css">
−
     font-family: 'Goudy Old Style Regular','Helvetica','Arial',sans-serif;
+
     /*定义加载图像的格式*/
−
}
+
    #loading_icon {
 +
        position: fixed;
 +
        left: 0px;
 +
        top: 0px;
 +
        width: 100%;
 +
        height: 100%;
 +
        z-index: 9999;
 +
        background: url("https://static.igem.org/mediawiki/2018/e/e8/T--NAU-CHINA--loadingicon.jpg") center no-repeat #fff;
 +
        background-size: 150px;
 +
    }
 +
    /*————————END——————————*/
 +
    /*图像指针为小手，并且可以点开*/
 +
    img {
 +
      cursor: pointer;
 +
    }
 +
    /*————————END——————————*/
  
−
* {
+
    /*指针悬停时图片上浮*/
−
     box-sizing: border-box;
+
     .img_zoom:hover {
−
}
+
      padding-bottom: 5px;
 +
      transition: 0.5s;
 +
      margin-top: -5px;
 +
    }
 +
    /*————————END——————————*/
  
−
a:link,a:visited {
+
    /*小图标左侧浮动*/
−
     color: black !important;
+
     .img_guide {
−
}
+
      float: left;
 +
      margin: 0 20px 0 0;
 +
    }
 +
    /*————————END——————————*/
  
 +
    /*小图标移动放大*/
 +
    .img_guide {
 +
      transform: scale(0.8);
 +
      transition: 0.5s;
 +
    }
 +
    .img_guide:hover {
 +
      transform: scale(1);
 +
      transition: 0.5s;
 +
    }
 +
    /*————————END——————————*/
  
  
−
.menu-container {
+
  </style>
−
    width: 100%;
+
−
    margin: 0 auto;
+
−
    padding-right: 60px;
+
−
    /*background: #e9e9e9;*/
+
−
}
+
  
  
−
.menu > ul {
+
  <script>  
−
     margin: 0 auto;
+
     //更改地址栏图标
−
     width: 100%;
+
     $( document ).ready( function() {
−
    list-style: none;
+
      $('link[rel="shortcut icon"]').attr('href','https://static.igem.org/mediawiki/2018/2/26/T--NAU-CHINA--favicon.png');
−
    padding: 0;
+
    });
−
    position: relative;
+
−
    /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
+
−
    box-sizing: border-box;
+
−
}
+
  
−
.menu > ul:before,
+
    //制作加载图像
−
.menu > ul:after {
+
    $(window).load(function() {
−
    content: "";
+
      $("#loading_icon").fadeOut(1800);
−
     display: table;
+
     });
−
}
+
  
−
.menu > ul:after {
+
  </script>
−
    clear: both;
+
−
}
+
  
−
.menu > ul > li {
 
−
    float: right;
 
−
    /*background: #e9e9e9;*/
 
−
    padding: 0;
 
−
    margin: 0;
 
−
}
 
−
 
−
.menu > ul > li a {
 
−
    text-decoration: none;
 
−
    padding: 1.5em 1.5em;
 
−
    display: block;
 
−
}
 
−
 
−
.menu > ul > li:hover {
 
−
    background: #f0f0f0;
 
−
    transition: linear 0.5s;
 
−
}
 
−
 
−
.menu > ul > li > ul {
 
−
    display: none;
 
−
    width: 100%;
 
−
    background-color: whitesmoke;
 
−
    /*padding: 20px;*/
 
−
    position: absolute;
 
−
    z-index: 99;
 
−
    left: 0;
 
−
    margin: 0;
 
−
    list-style: none;
 
−
    box-sizing: border-box;
 
−
}
 
−
 
−
.menu > ul > li > ul:before,
 
−
.menu > ul > li > ul:after {
 
−
    content: "";
 
−
    display: table;
 
−
}
 
−
 
−
.menu > ul > li > ul:after {
 
−
    clear: both;
 
−
}
 
−
 
−
 
−
 
−
.menu > ul > li > ul > li a {
 
−
    color: #777;
 
−
    /*padding: .2em 0;*/
 
−
    width: 100%;
 
−
    display: block;
 
−
    border-bottom: 1px solid #ccc;
 
−
}
 
−
 
−
.menu > ul > li > ul.normal-sub {
 
−
    width: 200px;
 
−
    left: auto;
 
−
    padding: 10px 20px;
 
−
}
 
−
 
−
.menu > ul > li > ul.normal-sub:before {
 
−
    width: 40px;
 
−
 
−
}
 
−
 
−
.menu > ul > li > ul.normal-sub > li {
 
−
    width: 100%;
 
−
}
 
−
 
−
.menu > ul > li > ul.normal-sub > li a {
 
−
    border: 0;
 
−
    padding: 1em 0;
 
−
}
 
−
 
−
 
−
</style>
 
  
  
 
</head>
 
</head>
 
<body>
 
<body>
−
<div class="menu-container">
+
   <div id="loading_icon"></div>
−
   <div class="menu">
+
−
    <ul>
+
−
      <li><a href="https://2018.igem.org/Team:NAU-CHINA/Human_Practices">Human Practices</a></li>
+
−
 
+
−
 
+
−
      <li><a href="https://2018.igem.org/Team:NAU-CHINA/Notebook">Notebook</a></li>
+
−
      <li><a href="https://2018.igem.org/Team:NAU-CHINA/Safety">Safety</a></li>
+
−
 
+
−
      <li><a href="https://2018.igem.org/Team:NAU-CHINA/Model">Model</a></li>
+
−
      <li><a href="https://2018.igem.org/Team:NAU-CHINA/Software">Software</a></li>
+
−
      <li><a href="#">Project</a>
+
−
        <ul>
+
−
          <li><a href="https://2018.igem.org/Team:NAU-CHINA/Application_prospects">Application prospects</a></li>
+
−
          <li><a href="https://2018.igem.org/Team:NAU-CHINA/Parts">Parts</a></li>
+
−
          <li><a href="https://2018.igem.org/Team:NAU-CHINA/Protocols">Protocols</a></li>
+
−
          <li><a href="https://2018.igem.org/Team:NAU-CHINA/Results">Results</a></li>
+
−
          <li><a href="https://2018.igem.org/Team:NAU-CHINA/Demonstrate">Demonstrate</a></li>
+
−
          <li><a href="https://2018.igem.org/Team:NAU-CHINA/Overview">Overview</a></li>
+
−
          <li><a href="https://2018.igem.org/Team:NAU-CHINA/Design">Design</a></li>
+
−
          <li><a href="https://2018.igem.org/Team:NAU-CHINA/InterLab">Interlab</a></li>
+
−
        </ul>
+
−
      </li>
+
−
      <li><a href="#">Team</a>
+
−
        <ul>
+
−
          <li><a href="https://2018.igem.org/Team:NAU-CHINA/Team_members">Team members</a></li>
+
−
          <li><a href="https://2018.igem.org/Team:NAU-CHINA/Collaborations">Collaborations</a></li>
+
−
          <li><a href="https://2018.igem.org/Team:NAU-CHINA/Attributions">Attributions</a></li>
+
−
        </ul>
+
−
      </li>
+
−
      <li><a href="https://2018.igem.org/Team:NAU-CHINA">Home</a></li>
+
−
 
+
−
 
+
−
    </ul>
+
−
  </div>
+
−
</div>
+
−
 
+
−
 
+
−
<script>
+
−
    /*global $ */
+
−
  $(document).ready(function () {
+
−
 
+
−
      "use strict";
+
−
 
+
−
 
+
  
  
−
      $('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
 
−
      //Checks if drodown menu's li elements have anothere level (ul), if not the dropdown is shown as regular dropdown, not a mega menu (thanks Luka Kladaric)
 
  
  
−
      $(".menu > ul > li").hover(function (e) {
 
−
          if ($(window).width() > 943) {
 
−
              $(this).children("ul").stop(true, false).fadeToggle(100);
 
−
              e.preventDefault();
 
−
          }
 
−
      });
 
−
      //If width is more than 943px dropdowns are displayed on hover
 
  
−
      $(".menu > ul > li").click(function (e) {
+
</body>
−
          if ($(window).width() <= 943) {
+
</html>
−
              $(this).children("ul").fadeToggle(150);
+
−
              e.preventDefault();
+
−
          }
+
−
      });
+
−
   
+
−
  });
+
−
</script>
+

Revision as of 09:27, 1 October 2018

Template:2018_NAU-CHINA