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

 
(208 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
<!DOCTYPE html>
+
{{NAU-CHINA/ResetCSS}}
 
<html>
 
<html>
 
<head>
 
<head>
−
  <title>2018_NAU-CHINA/header</title>
+
    <meta charset="utf-8" />
−
  <style type="text/css">
+
    <title>header</title>
−
    html {font-family: Helvetica,Arial,sans-serif;}
+
    <script src="https://code.jquery.com/jquery-3.3.1.js"
 +
            integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
 +
            crossorigin="anonymous">
 +
    </script>
 +
    <style type="text/css">
 +
 +
        /*======================================================================================*/
  
−
    #nav_container {
+
        * {
−
      display: grid;
+
            box-sizing: border-box;
−
      grid-template-rows: 60px;
+
            font-size:18px;
−
      grid-template-columns: 50% 50%;
+
        }
−
      text-align: center;
+
        body {margin:0;padding:0;}
−
      line-height: 60px; /*line-height的值应与grid-template-rows的值相等，用于垂直居中*/
+
        #LOGObg {
−
      background-color: #C7EDCC;
+
            position:fixed;
−
      padding: 5px 5px 5px 0px; /*上 右 下 左*/
+
            top:22px;
−
      box-shadow: 0 5px 5px gray; /*box-shadow: h-shadow v-shadow blur spread color inset;*/
+
            left:115px;
−
      font-family: Goudy Old Style Regular,sans-serif;
+
            width: 80px;
−
      font-size: 18px;
+
            height: 80px;
−
      background-color: whitesmoke;
+
            border-radius: 50%;
 +
            background-color: white;
 +
            box-shadow: 0px 5px 30px gray;
 +
        }
 +
        #LOGO {
 +
            z-index: 999;
 +
            position: fixed;
 +
            top: 22px;
 +
            left: 115px;
 +
            width:80px;
 +
        }
  
−
    }
 
  
  
 +
        .menu {
 +
            /*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;
 +
        }
  
−
    #nav {
+
        .caret {
−
      display: grid;
+
            display: inline-block;
−
      grid-template-columns: repeat(6,1fr);  
+
            width: 0;
−
      grid-column-gap: 5px;
+
            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;
−
    #nav a {
+
            width: 100%;
−
      text-decoration: none;
+
            z-index: -1;
−
      color: black;
+
            /*height:200px;*/
−
      transition: background-color 0.3s ease-out 0.1s; /*property duration timing-function delay*/
+
        }
−
    }
+
        .menu > ul {          
−
    #nav a:hover {background-color: #C7EDCC;}
+
            width: 100%;
 +
            list-style: none;
 +
            margin: 0 auto;
 +
            padding: 0;
 +
            position: relative;
 +
            box-sizing: border-box;
  
 +
        }
 +
       
 +
        .menu > ul:before, .menu > ul:after {
 +
            content: "";
 +
            display: table;
 +
        }
  
 +
        .menu > ul:after {
 +
            clear: both;
 +
        }
  
 +
        .menu > ul > li {
 +
            height:50px;
 +
            float: left;
 +
            /*background: #e9e9e9;*/
 +
            padding: 0;
 +
            margin: 0;
 +
        }
 +
        /*
 +
        .menu > ul > li:hover {
 +
            background: #f0f0f0;
 +
            transition: linear 0.5s;
 +
        }
 +
        */
 +
        .menu > ul > li a {
 +
            text-decoration: none;
 +
            padding: .5em 0.8em;
 +
            display: block;
 +
        }
  
−
  </style>
+
        .menu > ul > li a:link, a:visited {
 +
            color: black;
 +
        }
 +
 
 +
        .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 > 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 > ul.normal-sub > li {
 +
            width: 100%;
 +
            position: relative;
 +
            /*left:16px;*/
 +
        }
 +
 
 +
        .menu > ul > li > ul.normal-sub > li:hover {
 +
            color: white;
 +
            background-color: rgba(192,192,192,0.15);
 +
        }
 +
 
 +
        .menu > ul > li > ul.normal-sub > li a {
 +
            border: 0;
 +
            padding: 0.7em 0;
 +
            margin: 0 0 0 16px;
 +
        }
 +
        svg {
 +
            position: relative;
 +
            top: -65px;
 +
            z-index: -99;
 +
        }
 +
       
 +
    </style>
 
</head>
 
</head>
 
<body>
 
<body>
−
  <div id="nav_container">
+
    <div id="LOGObg"></div>
−
     <div>LOGO</div>
+
     <a href="https://2018.igem.org/Team:NAU-CHINA">
−
     <div id="nav">
+
        <img id="LOGO" src="https://static.igem.org/mediawiki/2018/4/4d/T--NAU-CHINA--MOSFET_LOGO.png" />
−
      <a href="#">HOME</a>
+
    </a>
−
      <a href="#">TEAM</a>
+
 
−
      <a href="#">PROJECT</a>
+
 
−
      <a href="#">MODEL</a>
+
     <div class="menu">
−
      <a href="#">NOTEBOOK</a>
+
        <ul>
−
      <a href="#">PARTS</a>
+
            <li>
 +
                <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>
 
     </div>
−
  </div>
 
  
  
  
 +
<div id="banner">
 +
        <img src="#"/>
 +
    </div>
  
  
Line 63: Line 245:
  
  
 +
<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"
 +
        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 " />
  
  
  
 +
<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 " />
 +
 +
 +
 +
<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 " />
 +
 +
 +
 +
<polyline id="XMLID_6_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;" points="
 +
    629.313,191.179 534.577,191.179 498.289,208.273 " />
 +
 +
 +
 +
<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" />
 +
 +
 +
 +
<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" />
 +
 +
 +
 +
<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" />
 +
 +
 +
 +
<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" />
 +
 +
 +
 +
<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" />
 +
 +
 +
 +
</svg>
 +
 +
 +
    <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").css("display", "none");
 +
                    //$("#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)];
 +
 +
            $('#XMLID_5_').css('fill', color1);
 +
            $('#XMLID_21_').css('fill', color2);
 +
            $('#XMLID_2_').css('fill', color3);
 +
            $('#XMLID_1_').css('fill', color4);
 +
        });
  
 +
    </script>
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 02:39, 18 October 2018

header