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

 
(75 intermediate revisions by 2 users not shown)
Line 14: Line 14:
 
         * {
 
         * {
 
             box-sizing: border-box;
 
             box-sizing: border-box;
 +
            font-size:18px;
 
         }
 
         }
 
         body {margin:0;padding:0;}
 
         body {margin:0;padding:0;}
−
         #LOGO {
+
         #LOGObg {
 
             position:fixed;
 
             position:fixed;
−
             top:15px;
+
             top:22px;
−
             left:129px;
+
             left:115px;
−
             z-index:10;
+
             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;
 +
        }
 +
 +
 +
 
         .menu {
 
         .menu {
−
             width: 100%;
+
             /*width: 100%;*/
 
             height:65px;
 
             height:65px;
 
             margin: 0;
 
             margin: 0;
 
             /*align-content:center;*/
 
             /*align-content:center;*/
−
             padding: 20px 0 0 20%;
+
             padding: 20px 0 0 23%;
 
             /*padding-right: 30px;*/
 
             /*padding-right: 30px;*/
 
             font-family: 'Georgia','Goudy Old Style Regular',sans-serif !important;
 
             font-family: 'Georgia','Goudy Old Style Regular',sans-serif !important;
Line 35: Line 50:
 
             top: 16px;
 
             top: 16px;
 
             background:white;
 
             background:white;
 +
            box-shadow:gray 0px 3px 3px;
 
             /*background: #e9e9e9;*/
 
             /*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 {
 
         .neiyebg {
 
             position: relative;
 
             position: relative;
Line 64: Line 94:
  
 
         .menu > ul > li {
 
         .menu > ul > li {
 +
            height:50px;
 
             float: left;
 
             float: left;
 
             /*background: #e9e9e9;*/
 
             /*background: #e9e9e9;*/
Line 114: Line 145:
 
             /*width: 185px;*/
 
             /*width: 185px;*/
 
             left: auto;
 
             left: auto;
 +
            top:50px;
 
         }
 
         }
  
Line 132: Line 164:
 
             margin: 0 0 0 16px;
 
             margin: 0 0 0 16px;
 
         }
 
         }
−
 
+
        svg {
−
 
+
            position: relative;
 +
            top: -65px;
 +
            z-index: -99;
 +
        }
 +
       
 
     </style>
 
     </style>
 
</head>
 
</head>
 
<body>
 
<body>
−
<div>
+
    <div id="LOGObg"></div>
 
     <a href="https://2018.igem.org/Team:NAU-CHINA">
 
     <a href="https://2018.igem.org/Team:NAU-CHINA">
−
         <img id="LOGO" src="https://static.igem.org/mediawiki/2018/4/42/T--NAU-CHINA--loading_icon.png" width="100" />
+
         <img id="LOGO" src="https://static.igem.org/mediawiki/2018/4/4d/T--NAU-CHINA--MOSFET_LOGO.png" />
 
     </a>
 
     </a>
−
</div>
 
  
−
<div class="menu">
 
−
    <ul>
 
−
        <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="#">PROJECT</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</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/Parts">Parts</a></li>
 
−
            </ul>
 
−
        </li>
 
−
        <li>
 
−
            <a href="https://2018.igem.org/Team:NAU-CHINA/Model">MODEL</a>
 
−
            <ul>
 
−
                <li><a href="https://2018.igem.org/Team:NAU-CHINA/Overview">Overview</a></li>
 
−
                <li><a href="#">Project Modeling</a></li>
 
−
                <li><a href="#">Auxiliary Understanding</a></li>
 
−
            </ul>
 
−
        </li>
 
−
        <li>
 
−
            <a href="https://2018.igem.org/Team:NAU-CHINA/iGEMCloud">iGEMCloud</a>
 
−
            <ul>
 
−
                <li><a href="https://2018.igem.org/Team:NAU-CHINA/Software">Software</a></li>
 
−
                <li><a href="#">Overview</a></li>
 
−
                <li><a href="#">Main Function</a></li>
 
−
            </ul>
 
−
        </li>
 
−
        <li>
 
−
            <a href="https://2018.igem.org/Team:NAU-CHINA/Human_Practices">HUMAN PRACTICES</a>
 
−
            <ul>
 
−
                <li><a href="#">Overview</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>
 
−
            <ul>
 
−
                <li><a href="#">Overview</a></li>
 
−
                <li><a href="#">Safe Project Design</a></li>
 
−
                <li><a href="#">Safe Lab Work</a></li>
 
−
            </ul>
 
−
        </li>
 
−
        <li><a href="https://2018.igem.org/Team:NAU-CHINA/Notebook">NOTEBOOK</a></li>
 
  
 +
    <div class="menu">
 +
        <ul>
 +
            <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 id="banner">
 +
        <img src="#"/>
 +
    </div>
  
−
    </ul>
 
−
</div>
 
  
−
    <!--<script>
 
−
        $(window).scrollTo(300, 500);
 
−
    </script>-->
 
−
<div class="neiyebg">
 
  
−
     <script>
+
 
−
        //调整内页背景图像尺寸至适合屏幕
+
 
−
        var l = $(window).width();
+
<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"
−
        $(".neiyebg img").attr("width", l);
+
        y="0px" viewBox="0 0 865 316" style="enable-background:new 0 0 865 316;" xml:space="preserve">
−
        $(".menu").css("width", l);
+
<polyline id="XMLID_7_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" points="
−
        $(window).resize(function () {
+
     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
−
             var l = $(window).width();
+
    824.892,209.06 831.424,209.01 831.424,184.511 " />
−
             $(".neiyebg img").attr("width", l);
+
 
 +
 
 +
 
 +
<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);
 
             $(".menu").css("width", l);
  
−
             if ($(window).width() < 1200) {
+
             //随Resize改变尺寸
−
                 $(".menu > ul").css("display", "none");
+
            $(window).resize(function () {
−
            }
+
                var l = $(window).width();
−
            else {
+
                 $("#globalWrapper").attr("width", l);
−
                 $(".menu > ul").css("display", "block");
+
                 $(".menu").css("width", l);
−
            }
+
−
        });
+
−
           
+
−
    </script>
+
−
</div >
+
  
 +
                //窗口尺寸小于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>
 
     <script>
 
         $(document).ready(function () {
 
         $(document).ready(function () {
Line 241: Line 373:
 
             //导航背景变色+下滑方法
 
             //导航背景变色+下滑方法
 
             $(".menu > ul > li").hover(function () {
 
             $(".menu > ul > li").hover(function () {
−
                 //$(this).css({ "background-color": "#f0f0f0" });
+
                 //$(this).css({"background-color":"#f0f0f0"});
 
                 $(this).children("ul").stop(true, false).slideToggle(300);
 
                 $(this).children("ul").stop(true, false).slideToggle(300);
 
             });
 
             });
 
             //背景颜色还原+下拉菜单消失
 
             //背景颜色还原+下拉菜单消失
 
             $(".menu > ul > li").mouseleave(function () {
 
             $(".menu > ul > li").mouseleave(function () {
−
                 //$(this).css({ "background-color": "transparent" });
+
                 //$(this).css({"background-color":"#fff"});
 
                 $(this).children("ul").hide();
 
                 $(this).children("ul").hide();
 
             });
 
             });
Line 252: Line 384:
 
     </script>
 
     </script>
 
     <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>
 
     </script>
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 02:39, 18 October 2018

header