Difference between revisions of "Template:XJTU-China/header"

 
(45 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<section class="d-flex flex-column">
 
<section class="d-flex flex-column">
 +
    <div class="logoHolder">
 +
        <a href="/Team:XJTU-China" class="logo"></a>
 +
    </div>
 
     <header class="header_area" id="topHeader">
 
     <header class="header_area" id="topHeader">
−
        <!-- <embed class="logo" src="https://static.igem.org/mediawiki/2021/4/43/T--XJTU-China--logo-svg.svg"
+
         <div class="spacer"></div>
−
            type="image/svg+xml" /> -->
+
−
         <div><span class="logo"></span></div>
+
 
         <nav class="navbar navbar-expand-lg navbar-light">
 
         <nav class="navbar navbar-expand-lg navbar-light">
 
             <div class="container">
 
             <div class="container">
Line 16: Line 17:
 
                 <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
 
                 <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
 
                     <ul class="nav navbar-nav menu_nav ml-auto">
 
                     <ul class="nav navbar-nav menu_nav ml-auto">
−
                         <li class="nav-item active"><a class="nav-link" href="/Team:XJTU-China">home</a></li>
+
                         <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China">home</a></li>
 
                         <li class="nav-item submenu dropdown">
 
                         <li class="nav-item submenu dropdown">
 
                             <a href="/Team:XJTU-China/Description" class="nav-link dropdown-toggle"
 
                             <a href="/Team:XJTU-China/Description" class="nav-link dropdown-toggle"
Line 28: Line 29:
 
                                     <a class="nav-link" href="/Team:XJTU-China/Design">design</a>
 
                                     <a class="nav-link" href="/Team:XJTU-China/Design">design</a>
 
                                 </li>
 
                                 </li>
−
                                 <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/Parts">parts</a></li>
+
                                <li class="nav-item"><a class="nav-link"
 +
                                        href="/Team:XJTU-China/Implementation">implementation</a></li>
 +
                                 <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/Parts">parts</a>
 +
                                </li>
 
                             </ul>
 
                             </ul>
 
                         </li>
 
                         </li>
Line 36: Line 40:
 
                                     aria-hidden="true"></span></a>
 
                                     aria-hidden="true"></span></a>
 
                             <ul class="dropdown-menu">
 
                             <ul class="dropdown-menu">
−
                                 <li class="nav-item"><a class="nav-link" href="ieee.html">engineering</a></li>
+
                                 <li class="nav-item"><a class="nav-link"
−
                                 <li class="nav-item"><a class="nav-link" href="ieee.html">lab note</a></li>
+
                                        href="/Team:XJTU-China/Engineering">engineering</a></li>
 +
                                 <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/Improve">improvement</a>
 +
                                </li>
 +
                                <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/Proof_Of_Concept"
 +
                                        style="font-size: 0.9em;">Proof
 +
                                        of Concept</a>
 +
                                </li>
 +
                                <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/Protocols">protocols</a>
 +
                                </li>
 
                             </ul>
 
                             </ul>
 
                         </li>
 
                         </li>
Line 45: Line 57:
 
                                     aria-hidden="true"></span></a>
 
                                     aria-hidden="true"></span></a>
 
                             <ul class="dropdown-menu">
 
                             <ul class="dropdown-menu">
−
                                 <li class="nav-item"><a class="nav-link" href="ieee.html">modeling</a></li>
+
                                 <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/Model">modelling</a></li>
−
                                 <li class="nav-item"><a class="nav-link" href="ieee.html">simulation</a></li>
+
                                 <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/protein_model"
 +
                                        style="font-size: 0.9em;">protein modelling</a></li>
 +
                                <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/Hardware">hardware</a>
 +
                                </li>
 
                             </ul>
 
                             </ul>
 
                         </li>
 
                         </li>
−
                        <li class="nav-item"><a class="nav-link" href="contact.html">parts</a></li>
 
 
                         <li class="nav-item submenu dropdown">
 
                         <li class="nav-item submenu dropdown">
 
                             <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button"
 
                             <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button"
Line 55: Line 69:
 
                                     class="fa fa-caret-down" aria-hidden="true"></span></a>
 
                                     class="fa fa-caret-down" aria-hidden="true"></span></a>
 
                             <ul class="dropdown-menu">
 
                             <ul class="dropdown-menu">
−
                                 <li class="nav-item"><a class="nav-link" href="ieee.html">explore</a></li>
+
                                 <li class="nav-item"><a class="nav-link"
−
                                 <li class="nav-item"><a class="nav-link" href="ieee.html">interview</a></li>
+
                                        href="/Team:XJTU-China/Human_Practices">overview</a></li>
 +
                                 <li class="nav-item"><a class="nav-link"
 +
                                        href="/Team:XJTU-China/Human_Practices#inspiration">interview</a></li>
 +
                                <li class="nav-item"><a class="nav-link"
 +
                                        href="/Team:XJTU-China/Human_Practices#point_6">visit</a></li>
 +
                                <li class="nav-item"><a class="nav-link"
 +
                                        href="/Team:XJTU-China/Human_Practices#point_7">survey</a></li>
 +
                                <li class="nav-item"><a class="nav-link"
 +
                                        href="/Team:XJTU-China/Communication">Communication</a>
 +
                                </li>
 +
                                <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/Education">Education</a>
 +
                                </li>
 
                             </ul>
 
                             </ul>
 
                         </li>
 
                         </li>
Line 64: Line 89:
 
                                     aria-hidden="true"></span></a>
 
                                     aria-hidden="true"></span></a>
 
                             <ul class="dropdown-menu">
 
                             <ul class="dropdown-menu">
−
                                 <li class="nav-item"><a class="nav-link" href="ieee.html">crew</a></li>
+
                                 <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/Team">crew</a></li>
−
                                 <li class="nav-item"><a class="nav-link" href="ieee.html">attibutions</a></li>
+
                                 <li class="nav-item"><a class="nav-link"
−
                                 <li class="nav-item"><a class="nav-link" href="ieee.html">collaboration</a></li>
+
                                        href="/Team:XJTU-China/Attributions">attributions</a></li>
−
                                 <li class="nav-item"><a class="nav-link" href="ieee.html">partners</a></li>
+
                                 <li class="nav-item"><a class="nav-link"
 +
                                        href="/Team:XJTU-China/Contribution">contribution</a></li>
 +
                                <li class="nav-item"><a class="nav-link"
 +
                                        href="/Team:XJTU-China/Collaborations">collaboration</a></li>
 +
                                 <li class="nav-item"><a class="nav-link"
 +
                                        href="/Team:XJTU-China/Partnership">partnership</a></li>
 
                             </ul>
 
                             </ul>
 
                         </li>
 
                         </li>
Line 76: Line 106:
 
     </header>
 
     </header>
 
</section>
 
</section>
−
<!--moving logo-->
+
 
 +
<!--movingLogo-->
 
<script>
 
<script>
 
     var logo = $('.logo');
 
     var logo = $('.logo');
Line 86: Line 117:
 
         path: 'https://static.igem.org/mediawiki/2021/c/c5/T--XJTU-China--logoMoving.txt' // the path to the animation json
 
         path: 'https://static.igem.org/mediawiki/2021/c/c5/T--XJTU-China--logoMoving.txt' // the path to the animation json
 
     }
 
     }
