janishutz-website/development-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add fancy background animations nav

Browse Source
This commit is contained in:
Janis Hutz
2023-05-18 17:31:02 +02:00
parent ccf1c67837
commit f659c53a64
3 changed files with 27 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
newVersion/nav.html
View File

@@ -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 () {