Difference between revisions of "Template:NAU-CHINA/header"

 
(166 intermediate revisions by 3 users not shown)
Line 2: Line 2:
 
<html>
 
<html>
 
<head>
 
<head>
−
<script
+
    <meta charset="utf-8" />
−
  src="https://code.jquery.com/jquery-3.3.1.js"
+
    <title>header</title>
−
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
+
    <script src="https://code.jquery.com/jquery-3.3.1.js"
−
  crossorigin="anonymous">  
+
            integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
−
</script>
+
            crossorigin="anonymous">
−
<style type="text/css">
+
    </script>
 +
    <style type="text/css">
 +
 +
        /*======================================================================================*/
  
 +
        * {
 +
            box-sizing: border-box;
 +
            font-size:18px;
 +
        }
 +
        body {margin:0;padding:0;}
 +
        #LOGObg {
 +
            position:fixed;
 +
            top:22px;
 +
            left:115px;
 +
            width: 80px;
 +
            height: 80px;
 +
            border-radius: 50%;
 +
            background-color: white;
 +
            box-shadow: 0px 5px 30px gray;
 +
        }
 +
        #LOGO {
 +
            z-index: 999;
 +
            position: fixed;
 +
            top: 22px;
 +
            left: 115px;
 +
            width:80px;
 +
        }
  
−
body {
 
−
    font-family: 'Goudy Old Style Regular','Helvetica','Arial',sans-serif;
 
−
}
 
  
−
* {
 
−
    box-sizing: border-box;
 
−
}
 
  
−
a:link,a:visited {
+
        .menu {
−
    color: black !important;
+
            /*width: 100%;*/
−
}
+
            height:65px;
 +
            margin: 0;
 +
            /*align-content:center;*/
 +
            padding: 20px 0 0 23%;
 +
            /*padding-right: 30px;*/
 +
            font-family: 'Georgia','Goudy Old Style Regular',sans-serif !important;
 +
            font-size: 1.45em;
 +
            /*font-weight: bold;*/
 +
            position: fixed;
 +
            top: 16px;
 +
            background:white;
 +
            box-shadow:gray 0px 3px 3px;
 +
            /*background: #e9e9e9;*/
 +
            z-index:99;
 +
        }
  
 +
        .caret {
 +
            display: inline-block;
 +
            width: 0;
 +
            height: 6px;
 +
            margin-left: 2px;
 +
            vertical-align:middle;
 +
            border-top: 4px dashed;
 +
            border-top: 4px solid\9;
 +
            border-right: 4px solid transparent;
 +
            border-left: 4px solid transparent;
 +
        }
  
 +
        .neiyebg {
 +
            position: relative;
 +
            top: 71px;
 +
            width: 100%;
 +
            z-index: -1;
 +
            /*height:200px;*/
 +
        }
 +
        .menu > ul {           
 +
            width: 100%;
 +
            list-style: none;
 +
            margin: 0 auto;
 +
            padding: 0;
 +
            position: relative;
 +
            box-sizing: border-box;
  
−
.menu-container {
+
        }
−
    width: 100%;
+
       
−
    margin: 0 auto;
+
        .menu > ul:before, .menu > ul:after {
−
    padding-right: 60px;
+
            content: "";
−
    /*background: #e9e9e9;*/
+
            display: table;
−
}
+
        }
  
 +
        .menu > ul:after {
 +
            clear: both;
 +
        }
  