−
     var animation = lottie.loadAnimation(animData);
+
     var logoAnim = lottie.loadAnimation(animData);
−
     animation.setSpeed(1.5);
+
     logoAnim.setSpeed(1.5);
−
     $(logo).hover(function () { animation.play(); },
+
     $(logo).hover(function () { logoAnim.play(); },
−
                function () { animation.pause(); })
+
        function () { logoAnim.pause(); })
 
</script>
 
</script>
−
 
+
<!--headerTransition-->
−
<!--smoothNav-->
+
 
<script>
 
<script>
 
     window.addEventListener('scroll', () => {
 
     window.addEventListener('scroll', () => {
Line 98: Line 128:
 
         height = h.clientHeight;
 
         height = h.clientHeight;
 
         let header = document.querySelector('header');
 
         let header = document.querySelector('header');
−
         let logo = document.querySelector('.logo');
+
         let logoHolder = document.querySelector('.logoHolder');
 +
        let menuBtn = document.querySelector('.navbar-toggler');
 
         header.classList.toggle('sticky', window.scrollY > height);
 
         header.classList.toggle('sticky', window.scrollY > height);
−
         logo.classList.toggle('sticky', window.scrollY > height);
+
         logoHolder.classList.toggle('sticky', window.scrollY > height);
−
     })
+
        menuBtn.classList.toggle('sticky', window.scrollY > height);
 +
     });
 +
 
 
</script>
 
</script>
  
 
</html>
 
</html>

Latest revision as of 20:49, 21 October 2021