add fancy background animations nav

newVersion/css/navstyle.css

@@ -13,7 +13,8 @@
 #nav-menu {
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.85);
+    background: repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.822), rgba(22, 17, 65, 0.822) 5% );
+    background-size: 150vh 150vh;
     position: fixed;
     display: block;
     z-index: 10;
@@ -22,6 +23,7 @@
     bottom: 0;
     left: 1;
     right: 1;
+    transition: background-position 0.5s ease-in-out;
 }
 
 .nav-container {

newVersion/index.html

@@ -34,7 +34,6 @@
         </div>
 
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
-        <!--<script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
         <script defer src="js/scrolling.js"></script>
 
         <script>

newVersion/nav.html

@@ -25,7 +25,9 @@
             <span class="line" id="line3"></span>
         </a>
         <script>
+            let offset = 0;
             let menuOpen = false;
+            const offsetList = { 'home': 0, 'order': -200, 'contact': -400, 'examples': -600 };
             $( document ).ready( function () {
                 if ( sessionStorage.getItem( 'menuOpen' ) == 'true' ) {
                     $( '#nav-menu' ).hide( 700 );
@@ -36,10 +38,32 @@
                 }
                 if ( location.pathname === '/' ) {
                     $( '#home' ).removeClass( 'inactive' );
+                    $( '#home' ).addClass( 'locActive' );
                 } else {
                     $( '#' + location.pathname.slice( 1, location.pathname.length - 1 ) ).removeClass( 'inactive' );
+                    $( '#' + location.pathname.slice( 1, location.pathname.length - 1 ) ).addClass( 'locActive' );
                 }
                 sessionStorage.setItem( 'menuOpen', 'false' );
+
+                let loc = document.getElementsByClassName( 'locActive' )[ 0 ].id;
+                
+                offset += offsetList[ loc ];
+
+                $( '.inactive' ).mouseenter( function () {
+                    let obj = $( this ).attr( 'id' );
+                    if ( obj === 'home' ) {
+                        $( '#nav-menu' ).css( 'background-position', `${0 - offset}px` );
+                    } else if ( obj == 'order' ) {
+                        $( '#nav-menu' ).css( 'background-position', `${200 - offset}px` );
+                    } else if ( obj == 'contact' ) {
+                        $( '#nav-menu' ).css( 'background-position', `${400 - offset}px` );
+                    } else if ( obj == 'examples' ) {
+                        $( '#nav-menu' ).css( 'background-position', `${600 - offset}px` );
+                    }
+                } )
+                $( '.inactive' ).mouseleave ( function () {
+                    $( '#nav-menu' ).css( 'background-position', '0px' );
+                } )
             } );
 
             function toggleMenu () {