Revision as of 07:46, 10 July 2021

Project

hin./ious

PART1 This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left s To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon,

PART2 To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon,

PART3 the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs t To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon,

PART4 the main menu appears beneath and the menu icon slides to the right side while the label slides up.o be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up.ide menu found on YouTube. When clicking on the menu label and icon, To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up.

PART5 To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs t To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up.o be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and t To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up.he menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again. >This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again. his menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again.This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again.

@@ Line 22: / Line 22: @@
 <body>
      <!--banner-->
-     <div class="container row fixedBackground">
+     <section>
-        <div class="fixedBackgroundImg"
+        <div class="container row fixedBackground">
-            style="background-image: url(https://static.igem.org/mediawiki/2021/f/fd/T--XJTU-China--bg.jpg);"></div>
+            <div class="fixedBackgroundImg"
-    </div>
+                style="background-image: url(https://static.igem.org/mediawiki/2021/f/fd/T--XJTU-China--bg.jpg);"></div>
-     <!--//banner-->
+        </div>
+     </section>
-     <!--about-->
+     <!--main-->
      <section class="main">
          <div class="container mainBox" id="mainBox">
@@ Line 201: / Line 201: @@
          </div>
      </section>
-    <!--//about-->
      <!--JS-->
@@ Line 212: / Line 211: @@
      <!-- <script type="text/javascript"
          src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/ytmenu&action=raw&ctype=text/javascript"></script> -->
-    <!--//JS-->
-    <!--Temporary script-->
-    <!--smoothNav-->
-    <script>
-        window.addEventListener('scroll', () => {
-            var h = document.getElementById('topHeader');
-            height = h.clientHeight;
-            let header = document.querySelector('header');
-            let logo = document.querySelector('.logo');
-            header.classList.toggle('sticky', window.scrollY > height);
-            logo.classList.toggle('sticky', window.scrollY > height);
-        })
-    </script>
      <!--to-top btn-->
      <script>
-         $(document).ready(function () {
+         var ftoTopBtn = (function () {
-            $("#to-top").hide();
+            $(document).ready(function () {
-            $(function () {
+                $("#to-top").hide();
-                $(window).scroll(function () {
+                $(function () {
-                    if ($(window).scrollTop() > 600) {
+                    $(window).scroll(function () {
-                        $("#to-top").fadeIn(500);
+                        if ($(window).scrollTop() > 600) {
-                    } else {
+                            $("#to-top").fadeIn(500);
-                        $("#to-top").fadeOut(500);
+                        } else {
-                    }
+                            $("#to-top").fadeOut(500);
-                });
+                        }
-                $("#to-top").click(function () {
+                    });
-                    $('body,html').animate({
+                    $("#to-top").click(function () {
-                        scrollTop: 0
+                        $('body,html').animate({
-                    }, 500);
+                            scrollTop: 0
-                    return false;
+                        }, 500);
+                        return false;
+                    });
                  });
              });
-         });
+         })()
      </script>
      <!--dr-menuSliding-->
      <script>
-         window.addEventListener('scroll', function () {
+         var fsliding = (function () {
-            var scroll = $(window).scrollTop();
+            window.addEventListener('scroll', function () {
-            var pageHeight = $(window).height();
+                var scroll = $(window).scrollTop();
-            var pageWidth = $(window).width();
+                var pageHeight = $(window).height();
-            var drMenu = $(".dr-menu");
+                var pageWidth = $(window).width();
-            var containerHeight = $("#container").height();
+                var drMenu = $(".dr-menu");
-            var containerTop = $("#container").offset().top;
+                var containerHeight = $("#container").height();
-            var drMenuHeight = drMenu.height();
+                var drMenuHeight = drMenu.height();
-            var headerHeight = $("header").height();
+                var headerHeight = $("header").height();
-            if (pageWidth < 992) {
+                if (pageWidth < 992) {
-                drMenu.hide();
+                    drMenu.hide();
-            }
-            else {
-                drMenu.show();
-                // drmenu到底, -5px莫名其妙
-                if (scroll - 5 - (0.7 * pageHeight - headerHeight) + drMenuHeight >= containerHeight) {
-                    drMenu.css({
-                        "position": "relative",
-                        "top": (containerHeight - drMenuHeight).toString() + "px",
-                        "right":"0"
-                    });
                  }
-                //滑动时，-5px莫名其妙
-                else if (scroll - 5 > 0.7 * pageHeight - headerHeight) {
-                    drMenu.css({
-                        "position": "fixed",
-                        "top": (headerHeight + 100).toString() + "px"
-                    });
-                }
-                //未滑动时
                  else {
-                     drMenu.css({
+                     drMenu.show();
-                         "position": "relative",
+                    // drmenu到底, -5px莫名其妙
-                        "top": "0",
+                    if (scroll - 5 - (0.7 * pageHeight - headerHeight) + drMenuHeight >= containerHeight) {
-                         "right":"0"
+                         drMenu.css({
-                    });
+                            "position": "relative",
+                            "top": (containerHeight - drMenuHeight).toString() + "px"
+                        });
+                    }
+                    //滑动时，-5px莫名其妙
+                    else if (scroll - 5 > 0.7 * pageHeight - headerHeight) {
+                        drMenu.css({
+                            "position": "fixed",
+                            "top": (headerHeight + 100).toString() + "px"
+                         });
+                    }
+                    //未滑动时
+                    else {
+                        drMenu.css({
+                            "position": "relative",
+                            "top": "0"
+                        });
+                    }
                  }
-             }
+             })
-         })
+         })()
      </script>
 </body>

Difference between revisions of "Team:XJTU-China/Description"

Revision as of 07:46, 10 July 2021

hin./ious