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

 
(32 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">
−
        <header class="header_area" id="topHeader">
+
    <div class="logoHolder">
−
            <!-- <embed class="logo" src="https://static.igem.org/mediawiki/2021/4/43/T--XJTU-China--logo-svg.svg"
+
        <a href="/Team:XJTU-China" class="logo"></a>
−
            type="image/svg+xml" /> -->
+
    </div>
−
            <a href="/Team:XJTU-China" class="logo"></a>
+
    <header class="header_area" id="topHeader">
−
            <nav class="navbar navbar-expand-lg navbar-light">
+
        <div class="spacer"></div>
−
                <div class="container">
+
        <nav class="navbar navbar-expand-lg navbar-light">
−
                    <!-- Brand and toggle get grouped for better mobile display -->
+
            <div class="container">
−
                    <button class="navbar-toggler" type="button" data-toggle="collapse"
+
                <!-- Brand and toggle get grouped for better mobile display -->
−
                        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+
                <button class="navbar-toggler" type="button" data-toggle="collapse"
−
                        aria-expanded="false" aria-label="Toggle navigation">MENU
+
                    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
−
                        <span class="fa fa-bars" aria-hidden="true"></span>
+
                    aria-label="Toggle navigation">MENU
−
                    </button>
+
                    <span class="fa fa-bars" aria-hidden="true"></span>
−
                    <!-- Collect the nav links, forms, and other content for toggling -->
+
                </button>
−
                    <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
+
                <!-- Collect the nav links, forms, and other content for toggling -->
−
                        <ul class="nav navbar-nav menu_nav ml-auto">
+
                <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
−
                            <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China">home</a></li>
+
                    <ul class="nav navbar-nav menu_nav ml-auto">
−
                            <li class="nav-item submenu dropdown">
+
                        <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China">home</a></li>
−
                                <a href="/Team:XJTU-China/Description" class="nav-link dropdown-toggle"
+
                        <li class="nav-item submenu dropdown">
−
                                    data-toggle="dropdown" role="button" aria-haspopup="true"
+
                            <a href="/Team:XJTU-China/Description" class="nav-link dropdown-toggle"
−
                                    aria-expanded="false">Project&nbsp;<span class="fa fa-caret-down"
+
                                data-toggle="dropdown" role="button" aria-haspopup="true"
−
                                        aria-hidden="true"></span></a>
+
                                aria-expanded="false">Project&nbsp;<span class="fa fa-caret-down"
−
                                <ul class="dropdown-menu">
+
                                    aria-hidden="true"></span></a>
−
                                    <li class="nav-item"><a class="nav-link"
+
                            <ul class="dropdown-menu">
−
                                            href="/Team:XJTU-China/Description">description</a></li>
+
                                <li class="nav-item"><a class="nav-link"
−
                                    <li class="nav-item">
+
                                        href="/Team:XJTU-China/Description">description</a></li>
−
                                        <a class="nav-link" href="/Team:XJTU-China/Design">design</a>
+
                                <li class="nav-item">
−
                                    </li>
+
                                    <a class="nav-link" href="/Team:XJTU-China/Design">design</a>
−
                                    <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/Parts">parts</a>
+
                                </li>
−
                                    </li>
+
                                <li class="nav-item"><a class="nav-link"
−
                                </ul>
+
                                        href="/Team:XJTU-China/Implementation">implementation</a></li>
−
                            </li>
+
                                <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/Parts">parts</a>
−
                            <li class="nav-item submenu dropdown">
+
                                </li>
−
                                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button"
+
                            </ul>
−
                                    aria-haspopup="true" aria-expanded="false">wetlab&nbsp;<span
+
                        </li>
−
                                        class="fa fa-caret-down" aria-hidden="true"></span></a>
+
                        <li class="nav-item submenu dropdown">
−
                                <ul class="dropdown-menu">
+
                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button"
−
                                    <li class="nav-item"><a class="nav-link" href="ieee.html">engineering</a></li>
+
                                aria-haspopup="true" aria-expanded="false">wetlab&nbsp;<span class="fa fa-caret-down"
−
                                    <li class="nav-item"><a class="nav-link" href="ieee.html">lab note</a></li>
+
                                    aria-hidden="true"></span></a>
−
                                 </ul>
+
                            <ul class="dropdown-menu">
−
                            </li>
+
                                <li class="nav-item"><a class="nav-link"
−
                             <li class="nav-item submenu dropdown">
+
                                        href="/Team:XJTU-China/Engineering">engineering</a></li>
−
                                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button"
+
                                <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/Improve">improvement</a>
−
                                    aria-haspopup="true" aria-expanded="false">drylab&nbsp;<span
+
                                </li>
−
                                        class="fa fa-caret-down" aria-hidden="true"></span></a>
+
                                <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/Proof_Of_Concept"
−
                                <ul class="dropdown-menu">
+
                                        style="font-size: 0.9em;">Proof
−
                                    <li class="nav-item"><a class="nav-link" href="ieee.html">modeling</a></li>
+
                                        of Concept</a>
−
                                    <li class="nav-item"><a class="nav-link" href="ieee.html">simulation</a></li>
+
                                </li>
−
                                 </ul>
+
                                 <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/Protocols">protocols</a>
−
                            </li>
+
                                </li>
−
                            <li class="nav-item"><a class="nav-link" href="contact.html">parts</a></li>
+
                             </ul>
−
                             <li class="nav-item submenu dropdown">
+
                        </li>
−
                                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button"
+
                        <li class="nav-item submenu dropdown">
−
                                    aria-haspopup="true" aria-expanded="false">Human Practices&nbsp;<span
+
                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button"
−
                                        class="fa fa-caret-down" aria-hidden="true"></span></a>
+
                                aria-haspopup="true" aria-expanded="false">drylab&nbsp;<span class="fa fa-caret-down"
−
                                <ul class="dropdown-menu">
+
                                    aria-hidden="true"></span></a>
−
                                    <li class="nav-item"><a class="nav-link" href="ieee.html">explore</a></li>
+
                            <ul class="dropdown-menu">
−
                                    <li class="nav-item"><a class="nav-link" href="ieee.html">interview</a></li>
+
                                <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/Model">modelling</a></li>
−
                                 </ul>
+
                                <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/protein_model"
−
                            </li>
+
                                        style="font-size: 0.9em;">protein modelling</a></li>
−
                             <li class="nav-item submenu dropdown end">
+
                                 <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/Hardware">hardware</a>
−
                                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button"
+
                                </li>
−
                                    aria-haspopup="true" aria-expanded="false">Team&nbsp;<span class="fa fa-caret-down"
+
                             </ul>
−
                                        aria-hidden="true"></span></a>
+
                        </li>
−
                                <ul class="dropdown-menu">
+
                        <li class="nav-item submenu dropdown">
−
                                    <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/Team">crew</a></li>
+
                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button"
−
                                    <li class="nav-item"><a class="nav-link" href="ieee.html">attibutions</a></li>
+
                                aria-haspopup="true" aria-expanded="false">Human Practices&nbsp;<span
−
                                    <li class="nav-item"><a class="nav-link" href="ieee.html">collaboration</a></li>
+
                                    class="fa fa-caret-down" aria-hidden="true"></span></a>
−
                                    <li class="nav-item"><a class="nav-link" href="ieee.html">partners</a></li>
+
                            <ul class="dropdown-menu">
−
                                 </ul>
+
                                <li class="nav-item"><a class="nav-link"
−
                             </li>
+
                                        href="/Team:XJTU-China/Human_Practices">overview</a></li>
−
                         </ul>
+
                                <li class="nav-item"><a class="nav-link"
−
                     </div>
+
                                        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>
 +
                        </li>
 +
                        <li class="nav-item submenu dropdown end">
 +
                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button"
 +
                                aria-haspopup="true" aria-expanded="false">Team&nbsp;<span class="fa fa-caret-down"
 +
                                    aria-hidden="true"></span></a>
 +
                            <ul class="dropdown-menu">
 +
                                <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="/Team:XJTU-China/Attributions">attributions</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>
 +
                         </li>
 +
                     </ul>
 
                 </div>
 
                 </div>
−
             </nav>
+
             </div>
−
         </header>
+
         </nav>
−
     </section>
+
     </header>
 +
</section>
  
−
    <!--movingLogo-->
+
<!--movingLogo-->
−
    <script>
+
<script>
−
        var logo = $('.logo');
+
    var logo = $('.logo');
−
        var animData = {
+
    var animData = {
−
            container: logo[0], // the dom element that will contain the animation
+
        container: logo[0], // the dom element that will contain the animation
−
            renderer: 'svg',
+
        renderer: 'svg',
−
            loop: true,
+
        loop: true,
−
            autoplay: false,
+
        autoplay: false,
−
            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 logoAnim = lottie.loadAnimation(animData);
+
    var logoAnim = lottie.loadAnimation(animData);
−
        logoAnim.setSpeed(1.5);
+
    logoAnim.setSpeed(1.5);
−
        $(logo).hover(function () { logoAnim.play(); },
+
    $(logo).hover(function () { logoAnim.play(); },
−
            function () { logoAnim.pause(); })
+
        function () { logoAnim.pause(); })
−
    </script>
+
</script>
−
    <!--headerTransition-->
+
<!--headerTransition-->
−
    <script>
+
<script>
−
        window.addEventListener('scroll', () => {
+
    window.addEventListener('scroll', () => {
−
            var h = document.getElementById('topHeader');
+
        var h = document.getElementById('topHeader');
−
            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');
−
            header.classList.toggle('sticky', window.scrollY > height);
+
        let menuBtn = document.querySelector('.navbar-toggler');
−
            logo.classList.toggle('sticky', window.scrollY > height);
+
        header.classList.toggle('sticky', window.scrollY > height);
−
         })
+
        logoHolder.classList.toggle('sticky', window.scrollY > height);
−
     </script>
+
         menuBtn.classList.toggle('sticky', window.scrollY > height);
 +
     });
 +
 
 +
</script>
  
 
</html>
 
</html>

Latest revision as of 20:49, 21 October 2021