Difference between revisions of "Template:NAU-CHINA"

Line 1: Line 1:
 
{{NAU-CHINA/ResetCSS}}
 
{{NAU-CHINA/ResetCSS}}
−
 
 
<html>
 
<html>
 
<head>
 
<head>
−
  <meta charset="utf-8">
+
<script
−
   <title>Template:2018_NAU-CHINA</title>
+
  src="https://code.jquery.com/jquery-3.3.1.js"
 +
   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>
 
  
−
  <style type="text/css">
+
body {
−
     /*定义加载图像的格式*/
+
     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——————————*/
+
  
−
    /*指针悬停时图片上浮*/
+
* {
−
     .img_zoom:hover {
+
     box-sizing: border-box;
−
      padding-bottom: 5px;
+
}
−
      transition: 0.5s;
+
−
      margin-top: -5px;
+
−
    }
+
−
    /*————————END——————————*/
+
  
−
    /*小图标左侧浮动*/
+
a:link,a:visited {
−
     .img_guide {
+
     color: black !important;
−
      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——————————*/
 
  
  
−
  </style>
+
.menu-container {
 +
    width: 100%;
 +
    margin: 0 auto;
 +
    padding-right: 60px;
 +
    /*background: #e9e9e9;*/
 +
}
  
  
−
  <script>  
+
.menu > ul {
−
     //更改地址栏图标
+
     margin: 0 auto;
−
     $( document ).ready( function() {
+
     width: 100%;
−
      $('link[rel="shortcut icon"]').attr('href','https://static.igem.org/mediawiki/2018/2/26/T--NAU-CHINA--favicon.png');
+
    list-style: none;
−
    });
+
    padding: 0;
 +
    position: relative;
 +
    /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
 +
    box-sizing: border-box;
 +
}
  
−
    //制作加载图像
+
.menu > ul:before,
−
    $(window).load(function() {
+
.menu > ul:after {
−
      $("#loading_icon").fadeOut(1800);
+
    content: "";
−
     });
+
     display: table;
 +
}
  
−
  </script>
+
.menu > ul:after {
 +
    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 id="loading_icon"></div>
+
<div class="menu-container">
 +
   <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
  
−
</body>
+
      $(".menu > ul > li").click(function (e) {
−
</html>
+
          if ($(window).width() <= 943) {
 +
              $(this).children("ul").fadeToggle(150);
 +
              e.preventDefault();
 +
          }
 +
      });
 +
   
 +
  });
 +
</script>

Revision as of 09:11, 1 October 2018