−
.menu > ul {
+
        .menu > ul > li {
−
    margin: 0 auto;
+
            height:50px;
−
    width: 100%;
+
            float: left;
−
    list-style: none;
+
            /*background: #e9e9e9;*/
−
    padding: 0;
+
            padding: 0;
−
    position: relative;
+
            margin: 0;
−
    /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
+
        }
−
    box-sizing: border-box;
+
        /*
−
}
+
        .menu > ul > li:hover {
 +
            background: #f0f0f0;
 +
            transition: linear 0.5s;
 +
        }
 +
        */
 +
        .menu > ul > li a {
 +
            text-decoration: none;
 +
            padding: .5em 0.8em;
 +
            display: block;
 +
        }
  
−
.menu > ul:before,
+
        .menu > ul > li a:link, a:visited {
−
.menu > ul:after {
+
            color: black;
−
    content: "";
+
        }
−
    display: table;
+
 
−
}
+
        .menu > ul > li > ul {
 +
            display: none;
 +
            width: 100%;
 +
            background-color: whitesmoke;
 +
            position: absolute;
 +
            z-index: 99;
 +
            /*left: 0;*/
 +
            margin: 0;
 +
            padding:0; 
 +
            list-style: none;
 +
            box-sizing: border-box;
 +
            /*border-radius: 5px;*/
 +
            border-radius:8px;
  
−
.menu > ul:after {
+
        }
−
    clear: both;
+
        /*
−
}
+
        .menu > ul > li > ul:before, .menu > ul > li > ul:after {
 +
            content: "";
 +
            display: table;
 +
        }
 +
        */
 +
        /*.menu > ul > li > ul:after {
 +
            clear: both;
 +
        }*/
 +
        /*通过JS添加类:normal-sub，为下拉子菜单的格式*/
 +
        .menu > ul > li > ul.normal-sub {
 +
            width:12.5em;
 +
            /*width: 185px;*/
 +
            left: auto;
 +
            top:50px;
 +
        }
  
−
.menu > ul > li {
+
        .menu > ul > li > ul.normal-sub > li {
−
    float: right;
+
            width: 100%;
−
    /*background: #e9e9e9;*/
+
            position: relative;
−
    padding: 0;
+
            /*left:16px;*/
−
    margin: 0;
+
        }
−
}
+
  
−
.menu > ul > li a {
+
        .menu > ul > li > ul.normal-sub > li:hover {
−
    text-decoration: none;
+
            color: white;
−
    padding: 1.5em 1.5em;
+
            background-color: rgba(192,192,192,0.15);
−
    display: block;
+
        }
−
}
+
  
−
.menu > ul > li:hover {
+
        .menu > ul > li > ul.normal-sub > li a {
−
    background: #f0f0f0;
+
            border: 0;
−
    transition: linear 0.5s;
+
            padding: 0.7em 0;
−
}
+
            margin: 0 0 0 16px;
 +
        }
 +
        svg {
 +
            position: relative;
 +
            top: -65px;
 +
            z-index: -99;
 +
        }
 +
       
 +
    </style>
 +
</head>
 +
<body>
 +
    <div id="LOGObg"></div>
 +
    <a href="https://2018.igem.org/Team:NAU-CHINA">
 +
        <img id="LOGO" src="https://static.igem.org/mediawiki/2018/4/4d/T--NAU-CHINA--MOSFET_LOGO.png" />
 +
    </a>
  
−
.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,
+
    <div class="menu">
−
.menu > ul > li > ul:after {
+
        <ul>
−
    content: "";
+
            <li>
−
    display: table;
+
                <a href="#">TEAM<span class="caret"></span></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="#">PROJECT<span class="caret"></span></a>
 +
                <ul>
 +
                    <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>
 +
                    <li><a href="https://2018.igem.org/Team:NAU-CHINA/Protocols">Protocols</a></li>
 +
                    <li><a href="https://2018.igem.org/Team:NAU-CHINA/Application_prospects">Application Prospects</a></li>
 +
                </ul>
 +
            </li>
 +
            <li>
 +
                <a href="#">RESULTS<span class="caret"></span></a>
 +
                <ul>
 +
                    <li><a href="https://2018.igem.org/Team:NAU-CHINA/Demonstrate">Demonstrate</a></li>
 +
               
 +
             
 +
                    <li><a href="https://2018.igem.org/Team:NAU-CHINA/Basic_Part">Basic Part</a></li>
 +
                      <li><a href="https://2018.igem.org/Team:NAU-CHINA/Composite_Part">Composite Part</a></li>
 +
                      <li><a href="https://2018.igem.org/Team:NAU-CHINA/Improve">Improved Parts</a></li>
 +
                      <li><a href="https://2018.igem.org/Team:NAU-CHINA/Part_Collection">Part Collection</a></li>
 +
                </ul>
 +
            </li>
 +
            <li>
 +
                <a href="#">MODEL<span class="caret"></span></a>
 +
                <ul>
 +
                    <li><a href="https://2018.igem.org/Team:NAU-CHINA/Model">Overview</a></li>
 +
                    <li><a href="https://2018.igem.org/Team:NAU-CHINA/Model Details">Model Illustration</a></li>
 +
                    <li><a href="https://2018.igem.org/Team:NAU-CHINA/Auxiliary Understanding">Auxiliary Understanding</a></li>
 +
                </ul>
 +
            </li>
 +
            <li><a href="https://2018.igem.org/Team:NAU-CHINA/Software">iGEMCloud</a> </li>
 +
            <li>
 +
                <a href="#">HUMAN PRACTICES<span class="caret"></span></a>
 +
                <ul>
 +
                    <li><a href="https://2018.igem.org/Team:NAU-CHINA/Human_Practices">Overview</a></li>
 +
                    <li><a href="https://2018.igem.org/Team:NAU-CHINA/IntegratedHP">Integrated HP</a></li>
 +
                    <li><a href="https://2018.igem.org/Team:NAU-CHINA/Public_Engagement">Public Engagement</a></li>
 +
                </ul>
 +
            </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/Notebook">NOTEBOOK</a></li>
 +
        </ul>
 +
    </div>
  
−
.menu > ul > li > ul:after {
 
−
    clear: both;
 
−
}
 
  
  
 +
<div id="banner">
 +
        <img src="#"/>
 +
    </div>
  
−
.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 {
+
<svg version="1.1" id="&#x56FE;&#x5C42;_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
−
    width: 100%;
+
        y="0px" viewBox="0 0 865 316" style="enable-background:new 0 0 865 316;" xml:space="preserve">
−
}
+
<polyline id="XMLID_7_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" points="
 +
    773.577,209.06 773.577,181.005 791.092,181.005 791.092,209.01 802.388,209.01 802.449,188.686 813.671,183.11 824.892,188.686
 +
    824.892,209.06 831.424,209.01 831.424,184.511 " />
  
−
.menu > ul > li > ul.normal-sub > li a {
 
−
    border: 0;
 
−
    padding: 1em 0;
 
−
}
 
  
  
−
</style>
+
<polyline id="XMLID_75_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" points="
 +
    38.85,162.04 85.307,208.273 773.577,209.06 " />
  
  
−
</head>
 
−
<body>
 
−
<div class="menu-container">
 
−
  <div class="menu">
 
−
    <ul>
 
−
      <li><a href="https://2018.igem.org/Team:NAU-CHINA/Human_Practices">Human Practices</a></li>
 
  
 +
<polyline id="XMLID_23_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" points="
 +
    848.939,157.965 848.939,209.01 831.424,209.01 " />
  
−
      <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>
+
<polyline id="XMLID_6_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;" points="
−
      <li><a href="#">Project</a>
+
    629.313,191.179 534.577,191.179 498.289,208.273 " />
−
        <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>
+
<circle id="XMLID_5_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" cx="636.125" cy="191.179" r="5.754" />
−
          <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>
+
<circle id="XMLID_21_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" cx="849.14" cy="152.212" r="5.754" />
−
          <li><a href="https://2018.igem.org/Team:NAU-CHINA/InterLab">Interlab</a></li>
+
 
−
        </ul>
+
 
−
      </li>
+
 
−
      <li><a href="#">Team</a>
+
<line id="XMLID_4_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;" x1="181.745" y1="196.864" x2="248.412" y2="196.864" />
−
        <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>
+
<line id="XMLID_3_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;" x1="221.996" y1="220.53" x2="358.412" y2="220.53" />
−
        </ul>
+
 
−
      </li>
+
 
−
      <li><a href="https://2018.igem.org/Team:NAU-CHINA">Home</a></li>
+
 
 +
<circle id="XMLID_2_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" cx="364.165" cy="220.53" r="5.754" />
 +
 
 +
 
 +
 
 +
<line id="XMLID_15_" style="fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;" x1="38.85" y1="13.418" x2="38.85" y2="244.708" />
 +
 
 +
 
 +
 
 +
<path id="XMLID_14_" style="fill:none;stroke:#000000;stroke-miterlimit:10;" d="M38.1,243.167
 +
    c15.123,0,27.382,12.259,27.382,27.382c0,15.123-12.259,27.382-27.382,27.382s-27.382-12.259-27.382-27.382
 +
    c0-2.704,0.392-5.317,1.122-7.785" />
 +
 
 +
 
 +
 
 +
<path id="XMLID_13_" style="fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;" d="M56.745,277.209
 +
    c-3.679,10.297-15.008,15.662-25.305,11.984c-10.297-3.679-15.662-15.008-11.984-25.305c3.679-10.297,15.008-15.662,25.305-11.984
 +
    c1.841,0.658,3.525,1.56,5.028,2.658" />
 +
 
 +
 
 +
 
 +
<path id="XMLID_12_" style="fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;" d="M38.1,243.167
 +
    c15.123,0,27.382,12.259,27.382,27.382c0,15.123-12.259,27.382-27.382,27.382s-27.382-12.259-27.382-27.382
 +
    c0-2.704,0.392-5.317,1.122-7.785" />
 +
 
 +
 
 +
 
 +
<path id="XMLID_11_" style="fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;" d="M38.484,256.98
 +
    c7.494,0.212,13.397,6.458,13.185,13.952c-0.212,7.494-6.458,13.397-13.952,13.185c-7.494-0.212-13.397-6.458-13.185-13.952
 +
    c0.038-1.34,0.269-2.629,0.665-3.842" />
 +
 
 +
 
 +
 
 +
<line id="XMLID_10_" style="fill:none;stroke:#000000;stroke-miterlimit:10;" x1="49.275" y1="254.531" x2="53.475" y2="248.397" />
 +
 
 +
 
 +
 
 +
<line id="XMLID_9_" style="fill:none;stroke:#000000;stroke-miterlimit:10;" x1="46.477" y1="252.666" x2="49.574" y2="247.094" />
 +
 
 +
 
 +
 
 +
<line id="XMLID_8_" style="fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;" x1="34.123" y1="265.51" x2="26.332" y2="255.64" />
 +
 
 +
 
 +
 
 +
<circle id="XMLID_1_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" cx="813.661" cy="198.211" r="5.714" />
  
  
−
    </ul>
 
−
  </div>
 
−
</div>
 
  
 +
</svg>
  
−
<script>
 
−
    /*global $ */
 
−
  $(document).ready(function () {
 
  
−
      "use strict";
+
    <div class="neiyebg">
 +
        <script>
 +
            //调整内页背景图像尺寸至适合窗口
 +
            var l = $(window).width(); //获取窗口尺寸
 +
            //初始化尺寸
 +
            $("#globalWrapper").attr("width", l);
 +
            $(".menu").css("width", l);
  
 +
            //随Resize改变尺寸
 +
            $(window).resize(function () {
 +
                var l = $(window).width();
 +
                $("#globalWrapper").attr("width", l);
 +
                $(".menu").css("width", l);
  
 +
                //窗口尺寸小于1200则切换为新导航模式
 +
                if ($(window).width() < 1200) {
  
 +
                    $(".menu").slideUp(1000); $(".menu").css('box-shadow', 'none');
 +
                    $("#LOGO").css({ 'left': '30px', 'transition': '1s' }); $("#LOGObg").css({ 'left': '30px', 'transition': '1s' });
  
−
      $('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
+
                    //$(".menu").css("display", "none");
−
      //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)
+
                    //$("#LOGO").hide();
 +
                }
 +
                else {
 +
                    $(".menu").slideDown(500); $(".menu").css('box-shadow', 'gray 0px 3px 3px');
 +
                    $("#LOGO").css({ 'left': '115px', 'transition': '1s' }); $("#LOGObg").css({ 'left': '115px', 'transition': '1s' });
  
 +
                    //$(".menu").css("display", "block");
 +
                    //$("#LOGO").show();
 +
                }
 +
            });
 +
        </script>
 +
    </div>
 +
    <script>
 +
        $(document).ready(function () {
 +
            $('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
 +
            //导航背景变色+下滑方法
 +
            $(".menu > ul > li").hover(function () {
 +
                //$(this).css({"background-color":"#f0f0f0"});
 +
                $(this).children("ul").stop(true, false).slideToggle(300);
 +
            });
 +
            //背景颜色还原+下拉菜单消失
 +
            $(".menu > ul > li").mouseleave(function () {
 +
                //$(this).css({"background-color":"#fff"});
 +
                $(this).children("ul").hide();
 +
            });
 +
        });
 +
    </script>
 +
    <script>
 +
        $(document).ready(function () {
 +
            $(".personalBox img").attr({ "height": "600px" });
 +
            var colors = ['red', 'orange', 'yellow', 'green', 'wheat', 'blue', 'purple']
 +
            var color1 = colors[parseInt(Math.random() * 7)];
 +
            var color2 = colors[parseInt(Math.random() * 7)];
 +
            var color3 = colors[parseInt(Math.random() * 7)];
 +
            var color4 = colors[parseInt(Math.random() * 7)];
  
−
      $(".menu > ul > li").hover(function (e) {
+
            $('#XMLID_5_').css('fill', color1);
−
          if ($(window).width() > 943) {
+
            $('#XMLID_21_').css('fill', color2);
−
              $(this).children("ul").stop(true, false).fadeToggle(100);
+
            $('#XMLID_2_').css('fill', color3);
−
              e.preventDefault();
+
            $('#XMLID_1_').css('fill', color4);
−
          }
+
        });
−
      });
+
−
      //If width is more than 943px dropdowns are displayed on hover
+
  
−
      $(".menu > ul > li").click(function (e) {
+
    </script>
−
          if ($(window).width() <= 943) {
+
</body>
−
              $(this).children("ul").fadeToggle(150);
+
</html>
−
              e.preventDefault();
+
−
          }
+
−
      });
+
−
   
+
−
  });
+
−
</script>
+

Latest revision as of 02:39, 18 October 2018

header